Pomoc - Szukaj - Użytkownicy - Kalendarz
Pełna wersja: [jquery] dwa i więcej inputów
Forum PHP.pl > Forum > Po stronie przeglądarki > JavaScript
bliitz
13.02.2009, 12:22:46
Witam

Jak określić konkretny input, którym ma wywołać zdarzenie?
tzn. przykładowe formularze:
[PHP] pobierz, plaintext 
  1. <?php
  2. <form method="post">
  3. <input type="submit" name="update" />
  4. <input type="submit" name="delete" />
  5. </form>
  6. <form method="post">
  7.   <input type="submit" name="update" />
  8.   <input type="submit" name="delete" />
  9.   </form>
  10. <form method="post">
  11.   <input type="submit" name="update" />
  12.   <input type="submit" name="delete" />
  13.   </form>
  14. ....
  15. ?>
[PHP] pobierz, plaintext

i tak kilka formularzy oraz przykładowe submity
Kod
$(document).ready(function(){  
     $("form").submit(function(){
         alert('delete');
         return false;
     });
     $("form").submit(function(){  
         alerty('update');
         return false;
      });
});

próbowałem odwoływać się do konkretnego inputa na kilka sposobów tzn:
Kod
$("form[name='update']")
$("form[@name='update']")

jednak żaden spsób nie działa, tzn. bez odwołań tego typu a przez zwykły $("form") wywołuje się tylko pierwszy submit w tym przypadku ten co wywołuje alert('delete'), jak można wywołać ten drugi submit??
ziqzaq
13.02.2009, 13:12:03
Jeśli chodzi o podpięcie odpowiednich zdarzeń do odpowiednich submitów we wszystkich formularzach:
[HTML] pobierz, plaintext 
  1. <form name="jeden" action="test.html" method="post">
  2. <input type="submit" name="update" value="Update" />
  3. <input type="submit" name="delete" value="Delete" />
  4. </form>
  5. <form name="dwa" action="test.html" method="post">
  6. <input type="submit" name="update" value="Update" />
  7. <input type="submit" name="delete" value="Delete" />
  8. </form>
  9. <form name="trzy" action="test.html" method="post">
  10. <input type="submit" name="update" value="Update" />
  11. <input type="submit" name="delete" value="Delete" />
  12. </form>
[HTML] pobierz, plaintext

Kod
$(document).ready(function(){
    $(':submit[name="delete"]').click(function(){
        alert('delete');
        return false;
    });
    $(':submit[name="update"]').click(function(){
        alert('update');
        return false;
    });
});

PS Co problem ma wspólnego z xml/ajax? Toć to poprostu JS.
PSS "Note the "@" before the attribute name was deprecated as of version 1.2." winksmiley.jpg
lord_t
13.02.2009, 13:45:16
Spróbuj tak:
Kod
$('form[name=update]') //jq >=1.3.x
$('form[@name=update]')//jq <=1.2.6


BTW:
Definiując 2 razy to samo zdarzenie jednego elementu (o ile się nie mylę) powinieneś nadpisać pierwszą definicję drugą definicją.
bliitz
13.02.2009, 13:56:41
Cytat(ziqzaq @ 13.02.2009, 13:12:03 ) *
Jeśli chodzi o podpięcie odpowiednich zdarzeń do odpowiednich submitów we wszystkich formularzach:
[HTML] pobierz, plaintext 
  1. <form name="jeden" action="test.html" method="post">
  2. <input type="submit" name="update" value="Update" />
  3. <input type="submit" name="delete" value="Delete" />
  4. </form>
  5. <form name="dwa" action="test.html" method="post">
  6. <input type="submit" name="update" value="Update" />
  7. <input type="submit" name="delete" value="Delete" />
  8. </form>
  9. <form name="trzy" action="test.html" method="post">
  10. <input type="submit" name="update" value="Update" />
  11. <input type="submit" name="delete" value="Delete" />
  12. </form>
[HTML] pobierz, plaintext

Kod
$(document).ready(function(){
     $(':submit[name="delete"]').click(function(){
         alert('delete');
         return false;
     });
     $(':submit[name="update"]').click(function(){
         alert('update');
         return false;
     });
});

PS Co problem ma wspólnego z xml/ajax? Toć to poprostu JS.
PSS "Note the "@" before the attribute name was deprecated as of version 1.2." winksmiley.jpg


niestety to powoduje że wyświetlane są tylko wartości z pierwszego formularza

lord_t

