在这里使用ajax + jquery嵌套表单提交帮助

Question

Well im new to jquery and ajax and the code below doesnt work after 2nd attemp of submit form... heres the javascript code:

        $(document).ready(function() { 
        var options = { 
        target:        '#output2',   // target element(s) to be updated with server response 
        beforeSubmit:  showRequest,  // pre-submit callback 
        success:       showResponse  // post-submit callback 

        }; 

        $('#myForm2').submit(function() {



        $(this).ajaxSubmit(options); 
        return false; 
        });

 $('#me').submit(function() {
        $("#div2").load("main.php"); 
        return false; 
        }); 
    }); 
    function showRequest(formData, jqForm, options) { 
    return true; 
    } 
    function showResponse(responseText, statusText, xhr, $form)  {}

by the way im using jquery form plugin.....

and for the index.php

<form id="me" action="" method="post">
Message: <input type="text" name="mess">
<input type="submit" value="submit">

lastly for the main.php

<form id="myForm2" action="index.php" method="post"><div>

                    Name:</td><td><input name="Name" type="text" />

                    <input type="reset"   name="resetButton " value="Reset" />

                    <input type="submit"  name="submitButton" value="Submit1" />



            </div></form>

            <h1>Output Div (#output2):</h1>

            <div id="output2">AJAX response will replace this content.</div>

        </div>

Answer 1

You downloading your form after page load ( *$("#div2").load("main.php")) and your events are already binded. So when your second form loaded, it's Submit button click event doesn't triger nothing. You have to read about .live() in jQuery here

Here is my solution (that is just simpl example):

$('#myForm2').live("click",function() {
    $(this).ajaxSubmit(options); 
    return false; 
});

Maybe this will work for you.

UPD

Also you can try this:

1) replace

$('#myForm2').live("click",function() {
    $(this).ajaxSubmit(options); 
    return false; 
});

with

function MyFormSubmit(form) {
    $(form).ajaxSubmit(options); 
    return false; 
})

2) Add JS code to you myForm2 Submit button onClick event

    <form id="myForm2" action="index.php" method="post"><div>

                Name:</td><td><input name="Name" type="text" />

                <input type="reset"   name="resetButton " value="Reset" />

                <input type="submit"  name="submitButton" value="Submit1"
                 onClick="javascript:MyFormSubmit(this);return false;"/>



        </div></form>

        <h1>Output Div (#output2):</h1>

        <div id="output2">AJAX response will replace this content.</div>

    </div>

Answer 2

You have to remove action="index.php" method="post" from your form. Then should it work.

because now it is still making the php post to index.php