我有一个返回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>
答案 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>