próbowałem już tego rozwiązania jednak wtedy nic się nie dzieje a w konsoli błędów nie pojawia się żadne komunikat
lord_t
13.02.2009, 13:59:21
Weź no zapodaj kod tej stronki z tymi formularzami.
bliitz
13.02.2009, 14:05:41
Kod
<script type="text/javascript">
$(document).ready(function(){
    
    $("form").submit(function(){  
        $(this).children( 'input[name="gospodarze"]').val() == '' ? $(this).children( 'input[name="gospodarze"]').css( 'background', '#EF9595' ) : $(this).children( 'input[name="gospodarze"]').css( 'background', '#FFFFFF' );
        $(this).children( 'input[name="goscie"]').val() == '' ? $(this).children( 'input[name="goscie"]').css( 'background', '#EF9595' ) : $(this).children( 'input[name="goscie"]').css( 'background', '#FFFFFF' );
        $(this).children( 'input[name="miejsce"]').val() == '' ? $(this).children( 'input[name="miejsce"]').css( 'background', '#EF9595' ) : $(this).children( 'input[name="miejsce"]').css( 'background', '#FFFFFF' );
        $(this).children( 'input[name="godzina"]').val() == '' ? $(this).children( 'input[name="godzina"]').css( 'background', '#EF9595' ) : $(this).children( 'input[name="godzina"]').css( 'background', '#FFFFFF' );

        $.ajax({
            type: "POST",
            url: "ajax/term_spotkan.ajax.php",            
            data: { 'id': $(this).children('input[name="id"]').val(), 'gospodarze': $(this).children('input[name="gospodarze"]').val(), 'goscie': $(this).children('input[name="goscie"]').val(),'rok': $(this).children('input[name="rok"]').val(),
                    'miesiac': $(this).children('input[name="miesiac"]').val(), 'dzien': $(this).children('input[name="dzien"]').val(), 'miejsce': $(this).children('input[name="miejsce"]').val(),
                    'godzina': $(this).children('input[name="godzina"]').val(), 'wiek': $(this).children('select[name="wiek"]').val() },
            success: function( msg ){
                $( "#updMsg" ).text( msg );
                $( "#updMsg" ).css( 'display', 'block' );
            }        
        });
        return false;
    });
});
</script>


[HTML] pobierz, plaintext 
  1. <form method="post">
  2.         <input name="id" type="hidden" value="<?php echo $zm[ 'id_spotkania' ];?>" />
  3.         <input class="dane_zw" name="gospodarze" style="width: 120px;" type="text" value="<?php echo $zm['gospodarze'];?>" />
  4.         <input class="dane_zw" name="goscie" style="width: 100px;" type="text" value="<?php echo $zm['goscie'];?>" />
  5.         <input class="dane_zw" name="rok" style="width: 50px;" type="text" value="<?php echo $zm['rok'];?>" />
  6.         <input class="dane_zw" name="miesiac" style="width: 50px;" type="text" value="<?php echo $zm['miesiac'];?>" />
  7.         <input class="dane_zw" name="dzien" style="width: 50px;" type="text" value="<?php echo $zm['dzien'];?>" />
  8.         <input class="dane_zw" name="miejsce" style="width: 90px;" type="text" value="<?php echo $zm['miejsce'];?>" />
  9.         <input class="dane_zw" name="godzina" style="width: 50px;" type="text" value="<?php echo $zm['godzina'];?>" />
  10.         <select name="wiek" class="select_wiek">
  11.         <?php
  12.         $zm['wiek'] == 'seniorzy'? $seniorzy = 'selected' : $kadeci = 'selected';
  13.         ?>
  14.         <option value="seniorzy" <?php echo $seniorzy; ?>>seniorzy</option>
  15.         <option value="kadeci" <?php echo $kadeci; ?>>kadeci</option>        
  16.         <input type="submit" name="aktualizuj" value="Aktualizuj" class="submit" />
  17.         <input type="submit" name="usun" value="Usuń" class="submit" />
  18. </form>
[HTML] pobierz, plaintext

formularz obraca się w pętli więc kilka ich jest wyświetlanych na stronie
ziqzaq
13.02.2009, 14:30:03
Hmm nie wiem czy to dobry pomysł, ale może rozbić submit formularza na dwie akcje tzn:
1) Ustawienie jaką akcję wykonać (update, delete) i sumbit formularza,
2) Przy zdarzeniu submit sprawdzić jaką akcję wykonujemy i pobrać odpowiednie pole(a).
Kod
<script type="text/javascript">
$(document).ready(function(){
    var act = '';
    $(':submit').click(function(){
        act = $(this).attr('name');
    });
    
    $('form').submit(function(){
        alert($(this).children(':input[name="ha!"]').val()+"\nAkcja: "+act);
        return false;
    });
});
</script>

[HTML] pobierz, plaintext 
  1. <form name="jeden" action="" method="post">
  2. <input type="text" name="ha!" value="Wartość ha! jeden" />
  3. <input type="submit" name="update" value="Update" />
  4. <input type="submit" name="delete" value="Delete" />
  5. </form>
  6. <form name="dwa" action="" method="post">
  7. <input type="text" name="ha!" value="Wartość ha! dwa" />
  8. <input type="submit" name="update" value="Update" />
  9. <input type="submit" name="delete" value="Delete" />
  10. </form>
[HTML] pobierz, plaintext

O coś takiego ci chodzi?
bliitz
13.02.2009, 16:51:59
ziqzaq

coś w tym stylu, po przeróbkach działa thx
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.
Invision Power Board © 2001-2025 Invision Power Services, Inc.