Forum PHP.pl > zależność wielu pól input i select

Pomoc - Szukaj - Użytkownicy - Kalendarz

Pełna wersja: zależność wielu pól input i select

Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript

hubson87

1.04.2011, 18:19:11

Witam mój problem został już po częsci rozwiązany tutaj.

Jeżeli komuś się nie chce czytać to:
Potrzebowałem zrobić pole input zależne od wartości selecta pobierającego opcję z bazy. Kolega jaslanin podał mi taki kod.

Cytat(jaslanin @ 30.03.2011, 08: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

Jednak problem w tym, że mam formularz generowany dynamicznie. I teraz potrzebowałbym, żeby ten kod mógł działać w ten sposób, że przy wyborze danego selecta generowany jest dany input, tzn.
1. Pobieram dana z selecta <select name="sel[x]">
2. Odpowiednim zapytaniem wyciagam potrzebna dana w pliku ajax.php
3.Przesyłam ją z powrotem do formularza i wstawiam w input <input name="inp[x]">. Nie znam się za bardzo na js więc będę wdzięczny za każdą pomoc

jaslanin

2.04.2011, 17:32:40

Ostatnio o mnie kiepsko z czytaniem ze zrozumieniem, albo u innych z pisaniem do zrozumienia. W każdym razie, czy nie chodzi Ci czasem po prostu o to by ustawić atrybut name dla pola input w zależności od pola select?

name dla pola input możesz ustawić przez: http://api.jquery.com/attr/

przesyłanie kolejnych danych myślę można wykonać analogicznie jak w moim przykładzie który cytujesz.

Podejrzewam chociaż nie jest to tutaj wyraźnie napisane że możesz chcieć by wartość atrybutu pola name pochodziła z atrybutu value pola option.

w takim wypadku wartość pola select można uzyskać używając:

http://api.jquery.com/val/
http://api.jquery.com/change/

tę wartość później wykorzystujesz jako wartość atrybutu name dla pola input, używając do tego funkcji attr

hubson87

4.04.2011, 15:04:27

Dobra temat nadal aktualny jeśli ktokolwiek tu zagląda ;d

Zoptymalizowałem kod funkcji do takiej postaci i wszystko działa pieknie dopóki formularz tworzony jest statycznie. Problem pojawia się przy tworzeniu formularza w sposób dynamiczny przy użyciu jquery.
I teraz pytanie jak w jquery wyciągnąć indeks danego elemntu ale przy dynamicznym formularzu? Poniżej działająca wersja dla wersji statycznej.

[JAVASCRIPT] pobierz, plaintext 
 <script type="text/javascript">
 
 
        $(document).ready(function() {
 
            $('select.sf').change(function() {
 
                var z = $("select.sf").index(this);
 
 
                $.getJSON('ajax.php', {option: $(this).val()}, function(data) {
                    $("[name^=jed]").eq(z).val(data.inputValue);
					alert(z);	
                });
 
			});
        });
 
    </script>
[JAVASCRIPT] pobierz, plaintext

jaslanin

6.04.2011, 09:58:11

myślę że to pomoże: http://api.jquery.com/live/

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.