HTML按钮onClick侦听器，调用HTML表单onSubmit javascript函数
[英]HTML button onClick listener calling HTML form onSubmit javascript function
问题描述
I am a novice in web development, I have created a simple html page. 
我是Web开发的新手，我创建了一个简单的html页面。 The page has two buttons, Submit and Display Data . 该页面有两个按钮， Submit和Display Data 。 The Submit button is supposed to post form data to a particular page after validating the form. 验证表单后，应该使用“ 提交”按钮将表单数据发布到特定页面。 This button is working fine. 此按钮工作正常。 I am facing a problem with the Display Data button. 我遇到了“ 显示数据”按钮的问题。 The button is supposed to open a separate page and there should not be any kind of form validation. 该按钮应该打开一个单独的页面，并且不应进行任何形式的表单验证。 The page is getting open but the form is also getting validated. 该页面已打开，但表单也得到了验证。
The html page : html页面 ：
<html>
<head>
<script>
function validateForm()
{
var name=document.forms["myForm"]["name"].value;
var email=document.forms["myForm"]["email"].value;
var mobile=document.forms["myForm"]["mobile"].value;
var address=document.forms["myForm"]["address"].value;
var atpos=email.indexOf("@");
var dotpos=email.lastIndexOf(".");
if (name==null || name=="")
{
alert("Name must be filled out");
return false;
}
else if (atpos<1 || dotpos<atpos+2 || dotpos+2>=email.length)
{
alert("Not a valid e-mail address");
return false;
}
else if(isNaN(mobile)||mobile.indexOf(" ")!=-1)
{
alert("Enter numeric value")
return false;
}
else if (mobile.length != 10)
{
alert("Enter 10 digit mobile");
return false;
}
else if (mobile.charAt(0)=="0")
{
alert("Mobile no should not start with 0");
return false;
}
else if (address==null || address=="")
{
alert("Address must be filled out");
return false;
}
}
</script>
</head>
<body>
<h2>Employee Details Entry</h2>
<form name="myForm" action="insertDisplay.php" onSubmit="return validateForm()" method="post">
Name: <input type="text" name="name"><br/>
Email: <input type="text" name="email"><br/>
Mobile: <input type="text" name="mobile"><br/>
Address: <input type="text" name="address"><br/>
<input type="submit" value="Submit"> <button onClick="location.href = 'insertDisplay.php'">Display Data</button>
</form>
</body>
</html>
Where am I going wrong? 我要去哪里错了？ Why is the form validation function getting called? 为什么调用表单验证功能？
4 个解决方案
解决方案1
0 已采纳 2014-02-07 11:07:30
将<button onClick="location.href = 'insertDisplay.php'">Display Data</button>置于表格之外的这一行...
解决方案2
0 2014-02-07 11:09:38
给此按钮指定您要执行的操作的类型。
<button type="button" onClick="location.href = 'insertDisplay.php'">Display Data</button>
解决方案3
0 2014-02-07 11:10:26
You can take the values out of the form, or you can use, <input type="button"/> tag. 您可以从表单中取出值，也可以使用<input type="button"/>标记。 It will not submit your form and will work as you intended. 它不会提交您的表格，并且会按预期工作。
<input type="button" value="display data" onClick="location.href = 'a.php'">
解决方案4
0 2014-02-07 11:21:37
I suppose you also want your datas to be passed to your PHP file after clicking your button ? 我想您还希望在单击按钮后将数据传递到PHP文件吗？ If you push the out of the form will not be sended and you'll have no datas. 如果您退出表格，则不会发送该表格，也不会有任何数据。 In fact, you want both buttons to submit your form, but only the first one should validate it ? 实际上，您希望两个按钮都提交您的表单，但是只有第一个按钮可以验证它吗？
If this is it you can do this : 如果是这样，您可以执行以下操作：
<form name="myForm" action="insert.php" method="post">
Name: <input type="text" name="name"><br/>
Email: <input type="text" name="email"><br/>
Mobile: <input type="text" name="mobile"><br/>
Address: <input type="text" name="address"><br/>
<input type="submit" name="typesubmit" value="Submit" onclick="return validateForm();" />
<input type="submit" name="typesubmit" value="Display Data" />
</form>
You'll be abled on your insert.php file to make difference between display and submit by checking $_POST['typesubmit'] value. 您可以通过检查$ _POST ['typesubmit']值来在insert.php文件上进行显示和提交之间的区别。
And if you want your "display" button to post your form on another php file, you can do this : 并且，如果您希望您的“显示”按钮将表单发布到另一个php文件中，则可以执行以下操作：
<form name="myForm" action="insert.php" method="post">
Name: <input type="text" name="name"><br/>
Email: <input type="text" name="email"><br/>
Mobile: <input type="text" name="mobile"><br/>
Address: <input type="text" name="address"><br/>
<input type="submit" value="Submit" onclick="return validateForm();" />
<input type="submit" value="Display Data" onclick="document.myForm.action='display.php';" />
</form>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.