表单提交，只是不能停止刷新

Question

所以我对这些东西很新，我有一个特定的问题我无法解决。我已经搜遍了所有，我尝试了大量的解决方案无济于事。我确定我错过了某些东西，或者说错误的顺序，但我只是需要一些指导。

我的网站上有一个简单的表单，我无法在提交时刷新页面。还有一些PHP验证正在发生。

这是指向该网站的链接：www.nathanchapmanphotography.co.uk

任何帮助都会受到大力赞赏。

＆＃13;

＆＃13;

$("form").submit(function() {

  var error = "";
  var success = "";
  var fail = "";

  if ($("#name").val() == "") {
    error += "name required<br>";
  }

  if ($("#email").val() == "") {
    error += "email required<br>";
  }

  if ($("#message").val() == "") {
    error += "message required<br>";
  }
  
  if (error != "") {
    $("#error").html(error);
    $("#success").html(success);
    $("#fail").html(fail);
    return false;
  } 
  else {
    sendContactForm();
    return false;
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
  <p class="form-p">name:
    <input class="input" type="text" id="name" name="name">
  </p>
  <p class="form-p">email:
    <input class="input" type="email" id="email" name="email">
  </p>
  <p class="form-p">message:
    <br/>
    <textarea id="message" cols="40" rows="7" name="message"></textarea>
  </p>
  <button type="submit" id="submit">submit</button>
  <div id="error">
    <? echo $error; ?>
  </div>
  <div id="success">
    <? echo $success; ?>
  </div>
  <div id="fail">
    <? echo $fail; ?>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 1

您需要阻止提交事件的默认操作：

$("form").submit(function(event) { // capture the function's event here
    event.preventDefault(); // use the captured event here
    // rest of your code...

编辑：改变后来自OP的网站 -

Answer 2

我并不是100％确定你在寻找什么，但是，

如果sendContactForm发布了表单数据并且您不想让提交自动发生，您可以创建button类型的按钮并将其绑定以进行验证。

＆＃13;

＆＃13;

$(document).ready(function() {
  function sendContactForm(){
    console.log('sendContactForm');
  };
  
  $('#submit').on('click', function() {
    var error = "";
    var success = "";
    var fail = "";

    if ($("#name").val() === "") {

      error += "name required<br>";
    }

    if ($("#email").val() === "") {

      error += "email required<br>";
    }

    if ($("#message").val() === "") {

      error += "message required<br>";
    }

    if (error !== "") {

      $("#error").html(error);
      $("#success").html(success);
      $("#fail").html(fail);

    } else {
      sendContactForm();
    }
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
  <p class="form-p">name:
    <input class="input" type="text" id="name" name="name">
  </p>
  <p class="form-p">email:
    <input class="input" type="email" id="email" name="email">
  </p>
  <p class="form-p">message:
    <br/>
    <textarea id="message" cols="40" rows="7" name="message"></textarea>
  </p>
  <button type="button" id="submit">submit</button>
  <div id="error">
    <? echo $error; ?>
  </div>
  <div id="success">
    <? echo $success; ?>
  </div>
  <div id="fail">
    <? echo $fail; ?>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

或者，如果你想在没有页面刷新的情况下只对提交本身有更多控制权，你可以使用ajax。与此类似：

var $form = $("form");

$.ajax({
    data: $form.serialize(),
    url: $form[0].action,
    type: 'post',
    dataType: 'json',
    success: function(data) {
        sendContactForm();
    }
});

＆＃13;

＆＃13;

$(document).ready(function() {
  function postData() {
    var $form = $("form");

    $.ajax({
      data: $form.serialize(),
      url: $form[0].action,
      type: 'post',
      dataType: 'json',
      success: function(data) {
        sendContactForm();
      }
    });
  }

  function sendContactForm() {
    console.log('sendContactForm');
  }

  $('#submit').on('click', function() {
    var error = "";
    var success = "";
    var fail = "";

    if ($("#name").val() === "") {

      error += "name required<br>";
    }

    if ($("#email").val() === "") {

      error += "email required<br>";
    }

    if ($("#message").val() === "") {

      error += "message required<br>";
    }

    if (error !== "") {

      $("#error").html(error);
      $("#success").html(success);
      $("#fail").html(fail);

    } else {
      postData();
    }
  })
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post" action="http://yourtageturl">
  <p class="form-p">name:
    <input class="input" type="text" id="name" name="name">
  </p>
  <p class="form-p">email:
    <input class="input" type="email" id="email" name="email">
  </p>
  <p class="form-p">message:
    <br/>
    <textarea id="message" cols="40" rows="7" name="message"></textarea>
  </p>
  <button type="button" id="submit">submit</button>
  <div id="error">
    <? echo $error; ?>
  </div>
  <div id="success">
    <? echo $success; ?>
  </div>
  <div id="fail">
    <? echo $fail; ?>
  </div>
</form>

＆＃13;

＆＃13;

＆＃13;

Answer 3

因此，我设法使用您的建议对其进行排序，非常感谢。问题是我在网上找到的发送数据的功能实际上没有做任何事情。我现在运行得很好，没有服务器端验证，但那是另一天。如果您有兴趣，这里是修改后的代码。

$("form").submit(function(e) {

e.preventDefault();

var error = "";
var success = "Thank you for your message!<br/>I'll get back to you shortly."
var url = "index.php"; // the script where you handle the form input.

    if ($("#name").val() == "") {
    
    error += "name required<br>";
}

if ($("#email").val() == "") {
    
    error += "email required<br>";
}

if ($("#message").val() == "") {
    
    error += "message required<br>";
}

if (error != "") {
    
    $("#error").html(error);
    //alert("We need your" + error + "please!" );
    
} 
else {
    
$.ajax({
       type: "POST",
       url: url,
       data: $("form").serialize(), // serializes the form's elements.
       success: function(data)
       {
           $("#success").html(success);
           $("#error").html(error);
       }
     });
}

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form method="post">
  <p class="form-p">name:
    <input class="input" type="text" id="name" name="name">
  </p>
  <p class="form-p">email:
    <input class="input" type="email" id="email" name="email">
  </p>
  <p class="form-p">message:
    <br/>
    <textarea id="message" cols="40" rows="7" name="message"></textarea>
  </p>
  <button type="submit" id="submit">submit</button>
  <div id="error">
    <? echo $error; ?>
  </div>
  <div id="success">
    <? echo $success; ?>
  </div>
  <div id="fail">
    <? echo $fail; ?>
  </div>
</form>