Question

Need help in jquery:

here is a schema of code:

1. submit form through jquery to php
2. php sends another form upon submission
3. again submit form without page refresh and this continues forever.

sample code:

$(document).ready(function()
{
    $(".message-submit-button").click(function(){   
        var element = $(this);
        var Id = element.attr("id");
        var messageinput = $("#messageinput"+Id).val();
        var action = $("#action"+Id).val();
        var dataString = 'messageinput='+ messageinput + '&mobilenumber=' + Id + '&action=' + action;

        if(messageinput=='')
        {
            alert("Please Enter Message");
            document.getElementById('messageinput'+Id).focus();
        }
        else
        {
            $("#flash"+Id).show();
            $.ajax({
                type: "POST",
                url: "insert_message.php",
                data: dataString,
                cache: false,
                success: function(html){
                    $("#flash"+Id).hide();
                    $("#message-content"+Id).replaceWith(html); 
                }
            });

        }
        return false;
    });
});

In above script, please note that the output “html” is none other than a same form with different set of ids.

above code is working fine for first form, but not for the second or so on. Please help for continues form submission.

Note: Upon submission the form to ‘insert_message.php’, it returns another form in a div tag with different set of ids but same inputs and classnames.

Answer 1

If the form is the same just with different ids, just change the ids. If you must change the form you’ll have to re-attach the event handler or you can use delegation

$(document).on("click", ".message-submit-button", function(){

http://api.jquery.com/on/

If your not on jquery 1.7+ you can use delegate instead

$(document).delegate(".message-submit-button", "click", function(){

http://api.jquery.com/delegate/