jQuery .submit() not working with javascript-generated html form

Question

I am having a bear of a time figuring out why a jQuery .submit() is not recognizing the submit.

The HTML form (actually multiple forms) are successfully generated into a div that is appended to the page with the following javascript function (this is called out of $(document).ready(function(){}):

function makeMenu(chambers,bins,values) {
    var htmlString = "";
    for(var i = 0; i < chambers.length; i++) {
        if(bins[i]) {
            var link = chambers[i] + " - " + bins[i];
            var p = values[i];
        }

        htmlString += "<form name='entity' id='entity' method='post' action=''>";
        htmlString += "<input type='submit' name='get_entity' id='to_php' value='" + link + "' class='text_button' title='value=" + p + "'>";
        htmlString += "<input type='hidden' name='tool' value='" + chambers[i] + "'/>";
        htmlString += "<input type = 'hidden' name='bin' value='" + bins[i] + "'/>";
        htmlString += "</form>";
    }

    $("#spacer").append("<div class='menu'>" + htmlString + "</div>");
}

Upon submitting a form I am just trying to get an alert to post to show that the submit is recognized but it does not get there:

$(document).ready(function() {
    $('#entity').submit(function() {
        alert('Success!');
    });
 })

I have tried making sure that the submit button did not have submit as the name and id and tried just generating a single form but no luck. Any assistance is much appreciated.

When $('#entity').submit() is executed, do you think $('#entity') exists? — user400654
– user400654, Commented Dec 18, 2013 at 17:31
I've run into another problem. The makeMenu is creating multiple forms of class=entity. When one of them is clicked on I want to pass the chamber and bin information to php using serialize. Unfortunately, the serialized string contains the information for ALL chamber/bin combinations. I need it to only include information for the link clicked. Is there a way to do this? — chemnteach
– chemnteach, Commented Dec 18, 2013 at 19:15

Alexandre Wiechers Vaz · Accepted Answer · 2013-12-18 17:32:51Z

3

Try

$(document).ready(function() {
    $(document).on('submit','#entity',function() {
        alert('Success!');
    });
 })

answered Dec 18, 2013 at 17:32

Alexandre Wiechers Vaz

1,6073 gold badges19 silver badges21 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

chemnteach Over a year ago

Responding to Alexandre as he had the first solution. Works great now. I'm only a couple months into javascript/jquery, learn something new every day. Also, per Jason I did change it to a class instead of id but it worked both ways. Thanks for the quick responses!

chemnteach Over a year ago

I've run into another problem. The makeMenu is creating multiple forms of class=entity. When one of them is clicked on I want to pass the chamber and bin information to php using serialize. Unfortunately, the serialized string contains the information for ALL chamber/bin combinations. I need it to only include information for the link clicked. Is there a way to do this?

Alexandre Wiechers Vaz Over a year ago

You are using jquery .serialize() ?

chemnteach Over a year ago

Yes. My ajax is per below

chemnteach Over a year ago

$.ajax({ type:'POST', data: $('.entity').serialize(), url: 'get_prob.php', dataType: 'json', success: function(data) { alert('Success'); } });

|

Dan · Accepted Answer · 2013-12-18 17:37:08Z

0

Try on instead of submit. As the form is created by jQuery it isn't bound to the document yet.

$(document).ready(function() {
    $(document).on('submit','#entity',function() {
        alert("success");
    });
 })

answered Dec 18, 2013 at 17:37

Dan

52610 silver badges28 bronze badges

Collectives™ on Stack Overflow

jQuery .submit() not working with javascript-generated html form

2 Answers 2

6 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

6 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related