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

时间:2014-04-01 02:27:42

标签: javascript jquery ajax forms

我无法使用jquery正确提交表单。我尝试过使用此处的提示:https://api.jquery.com/jQuery.post/http://api.jquery.com/submit/但是无法弄清楚我缺少的是表单提交并将结果返回到div而不是重新加载页面。它应该调用外部php页面进行处理并返回结果。

<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>

2 个答案:

答案 0 :(得分:1)

尝试将您的代码包装在DOM ready handler $(function() {...});中,以确保您的DOM元素已正确加载。

此外,您可以在此处删除return false,也无需使用$(".contentarea" )转义\。所以试试这段代码:

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

答案 1 :(得分:1)

问题是你没有将数据传递给php文件。此外,您尚未指定处理的数据类型。如果你想使用POST,你应该使用$ .post();而不是$ .get();

尝试这样:我已将函数从.get更改为.post,将要发送的数据添加到php文件并指定数据类型。

<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>

最后一点:什么是PHP文件返回?它只是一个字符串或什么?根据这一点,您需要修改在'.contentarea'中编写返回内容的函数。

顺便说一下:当通过AJAX提交信息时,你不需要一个表单,因为它只是在提交表单时创建了逃避默认行为的需要。

如果它仍然无效,请告诉我,我会帮助你。