Form Submit jQuery does not work
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');
});
});
According to http://api.jquery.com/submit/
The submit event is sent to an element when the user is attempting to submit a form. It can only be attached to elements. Forms can be submitted either by clicking an explicit
<input type="submit">
,<input type="image">
, or<button type="submit">
, or by pressing Enter when certain form elements have focus.
So basically, .submit
is a binding function, to submit the form you can use simple Javascript:
document.formName.submit().
Since every control element gets referenced with its name on the form element (see forms specs), controls with name "submit" will override the build-in submit function.
Which leads to the error mentioned in comments above:
Uncaught TypeError: Property 'submit' of object
#<HTMLFormElement>
is not a function
As in the accepted answer above the simplest solution would be to change the name of that control element.
However another solution could be to use dispatchEvent
method on form element:
$("#form_id")[0].dispatchEvent(new Event('submit'));
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