Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Form Submit jQuery does not work

I have that form

<form action="deletprofil.php" id="form_id" method="post">             <div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">                 <button type="submit" name="submit" value="1" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Anlegen</button>                 <button type="submit" name="submit" value="2" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Bnlegen</button>             </div>         </form>  

and that Popup from jQuery Mobile

<div class="ui-popup-container pop in ui-popup-active" id="popupDialog-popup" tabindex="0" style="max-width: 1570px; top: 2239.5px; left: 599px;">     <div data-role="popup" id="popupDialog" data-overlay-theme="b" data-theme="b" data-dismissible="false" style="max-width:400px;" class="ui-popup ui-body-b ui-overlay-shadow ui-corner-all">         <div data-role="header" data-theme="a" role="banner" class="ui-header ui-bar-a">             <h1 class="ui-title" role="heading" aria-level="1">Delete Page?</h1>         </div>         <div role="main" class="ui-content">             <h3 class="ui-title">Sicher dass Sie das Profil löschen wollen?</h3>             <p>Es kann nicht mehr rückgängig gemacht werden.</p>             <a href="#" id="NOlink" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b">Abbrechen</a>             <a href="#" id="OKlink" class="ui-btn ui-corner-all ui-shadow ui-btn-inline ui-btn-b">OK</a>         </div>     </div>   </div> 

with my jQuery Code

<script language="javascript" type="text/javascript"> $(function(){     $('#form_id').bind('submit', function(evt){         $form = this;         evt.preventDefault();         $("#popupDialog").popup('open');         $("#NOlink").bind( "click", function() {             $("#popupDialog").popup('close');         });         $("#OKlink").bind( "click", function() {                           $("#popupDialog").popup('close');                $( "#form_id" ).submit();                  });              }); });         </script> 

The popup shows up but the form submit does not work. Does someone have any ideas?

like image 654
Phil Avatar asked Apr 10 '14 08:04

Phil


People also ask

Why form is not submitting in jQuery?

The NUMBER ONE error is having ANYTHING with the reserved word submit as ID or NAME in your form. If you plan to call . submit() on the form AND the form has submit as id or name on any form element, then you need to rename that form element, since the form's submit method/handler is shadowed by the name/id attribute.

How to form submit using jQuery?

jQuery submit() Method The submit event occurs when a form is submitted. This event can only be used on <form> elements. The submit() method triggers the submit event, or attaches a function to run when a submit event occurs.

Why My submit button not working?

Sometimes the problem is caused by old versions of the Javascript files, cached by your browser and can be fixed by clearing the browser cache. You can use the browser console of your browser for debugging. After the Javascript error is fixed, the submit button will automatically be enabled.

Why Onsubmit is not being called?

The onsubmit handler is not called, because the form cannot be submitted by any normal means, i.e. the submit event cannot be caused. There is only one submit control, and it is declared as disabled.


2 Answers

The NUMBER ONE error is having ANYTHING with the reserved word submit as ID or NAME in your form.

If you plan to call .submit() on the form AND the form has submit as id or name on any form element, then you need to rename that form element, since the form’s submit method/handler is shadowed by the name/id attribute.


Several other things:

As mentioned, you need to submit the form using a simpler event than the jQuery one

BUT you also need to cancel the clicks on the links

Why, by the way, do you have two buttons? Since you use jQuery to submit the form, you will never know which of the two buttons were clicked unless you set a hidden field on click.

<form action="deletprofil.php" id="form_id" method="post">   <div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">   <button type="submit" value="1" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Anlegen</button>   <button type="submit" value="2" class="ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Bnlegen</button>   </div> </form>    $(function(){     $("#NOlink, #OKlink").on("click", function(e) {         e.preventDefault(); // cancel default action         $("#popupDialog").popup('close');         if (this.id=="OKlink") {            document.getElementById("form_id").submit(); // or $("#form_id")[0].submit();         }     });      $('#form_id').on('submit', function(e){       e.preventDefault();       $("#popupDialog").popup('open');     }); });     

Judging from your comments, I think you really want to do this:

<form action="deletprofil.php" id="form_id" method="post">   <input type="hidden" id="whichdelete" name="whichdelete" value="" />   <div data-role="controlgroup" data-filter="true" data-input="#filterControlgroup-input">   <button type="button" value="1" class="delete ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Anlegen</button>   <button type="button" value="2" class="delete ui-btn ui-shadow ui-corner-all ui-icon-delete ui-btn-icon-right" data-icon="delete" aria-disabled="false">Bnlegen</button>   </div> </form>    $(function(){     $("#NOlink, #OKlink").on("click", function(e) {         e.preventDefault(); // cancel default action         $("#popupDialog").popup('close');         if (this.id=="OKlink") {            // trigger the submit event, not the event handler           document.getElementById("form_id").submit(); // or $("#form_id")[0].submit();         }     });     $(".delete").on("click", function(e) {         $("#whichdelete").val(this.value);     });     $('#form_id').on('submit', function(e){       e.preventDefault();       $("#popupDialog").popup('open');     }); });   
like image 117
mplungjan Avatar answered Sep 29 '22 00:09

mplungjan


Because when you call $( "#form_id" ).submit(); it triggers the external submit handler which prevents the default action, instead use

$( "#form_id" )[0].submit();        

or

$form.submit();//declare `$form as a local variable by using var $form = this; 

When you call the dom element's submit method programatically, it won't trigger the submit handlers attached to the element

like image 23
Arun P Johny Avatar answered Sep 29 '22 00:09

Arun P Johny