Ajax發布后提交表單按鈕卡住

Question

嗨，我有一個使用Ajax在Rails 4中發布帖子的表單。javascript運行一些驗證，發布成功后應返回警告消息。 當前，“提交”按鈕保持按下狀態，盡管該表單發布了任何消息，但都沒有收到警報。 我不知道我在做什么錯，只希望表單警告消息，然后重設自身。

$('#submit1').click(function(e){
  e.preventDefault();
  var name = $('input#name').val();

  if (name == "") {
    alert("please enter a name!");
    $('input#name').focus();
    return false;
  }
  var email = $('input#email').val();

  if (email == ""){
    alert("please enter your email");
    $('input#email').focus();
    return false;
  }
  var content = $('textarea#text').val();

  if (content == ""){
    alert("please enter a comment");
    $('textarea#text').focus();
    return false;

  }

  var dataString = 'name=' + name + '&email=' + email + '&content=' + content;


  $.ajax({
    type: "POST",
    url: "emailer",
    data: dataString,
    dataType: 'json',
    beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
    success: function(){
      alert("mappy jappy");
      $('input#name').reset();
      $('input#email').reset();
      $('textarea#text').reset();
    }
  });
  return false;
});

Answer 1

您正在防止發生錯誤的事件。 您需要表單的“ onsubmit”事件，而不是提交按鈕的“ onclick”事件。

$('#myform').on('submit', function(event){
  event.preventDefault();
  /* your code here */
});

有關更多信息，請閱讀： 如何防止提交表單？

Answer 2

首先，重置功能不適用於文本框。它將針對表單運行。 因此，正確的代碼將是...

<script>
$(function(){
$('#submit1').click(function(e){
  e.preventDefault();
  var name = $('input#name').val();

  if (name == "") {
    alert("please enter a name!");
    $('input#name').focus();
    return false;
  }
  var email = $('input#email').val();

  if (email == ""){
    alert("please enter your email");
    $('input#email').focus();
    return false;
  }
  var content = $('textarea#text').val();

  if (content == ""){
    alert("please enter a comment");
    $('textarea#text').focus();
    return false;

  }

  var dataString = 'name=' + name + '&email=' + email + '&content=' + content;


  $.ajax({
    type: "POST",
    url: "user_availability.php",
    data: dataString,
    dataType: 'json',
    beforeSend: function(xhr) {xhr.setRequestHeader('X-CSRF-Token', $('meta[name="csrf-token"]').attr('content'))},
    success: function(){
      alert("mappy jappy");
      $('#contact-form')[0].reset();
    }
  });
  return false;
});
});
</script>

並且html部分將如下所示-

<form id="contact-form" method="post" enctype="multipart/form-data">
<input type="text" id="email" name="email" />
<input type="text" id="name" name="name" />
<textarea name="text" id="text"></textarea>
<input type="submit" value="submit" id="submit1" />
</form>

請檢查並讓我知道...