Question

我有一个带有一些js脚本的php联系表单。在单击提交按钮（输入）的情况下（如果所有输入都正确填充），表单下将显示“成功”消息，但由于页面重定向到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;
}

}）;

Answer 1

它解决了。对于谁对“其他”感兴趣，你必须用这个替换“return true”：

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

第一行只是清除输入，其余的是解决重定向问题:)。因此工作完美，没有重定向。

使提交表单无需重定向或刷新即可生效

1 个答案: