返回true不能在Javascript中工作

时间:2014-06-06 19:04:08

标签: javascript

我有一个返回true语句来验证表单的字段并从验证中退出,但它也执行函数myFunction()(因为我已经将它点击了onclick)。只有在字段中给出某些输入时才会触发函数myFunction(),否则不会。

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">


<style>
p.serif {
font-family: "Georgia", Georgia, serif;

}
</style>

<title>The Gravity Numerical</title>
<script>
function validateForm() {
    var val = document.forms["myForm"]["text1"].value;
    if (val==null || val=="") {
        alert("The field must be filled out");
        return false;
    }
return true;
}
</script>
</head>
<body>

<p class="serif"><b><p style="color:#5582ed">The Gravity Numerical</p></b><br>
<form name="myForm" onsubmit="return validateForm()" method="post">
<img src = "http://braineri.com/wp-content/uploads/2014/06/Gravity.jpg" height = "350" width = "250" style="float:right"> 
  <p class="serif">Distance from Earth (m)</p>
  <input type="number" id="txt1" name="text1" />
    <br/><br/><br/>
  <button onclick="myFunction()">Calculate</button>
  <p id="demo"></p>
  <script>
    function myFunction() {
      var a = document.getElementById("txt1").value;

      var x = +a / 6378100;
      var y =  2 * +x;
      var z = 1 - +y;
      var z1 = +z * 9.81;

        document.getElementById("demo").innerHTML = '<br/><b><p style="color:green">Gravitational acceleration : </b>' + z1 + ' m/sec<sup>2</sup>'+'<br/><br/><b><i><p style="color:black"> This is how we solved!<br/></i></b>' + '<br>g = g<sub>0</sub> ( 1 - 2h/R<sub>e</sub> )<br>g = 9.81 m/sec<sup>2</sup> x ( 1 - 2 x ' + a + ' m/6378.1 x 10<sup>3</sup> m )<br>g = ' + z1 + ' m/sec<sup>2</sup><br><br><p style="color:grey">Ciphers<br><br><i>R<sub>e</sub> = Radius of the earth = 6378.1 km<br>g<sub>0</sub> = gravitational acceleration at surface = 9.81 m/sec<sup>2</sup></i>'
    }

  </script>

</body>
</html>

1 个答案:

答案 0 :(得分:0)

这应该可以工作..你也可以点击按钮点击功能,最好从表格验证功能中调用它

 <!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">


<style>
p.serif {
font-family: "Georgia", Georgia, serif;

}
</style>

<title>The Gravity Numerical</title>
<script>
function validateForm() {
    var val = document.forms["myForm"]["text1"].value;
    if (val==null || val=="") {
        alert("The field must be filled out");
        return false;
    }
myFunction();   // calling my function only if the input field is not empty
return true;
}
</script>
</head>
<body>

<p class="serif"><b><p style="color:#5582ed">The Gravity Numerical</p></b><br>
<form name="myForm" onsubmit="return validateForm()" method="post">
<img src = "http://braineri.com/wp-content/uploads/2014/06/Gravity.jpg" height = "350" width = "250" style="float:right"> 
  <p class="serif">Distance from Earth (m)</p>
  <input type="number" id="txt1" name="text1" />
    <br/><br/><br/>
  <button >Calculate</button>
  <p id="demo"></p>
  <script>
    function myFunction() {
      var a = document.getElementById("txt1").value;

      var x = +a / 6378100;
      var y =  2 * +x;
      var z = 1 - +y;
      var z1 = +z * 9.81;

        document.getElementById("demo").innerHTML = '<br/><b><p style="color:green">Gravitational acceleration : </b>' + z1 + ' m/sec<sup>2</sup>'+'<br/><br/><b><i><p style="color:black"> This is how we solved!<br/></i></b>' + '<br>g = g<sub>0</sub> ( 1 - 2h/R<sub>e</sub> )<br>g = 9.81 m/sec<sup>2</sup> x ( 1 - 2 x ' + a + ' m/6378.1 x 10<sup>3</sup> m )<br>g = ' + z1 + ' m/sec<sup>2</sup><br><br><p style="color:grey">Ciphers<br><br><i>R<sub>e</sub> = Radius of the earth = 6378.1 km<br>g<sub>0</sub> = gravitational acceleration at surface = 9.81 m/sec<sup>2</sup></i>'
    }

  </script>

</body>
</html>