javascript - 如何从脚本提交表单

Question

我有一个简单的表格:

<form id="form" method="post" action="email.php">      
  <input id="name" name="name" type="text" placeholder="Name" />   
  <input name="email" id="email" type="text" placeholder="Email" />
  <textarea name="text" id="msg" placeholder="Comment"></textarea>
  <input type="button" value="SUBMIT" id="submit" onclick="empty()"/>
</form>

和一个 empty() 函数，用于检查是否所有输入都存在:

function empty(){
    var x; var y; var z;
    x = document.getElementById("name").value;
    y = document.getElementById("email").value;
    z = document.getElementById("msg").value;
    if (x == "" || y == "" || z == "") {
        document.getElementById("errors").innerHTML = "All inputs must be present before submitting.";
        return false;
    }else{
         document.form.submit(); /*this doesn't work*/
    }
}

但我似乎无法提交表单...

Answer 1

问题出在按钮类型上。试试这个:

<script>
  function empty() {
    var x;
    var y;
    var z;
    x = document.getElementById("name").value;
    y = document.getElementById("email").value;
    z = document.getElementById("msg").value;
    if (x == "" || y == "" || z == "") {
      document.getElementById("errors").innerHTML = "All inputs must be present before submitting.";
      return false;  // the only reason this worked previously is that the input type was wrong so the form didn't submit
    } else {
      return true; // return true instead of trying to submit the form with js
    }
  }
</script>
<form id="form" method="post" action="email.php">
  <input id="name" name="name" type="text" placeholder="Name" />
  <input name="email" id="email" type="text" placeholder="Email" />
  <textarea name="text" id="msg" placeholder="Comment"></textarea>
  <input type="submit" value="SUBMIT" id="submit" onclick="return empty();" />
  <!-- change the button type to submit and return the value from the empty function (false will prevent the default action of the button - stop the form submitting, true will allow the form to submit) -->
</form>
<div id="errors"></div>

Noticed this doesn't work as a snippet so this is it working in a fiddle