Okno dialogowe modemu jQuery nie przesyła mojego formularza

Question

Używam okna dialogowego Modem jQuery, aby zapytać użytkownika, czy chce przesłać formularz, czy nie.

Po tym, jak użytkownik kliknie przycisk Wyślij w oknie dialogowym, formularz nie jest wysyłany.

Jeśli ponownie kliknę przycisk przesyłania formularzy, zostanie on przesłany.

Zgaduję, że to kwestia zakresu, widziałem kilka innych postów na ten temat, ale jak dotąd spędziłem wiele godzin bez powodzenia. Wszelkie pomysły na rozwiązanie tego problemu?

JavaScript

$(document).ready(function(){ 
    var submitForm = $('#myform'); 
    submit = false; 

    $("#confirm").dialog({ 
     resizable: false, 
     height: 140, 
     modal: true, 
     autoOpen: false, 
     buttons: { 
      'Submit': function() { 
       $(this).dialog('close'); 
       submit = true; 
       submitForm.submit(); 
      }, 
      'Cancel': function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 
    $("#confirm").parent().appendTo($("#myform")); 

    submitForm.submit(function() { 
     if (submit) { 
      return true; 
     } else { 
      $("#confirm").dialog('open'); 
      return false; 
     } 
    }); 
}); 

HTML

<form id="myform" action="#" method="post"> 
    <input type="text" name="check_me" /> 
    <input type="submit" name="submit" value="Go!" /> 
</form> 
<div id="confirm" style="display:none;">Please confirm that you want to submit</div> 

Answer 1

zmienić atrybut nazwa przedstawienia przycisku z 'submit' na 'btnSubmit'

<input type="submit" name="btnSubmit" value="Go!" /> 

Wymienić '#' w wstaw atrybut akcji do pustego lub innego prawidłowego adresu URL.

Answer 2

Rozwiązaniem jest po prostu ... nazwa twojego przycisku. Dlaczego pytasz? Pokażę ci!

Weź to jsfiddle i zauważ, że wprowadziłem tylko kilka zmian. Javascript nie zmienił, tylko HTML

HTML

<form id="myform" action="javascript:alert('Success!')" method="post"> 
    <input type="text" name="check_me" /> 
    <input type="submit" name="btnSubmit" value="Go!" /> 
</form> 
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​ 

Zrobiłem dwie zmiany:

1. Zmieniłem działania, aby być javascript nabór jsfiddle kompatybilności
2. Zmodyfikowałem nazwę przycisku na coś innego niż przesłanie

Musiałem zrobić # 2, ponieważ wywołanie $ ('# myform'). Submit odwoływało się do przycisku, a nie do metody przesyłania, a jQuery dostało wszystkie rodzaje pomyłek. Zmieniając nazwę przycisku, przesyłka $ ("# myform") pozostaje oczekiwaną funkcją przesyłania jQuery i wszyscy są szczęśliwi.

Natknąłem się na to, przechodząc przez kilka iteracji, które zachowałem poniżej dla potomności.

Powodzenia!

======= ORIGINAL POST PONIŻEJ ========

Jeśli wszystko, co chcesz zrobić, to "rozwiązać", można byłaby następująco:

HTML

<form id="myform" action="#" method="post"> 
    <input type="text" name="check_me" /> 
    <input type="button" id="btnSubmit" value="Go!" /> 
</form> 
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​ 

JavaScript

$(document).ready(function(){ 
    var submitForm = $('#myform'); 
    submit = false; 

    $("#confirm").dialog({ 
     resizable: false, 
     height: 140, 
     modal: true, 
     autoOpen: false, 
     buttons: { 
      'Submit': function() { 
       $(this).dialog('close'); 
       submit = true; 
       submitForm.submit(); 
      }, 
      'Cancel': function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 
    $("#confirm").parent().appendTo($("#myform")); 

    $("#btnSubmit").click(function() { 
     $("#confirm").dialog('open'); 
    }); 

    submitForm.submit(function() { 
     if (submit) { 
      return true; 
     } 
    }); 
});​ 

dziwne, poniżej uczynków s dobrze:

HTML

<form id="myform" action="javascript:alert('success!');" method="post"> 
    <input type="text" name="check_me" /> 
    <input type="button" id="btnSubmit" value="Go!" /> 
</form> 
<div id="confirm" style="display:none;">Please confirm that you want to submit</div>​ 

JavaScript

$(document).ready(function(){ 
    var submitForm = $('#myform'); 
    submit = false; 

    $("#confirm").dialog({ 
     resizable: false, 
     height: 140, 
     modal: true, 
     autoOpen: false, 
     buttons: { 
      'Submit': function() { 
       $(this).dialog('close'); 
       submit = true; 
       $('#myform').submit(); 
       //submitForm.submit(); 
      }, 
      'Cancel': function() { 
       $(this).dialog('close'); 
      } 
     } 
    }); 
    $("#confirm").parent().appendTo($("#myform")); 
    $("#btnSubmit").click(function() { $('#myform').submit(); }); 

    submitForm.submit(function() { 
     if (submit) { 
      return true; 
     } else { 
      $("#confirm").dialog('open'); 
      return false; 
     } 
    }); 
});​ 

Jedyne co zmieniło usunięto przycisk Prześlij i 100% przesłać za pośrednictwem jQuery.

Answer 3

Możesz wypróbować formularz on submit event, który ma inny typ zdarzeń.

onsubmit="return confirm('Please confirm that you want to submit')" 

zobaczyć EDIT, teraz można zmienić tworzyć jedną funkcję z Modal Dialog zwraca prawdę lub fałsz.