页面刷新提交按钮,需要它隐藏表单

时间:2016-04-30 19:54:30

标签: javascript jquery html forms

我认为这是提出这个问题的最佳地点。所以我目前正在开发一个网站。刚遇到几个问题。每当我在输入框上点击提交时,不是隐藏该表单并显示下一个表单,它会不断刷新页面。这很奇怪,因为如果我在本地浏览页面而不是在我的服务器上,一切都可以正常工作。我会继续发布我的代码,希望有人知道我的问题。提前谢谢!

这是按钮:

 <form id="firstForm">
            <div class="form-group form-group-lg">
              <label for="InputUsername">Username</label>
              <input type="text" class="form-control" name="InputUsername" id="InputUsername"
                       placeholder="Username">
      </div>
            <button type="submit" class="btn btn-default btn-lg btn-block">Connect</button>
    </form>

这是Jquery:

$("#firstForm").validate({ rules: { InputUsername: { required: true, minlength: 1 } }, messages: { InputUsername: "Enter a valid username/email" }, submitHandler: function (form) { $(\'#firstForm\').fadeOut(function () { $(\'#secondForm\').fadeIn().removeClass(\'hidden\');

3 个答案:

答案 0 :(得分:0)

这并不奇怪。 类型submit <button>会触发表单操作 - 除非您在代码中指定Event.preventDefault()

或者如果您严格指定它是类型按钮 <button type="button">Connect</button>,那么表单将不会提交,您可以继续使用.validate( JS脚本。

答案 1 :(得分:0)

您需要做的就是在您编写的按钮操作功能中使用Data Access Interfacesevent.preventDefault(),否则提交按钮将触发表单操作。

return false

答案 2 :(得分:0)

使用preventDefault不触发重新加载操作:

$("#firstForm").submit(function(e) {
    e.preventDefault();
}).validate({...});