联系表单提交按钮按下时不刷新

时间:2016-10-09 21:33:00

标签: javascript php jquery html forms

我在网站上有一些联系表格,其中包含一些必填字段。

如果你错过一个字段并被提示填写所有字段,当你返回并填写所有内容并点击发送时,没有任何反应。

您必须刷新整个页面然后重新开始。

除非您刷新页面,否则按下SEND按钮基本上不会再次起作用。我该如何解决这个问题?

HTML和脚本代码下方。任何帮助都非常感谢。



$('#form-send').click(function() {
$('#form-send').attr('disabled', 'disabled');

var name = $('#form-name').val();
var email = $('#form-email').val();
var telephone = $('#form-telephone').val();
var message = $('#form-msg').val();
var option = $('#form-select').val();
var error = 0;

if (name === '' || email === '' || message === '' || telephone === '') {
  error = 1;
  $('#details-error').fadeIn(200);
} else {
  $('#details-error').fadeOut(200);
}

if (!(/(.+)@(.+){2,}\.(.+){2,}/.test(email))) {
  $('#details-error').fadeIn(200);
  error = 1;
}

var dataString = '&option=' + option + '&name=' + name + '&email=' + email + '&telephone=' + telephone + '&text=' + message;

if (error === 0) {
  $.ajax({
    type: "POST",
    url: "mail.php",
    data: dataString,
    success: function() {
      $('#details-error').fadeOut(1000);
      $('#form-sent').fadeIn(1000);
    }
  });
  return false;
}

});

});

<div class="form-input">
  <div class="form-title">NAME</div>
  <input id="form-name" required type="text"></input>
</div>

<div class="form-input">
  <div class="form-title">EMAIL</div>
  <input id="form-email" required type="text"></input>
</div>

<div class="form-input">
  <div class="form-title">TELEPHONE</div>
  <input id="form-telephone" required type="text"></input>
</div>

<div class="form-input">
  <div class="form-title">MESSAGE</div>
  <textarea id="form-msg" type="text"></textarea>
</div>

<div class="form-input">
  <div class="form-title">&nbsp;</div>
  <button id="form-send">SEND</button>
</div>

</div>
<!--end of form holder-->



<div id="details-error">Please complete all fields and include a valid email</div>
<div id="form-sent">Thank you for your enquiry - We will be in touch shortly!</div>
</div>
</div>
</div>

</div>
&#13;
&#13;
&#13;

1 个答案:

答案 0 :(得分:2)

使用此:

$("#form-send").prop('disabled', false);
每次

error = 1;