HTML Form created in javascript does not respond to .submit

Question

I have added a form to my html page dynamically using javascript. The .submit on the form does not work when I do this. However if I create the exact same form in html, it works as expected.

Here is a fiddle: http://jsfiddle.net/dwha77g4/4/

The following code:

$('.submit-form').submit(function(e){
    alert("test");
    e.preventDefault();
});

runs on the first button in the fiddle, but not the second dynamically created one.

rfornal · Accepted Answer · 2014-12-08T01:03:40.307

5

Try ... Working Demo

$("body").on('submit', '.submit-form', function(e) {
  alert("test");
  e.preventDefault();
});

Basically, dynamically created content does not handle prior attached events well. Since the object did not exist when you attempted to run the submit, there was nothing to attach to. What I did here was attach an on event onto the body that searches for .submit-form, irregardless of when it was created.

edited Dec 08 '14 at 01:03

answered Dec 08 '14 at 00:58

rfornal

5,072
5
30
42

Thank you for the solution and excellent explanation of what is going on. – roob Dec 08 '14 at 01:18

score 2 · Answer 2 · answered Dec 08 '14 at 01:04

The problem with your code is that when you add the listerner to the submit event, there is no element that matches with the query '.submit-form', because your dinamic form was not created yet.

You can do

$(document).ready(function() {
    var formHTML = "<li><form action='#' method='POST' class='submit-form'><input type='submit' value='submit dynamic' /></form></li>"
    $("#list-container").append(formHTML);

    $('.submit-form').submit(function(e){
       alert("test");
       e.preventDefault();
    });
});

Like that, you will create the form and then add the listener to the submit event.

score 1 · Answer 3 · answered Dec 08 '14 at 01:01

The top code to create the event listener function runs before the html snippet is inserted to the DOM, so it is not tied to the actual form. You want to use the .on() to tie events to future added DOM content. Just checkout the jquery docs for .on(), pretty self explanatory.

you can also re-organize your code, so that the .submit() is set up after you insert the HTML snippet and should also work for you.

score 1 · Answer 4 · edited May 23 '17 at 11:50

For new objects in the DOM we must to use "on" jQuery function. http://api.jquery.com/on/ So try to change body for document as suggest rformal.

$(document).on("submit", ".submit_form", function(e){
    e.preventDefault();  
    alert("test");

});

Said that, you should not use "e.preventDefault" if you want to send your form. I dont know if it is your case, because e.preventDefault() will prevent the default event from occuring. See this post if you want to know better about that. event.preventDefault() vs. return false

Note: use submit_form instead submit-form

HTML Form created in javascript does not respond to .submit

4 Answers4