Question

我正在尝试做一些有点棘手的事情。

我正在尝试清除表单，特别是在我提交表单后输入。无论如何，当我想要这样做的时候。表单清除但帖子永远不会执行。我希望它能做到这两点，为什么它有点棘手，因为我正在使用所以我不必在表单发布后重新加载页面。

<script>
function submitForm() {
  $('form[name="cform"]').submit();
  $('input[type="text"], textarea').val('');
  return;
}
</script>

            <iframe name="target" style="display:none;"></iframe>
            <form name="cform" target="target" action="steamauth/chat.php" method="post">
            <input type="text" maxlength="120" name="message" style="margin-top: 1vh; margin-left: 2vh; width: 64%">
            <button type="submit" name="chat" onclick="submitForm()" style="background-color: #212223; border-radius: 4px; color: black;  border: 0px solid #4CAF50; width: 20%; height: 28px;"><font color="white">Send</font></button>
            </form>

是否有解决方案？

Answer 1

单独使用submit()只需提交表单，就像按下提交按钮时没有JS一样。此外，您需要使用AJAX来完成您的工作。尝试这样的事情（改编自https://api.jquery.com/jquery.post/上的例子）：

<script>
    $('form[name="cform"]').submit(function(e) {
        e.preventDefault();

        var $form = $( this ),
            data = $form.serialize(),
            url = $form.attr( "action" );

        var posting = $.post( url, data );

        posting.done(function( data ) {
            $('input[type="text"], textarea').val('');
        });
    });
</script>

<iframe name="target" style="display:none;"></iframe>
<form name="cform" target="target" action="steamauth/chat.php" method="post">
    <input type="text" maxlength="120" name="message" style="margin-top: 1vh; margin-left: 2vh; width: 64%">
    <button type="submit" name="chat" style="background-color: #212223; border-radius: 4px; color: black;  border: 0px solid #4CAF50; width: 20%; height: 28px;"><font color="white">Send</font></button>
</form>

您需要进一步修改以考虑提交失败等问题，但这应该会让您朝着正确的方向前进。我建议您阅读上面链接中的文档，了解有关回调的更多信息（例如上面代码中的.done()）。

Answer 2

submitForm()必须返回true才能让表单实际提交。

Answer 3

MKM的答案是正确的。要清除页面上的所有输入类型，请使用它代替$（'input [type =“ text”]，textarea'）。val（）;。本示例以三种形式清除所有输入。经过测试，但选择倍数除外。

$(':input','#Form1','#Form2','#Form3').each(function()
{
    switch(this.type)
    {
        case "text":
        case "textarea":
        case "hidden":
        {
           this.value = ''; break;
        }
        case "radio":
        case "checkbox":
        {
            this.checked=false; break;
        }
        case "select-one":
        {
            // Set dropdowns to default value
            $(this).prop("selectedIndex", 0); break;
        }
        case "select-multiple":
        {
            $(this).prop("selectedIndex", 0); break;
        } 
        case "file":
        {
            $(this).value = ""; break;
        }
    }
});

表格后的清晰表格

3 个答案: