提交表单按钮在ajax发布后卡住

Submit form button stuck after ajax post

本文关键字：ajax 表单 按钮 提交      更新时间：2023-09-26

Hi我有一个表单，它使用Ajax在Rails4中发帖。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;
});

您正在阻止错误的事件。您需要表单的"onsubmit"事件，而不是提交按钮的"onclick"事件。

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

欲了解更多信息，请阅读：如何防止表单被提交？

首先，重置功能不适用于文本框。。它将为表单运行。因此更正后的代码将是…

<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>

请检查并告诉我。。。

相关文章：