Question

以下是我正在尝试完成的代码，当用户点击提交按钮时，我的javascript函数会在id ='contact_form'的表单的文本字段中将所有值设置为null，而不加载页面。请告诉我如何修改以下代码以完成我一直尝试的功能。谢谢！

<script type='text/javascript'>
    $(document).ready(function(){
        $('#love').click(function(e) {
            document.contact_form.name.value = '';
            alert('aloha!!');
            //stop the form from being submitted (not working fine)
            e.preventDefault();
        }
    }
</script>
<form name='abc' action='' id='abc' >
    <input type="submit" id='love' />
</form>

我也尝试了以下功能，但它没有阻止页面加载

<script type='text/javascript'>
    function js(){
        document.contact_form.name.value = '';
        //stop the form from being submitted (NOT WORKING!!)
        preventDefault();
    }
    }
</script>

Answer 1

如果您在onsubmit="return false;"标记中尝试form，则不会提交您的表单。不幸的是，它永远不会被提交。除非您不打算通过AJAX提交，否则您必须修改onsubmit事件，如下所示：

<form onsubmit="return callFunction()">

function callFunction() {
    if(condition)
        return true;
    else
        return false;
}

Answer 2

$("#abc").submit( function() {
  // do everything you want.
   return false; //will prevent the reload.
});

Answer 3

要在表单提交时执行函数，您必须执行以下操作;

<form onsubmit="return validate();">
your form here
</form>

然后你可以检查一个名为'validate（）'的函数（或任何你想称之为的函数）

确保validate（）函数返回true表示允许提交表单，如果不允许提交页面，则返回false。

还在您的输入元素上添加id和名称，这样您就可以更轻松地访问它们。

Answer 4

假设你有这样的HTML：

<form>
<input type="text" id="text" />
<input type="submit" id='submit' value="clear above field without reloading" />
</form>

并且您希望在用户提交而不使用jQuery重新加载时清除文本字段值，然后遵循脚本将是您的补救措施：

$(function(){
$('#submit').click(function(){
    $('#text').value('');
})
});

Answer 5

表单可以通过多种方式提交，不仅可以通过单击提交按钮来提交。您应该真正关注submit个事件，并使用preventDefault取消它们（而不是点击可能触发提交的事件）。请参阅@ user1359163的回答。

但你的问题似乎是document.contact_form.name.value。文档对象上没有属性contact_form，因此会引发错误。 preventDefault未执行，您的表单已提交，您永远不会看到错误。将调试器设置为“Stop on errors”！

您可能需要document.forms["contact"]之类的内容，但我不知道您的HTML。输入元素的id选择器将是更好的选择。

表单字段值在没有页面加载的情况下重置

5 个答案: