Forum PHP.pl > [JavaScript][MySQL][PHP] dynamiczny input zalezny od pola select

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: [JavaScript][MySQL][PHP] dynamiczny input zalezny od pola select

hubson87

29.03.2011, 21:40:13

Witam, potrzebuje zrobic cos takiego. Czytalem troche o tym ale nie znalazlem odpowiedniego rozwiazania a na javasript nie znam sie za bardzo.

1. Wybieram sobie z pola select w formularzu jakis artykul.
2. Teraz wybrana wartosc selecta ma sluzyc jako warunek w zapytaniu tzn

[SQL] pobierz, plaintext 
 SELECT cos tam FROM cos tam WHERE warunek = "wartosc selecta"
[SQL] pobierz, plaintext

3. Nastepnie wewnatrz tego samego formularza chce wynik zapytania wpisac w input

W skrocie dynamiczne wypelnianie input na podstawie wartosci z pola select odwolujacego sie do bazy. Najlepiej jakbym mogl prosic o jakis przyklad w miare podobny do mojego problemu.
Z góry dzięki.

CuteOne

29.03.2011, 22:33:04

jQuery [ajax] + poczytaj o evencie onchange

hubson87

30.03.2011, 06:13:44

Wiem co to onChange ale naprawde bylbym wdzieczny za jakis przyklad. Głównie jak to wysłać do zapytania i odebrać z powrotem.

jaslanin

30.03.2011, 07:50:50

index.php:

[PHP] pobierz, plaintext 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<title>Untitled Document</title>
</head>
 
<body>
    <script type="text/javascript">
        $(document).ready(function() {
 
            $('select.selectField').change(function() {
                $.getJSON('ajax.php', {option: $(this).val()}, function(data) {
                    $('input.inputField').val(data.inputValue);
 
                });
            });
 
        });
    </script>
 
 
    <select class="selectField">
        <option>Wybierz</option>
        <option value="opcja 1">opcja 1</option>
        <option value="opcja 2">opcja 2</option>
        <option value="opcja 3">opcja 3</option>
    </select>
 
    <input style="width: 300px;" class="inputField" type="text" />
 
</body>
</html>
[PHP] pobierz, plaintext

ajax.php :

[PHP] pobierz, plaintext 
<?
 
$option = $_GET['option'];
 
$a = new stdClass();
$a->inputValue = "selected option: $option";
 
echo json_encode($a);
 
?>
[PHP] pobierz, plaintext

hubson87

30.03.2011, 15:26:31

O coś takiego właśnie mi chodziło teraz to jakoś zmienie na swoje potrzeby. Dzięki

sakul55

30.03.2011, 16:21:21

a dziala Ci ten przyklad? chcialem zrobic cos podobnego, ale to mi nie dziala

nie reaguje w zaden sposob przy zmianach. ma ktos moze jakis podobny?

jaslanin

30.03.2011, 16:41:50

Działa. Na pewno masz wgrane oba pliki (obok siebie) na serwer z obsługą PHP?

Jeżeli tak i nie działa, to zobacz co masz napisane w konsoli JS, potem dodatkiem firebug do FF sprawdź co się dzieje z żądaniami XHR. Czy w odpowiedzi jest poprawna odpowiedź JSON, czy żądanie nie zgłasza błędu 404.

sakul55

30.03.2011, 17:03:24

w konsoli nie ma zadnych bledow

w Firebugu znalazlem cos takiego, ale nie wiem czy o to chodzi:

Kod

xhr:A.XMLHttpRequest&&(A.location.protocol!=="file:"||!A.ActiveXObject)?function(){return new A.XMLHttpRequest}:function(){try{return new A.ActiveXObject("Microsoft.XMLHTTP")}catch(a){}}

Kod

x=e.xhr();if(x){e.username?x.open(n,e.url,e.async,e.username,e.password):x.open(n,e.url,e.async);try{if(e.data||a&&a.contentType)x.setRequestHeader("Content-Type",e.contentType)

inne przyklady z AJAXa mi dzialaja

hubson87

30.03.2011, 19:19:04

Mi pomoglo uaktualnienie wersji php bo json_encode nie byl obslugiwany przez starsza. Tak btw. mam jeszcze jedno pytanko co do tego tematu. Dalo by sie to jakos polaczyc z kilkoma selectami i inputami. Powiedzmy mam formularz gdzie:

select name="wybierz[]"
input name="wstaw[]"

sakul55

30.03.2011, 20:30:27

rzeczywiscie nowsza wersja PHP pomogla. dzieki za pomoc wam obu

To jest wersja lo-fi głównej zawartości. Aby zobaczyć pełną wersję z większą zawartością, obrazkami i formatowaniem proszę kliknij tutaj.