Question

我无法使用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>

Answer 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);
        });
    });
});

Answer 2

问题是你没有将数据传递给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提交信息时，你不需要一个表单，因为它只是在提交表单时创建了逃避默认行为的需要。

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

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

2 个答案: