2012-03-01 13 views
7

nawiązaniu do mojego problemu tutaj - jQuery on submit validation, with modal dialog at the end?jQuery - forma nie złoży jQuery

Wydaje się postaci po prostu nie będzie przekazywać za pomocą jQuery. Oto mój kod w bardzo uproszczonej poziomu:

<script type="text/javascript"> 

    $(document).ready(function(){ 
     $(document).click(function() { 
      $('#inputform').submit(); 
     }); 

     $("#inputform").submit(function() { 
      alert('test'); 
      return true; 
     }); 
    }); 
</script> 

<form method="POST" action="<?php echo CURRENT_PAGE ?>" id="inputform"> 

<button type="submit" name="submit" id="submit">Submit form</button> 

</form> 

Kliknięcie na ciało wyświetla alert „test”, ale nie wysłać formularz. Ponadto po zamknięciu okna alertu nie pojawi się ponownie po ponownym kliknięciu.

Kliknięcie przycisku "Wyślij" powoduje wyświetlenie alertu, a następnie przesłanie formularza zgodnie z oczekiwaniami.

Przepraszam za to, co jest (wiem) naprawdę głupie pytanie, ale nie jestem w tym miejscu. TY!

+0

remove '$ ("# inputform") przedstawia (function() {return true;});' – mgraph

+0

@ TJ - przepraszam! Próbowałem go dodać, ale nadal borykałem się z powyższym formatowaniem. @ mgraph - dziękuję, ale mam tam wiele sprawdzania poprawności –

Odpowiedz

22

Problem polega na tym, że nadałeś przycisk "Wyślij". Zmień go na prawie wszystko, a to zadziała. (Również zmienić id, najlepiej trzymać je tak samo, nie tylko ze względu some browser issues.)

Dlaczego: Elementy formy mają właściwość o nazwie submit która jest funkcją można zadzwonić do przedstawienia im. (jQuery używa tego pod okładkami, gdy wywołujemy submit w instancji jQuery.) Ale elementy formularza również otrzymują odbiór właściwości dla każdego z pól w formularzu, używając nazwy pola, a więc jeśli masz pole o nazwie "wyślij" , to przesłania funkcji submit, co oznacza, że ​​nie można przesłać formularza programowo.

przykład robocza: Live copy | Live source

<script type="text/javascript"> 

    $(document).ready(function(){ 
     $(document).click(function() { 
      $('#inputform').submit(); 
     }); 

     $("#inputform").submit(function() { 
      alert('test'); 
      return true; 
     }); 
    }); 
</script> 

<form method="GET" action="http://jsbin.com/uwuzon" id="inputform"> 
<input type="text" name="foo" value="bar"> 
<button type="submit" name="someOtherName" id="someOtherName">Submit form</button> 
</form> 

(Istotną zmianą jest name="someOtherName" id="someOtherName" część Pozostałe zmiany [zmieniających działanie postaci i metody] właśnie tak to działa na JSbin.).

dygresja: Nie trzeba return true; w module obsługi zdarzeń submit, aby umożliwić przesyłanie formularzy. Musisz tylko niereturn false;. . :-)

+0

Działa to teraz doskonale, dziękuję bardzo! Nigdy nie wiedziałem, że podanie nazwy i identyfikatora spowoduje tyle problemów: $ –

+0

@xndx: :-) Dobra okazja, cieszę się, że pomogło! –

+1

Tak, właśnie spędziłem prawie godzinę na debugowaniu tego błędu/funkcji ... –