使提交表单在不重定向或刷新的情况下工作

Make a submit form work without redirecting or refreshing

本文关键字：刷新 情况下 工作 重定向 提交 表单      更新时间：2023-09-26

我有一个php联系人表单，其中包含一些js脚本。在该表单中，当点击提交按钮（输入）时（如果所有输入都填写正确），表单下会出现一条"成功"消息，但由于页面正在重定向到contact.php文件，因此无法看到该消息。我希望表单在不重定向的情况下工作，所以只需在表单下显示成功消息，并在提交后清除所有输入（如果所有输入都填写正确）。我真的很感激任何帮助！提前谢谢。我不能把php放在jsfiddle中，但我认为它不是我想要的。这是代码的其余部分。

http://jsfiddle.net/5nLab5kh/

HTML:

 <form role="form" id="form-contact" method="post" action="php/contact.php">
    <div class="form-group">
      <label for="ContactName">Your Name (required)</label>
      <input type="text" class="form-control required" name="ContactName" id="ContactName" value=""/>
    </div>
    <div class="form-group">
      <label for="ContactEmail">Email Address (required)</label>
      <input type="email" class="form-control required" name="ContactEmail" id="ContactEmail" value="" />
    </div>
    <div class="form-group">
      <label class="ContactMsg">Your Message</label>
      <textarea class="form-control" rows="3"  name="ContactMsg" title=""></textarea>
    </div>
    <input type="submit" class="btn btn-primary" value="Submit" name="submit" id="ContactMessage"/>
  </form>
  <p id="cf-notification"></p>

JS:

$('#form-contact').submit(function(){
/* Get Values */
contact_name    = $('#ContactName').val();
contact_email   = $('#ContactEmail').val();
contact_message = $('#ContactMsg').val();
/* Validate Fields */
if( contact_name == '' ){
    $('#cf-notification').hide().html('<span class="alert"><i class="fa fa-exclamation-triangle"></i>Please fill your contact name!</span>').fadeIn("slow");
    return false;
}else if( contact_email == '' ){
    $('#cf-notification').hide().html('<span class="alert"><i class="fa fa-exclamation-triangle"></i>Please fill your email address!</span>').fadeIn("slow");
    return false;
}else if( contact_message == '' ){
    $('#cf-notification').hide().html('<span class="alert"><i class="fa fa-exclamation-triangle"></i>Please fill your message!</span>').fadeIn("slow");
    return false;
}else{$('#cf-notification').hide().html('<span class="success"><i class="fa fa-envelope"></i>' + 'Thank you for contacting us! We will answer as soon as we can.' + '</span>').fadeIn("slow");
    return true;
}

})；

问题已解决。对于那些对"其他"感兴趣的人，你必须用以下内容替换"return true"：

$("#form-contact")[0].reset();
    $.post($(this).attr('action'), $(this).serialize(), function(response){
  },'json');
  return false;

第一行只是清除输入，其余的是解决重定向问题：）。所以工作非常完美，没有重定向。

相关文章：