Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

jquery form submit with .on()

Tags:

jquery

forms

I'm trying to send a form created by jquery. The form is appended to a div and variable 'data' below is created using php, I'll just post the most important js code.

I tried many things with and without 'on()' but I fail in getting the alert box displaying the '1' so that I know the code block is actually executed..tbh I don't get what I'm doing wrong, any explanation would be greatly appreciated. Thanks in advance!

$(".r5").click(function(event){
    var data='<select name="sForum"><option value="1">bla</option></select>';
    $(this).parent().next('div').html('<form class="moveform">'+data+'<input type="submit" name="submit" class="movethisform" value="Move Thread" /></form>');
});
$("form.moveform").on("submit",function(event){
    alert(1);
});
like image 453
JustaN00b Avatar asked May 11 '12 15:05

JustaN00b


People also ask

How can we submit a form using jQuery?

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.

Is jQuery submit deprecated?

No, it's not deprecated! Deprecated = Not current. Obsolete = no longer available.

How do you check form is submitted or not in jQuery?

submit(function(e) { e. preventDefault(); $("#some-span"). html(data); });

How do I add a submit button to a form?

It is also created using HTML <input> tag but type attribute is set to button. You can try to run the following code to use submit button to submit and reset a form. Under the action, attribute add the file, where you want to reach after clicking Submit button.


1 Answers

You are binding to the form before it exists. Bind the event to the document, and pass the form selector to .on:

$(".r5").click(function(event){
    var data='<select name="sForum"><option value="1">bla</option></select>';
    $(this).parent().next('div').html('<form class="moveform">'+data+'<input type="submit" name="submit" class="movethisform" value="Move Thread" /></form>');
});
$(document).on("submit", "form.moveform", function(event){
    alert(1);
});
like image 96
bfavaretto Avatar answered Oct 07 '22 08:10

bfavaretto