发布表单并将结果放入div中

Question

I can't get my form to submit correctly using jquery. I have tried using the tips here: https://api.jquery.com/jQuery.post/ and http://api.jquery.com/submit/ but can't figure out what I am missing to have the form submit and return the results to the div instead of reloading the page. It is supposed to call an external php page to get processed and return the results.

<script>
    // On click "button.submit"
$("input[id^=formsubmit]").submit(function( event ) {
     // Stop form from submitting normally
    event.preventDefault();
   $.get( "functions.php?do=adminmenu", function( data ) {
    $( \".contentarea\" ).html( data );
    });
    return false;
});
</script>

<form action="#" name="submitForm">
<input type="textbox" name="test">
<input type="submit" value="Save Settings" id="formsubmit">
</form>
<div class="contentarea"></div>

Answer 1

Try to wrap your code inside DOM ready handler $(function() {...}); to make sure your DOM elements have been properly loaded.

Also, you can remove return false here as well as there's no need to escape the $(".contentarea" ) using \\ . So try this code:

$(function () {
    $("input[id^=formsubmit]").submit(function (event) {
        // Stop form from submitting normally
        event.preventDefault();
        $.get("functions.php?do=adminmenu", function (data) {
            $(".contentarea").html(data);
        });
    });
});

Answer 2

The problem is that you're not passing the data to the php file. Furthermore you have not specified the type of data handled. And if you want to use POST you should use $.post(); and not $.get();

Try it like this: I've changed the function from .get to .post, added the data you want to send to the php file and specified a data type.

<script>
    $(document).ready(function () {
        $('#formsubmit').click(function () {
            $.post("functions.php?do=adminmenu",{test_val:$('#test_input').value},function (data) {
                $('.contentarea').html(data);
            },"json");
        });
    });
</script>

<input id="test_input" type="text" value="">
<input id="formsubmit" type="submit" value="Save Settings">
<div class="contentarea"></div>

Last point: What is the php file returning? Is it only a string or what? Depending on this you need to modify the function writing the returned content in the '.contentarea'.

And by the way: When submitting the information via AJAX you don't need a form around it, as it just creates the need to escape the default behaviour when submitting a form.

If it still doesn't work let me know, I'll help you.