HTML button onClick监听器调用HTML表单onSubmit javascript函数

我是web开发的新手，我创建了一个简单的html页面。该页面有两个按钮，提交和显示数据。提交按钮应该在验证表单后将表单数据发布到特定页面。这个按钮工作正常。我正面临Display Data按钮的问题。该按钮应该打开一个单独的页面，不应该有任何形式的验证。该页面正在打开，但表单也得到验证。HTML button onClick监听器调用HTML表单onSubmit javascript函数

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>

我要去哪里错了？为什么表单验证函数被调用？

来源

2014-02-07 kittu88

那是因为你没有关闭输入标签的提交按钮 –

地方 <button onClick="location.href = 'insertDisplay.php'">Display Data</button>此行的表格中...

来源

2014-02-07 11:07:30 user1844933

它的工作，但该按钮位于提交按钮下方。我希望按钮并排放置.......... – kittu88

而不是表单按钮，您可以使用css按钮... – user1844933

示例请 – kittu88

给这个按钮，你要表现它的类型。

<button type="button" onClick="location.href = 'insertDisplay.php'">Display Data</button>

来源

2014-02-07 11:09:38

您可以将值从表格中取出，也可以使用<input type="button"/>标记。它不会提交您的表格，并会按照您的预期工作。

<input type="button" value="display data" onClick="location.href = 'a.php'">

来源

2014-02-07 11:10:26 Kamehameha

不是按预期工作 – kittu88

我想你还希望你的数据在点击你的按钮后传递到你的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" name="typesubmit" value="Submit" onclick="return validateForm();" /> 
<input type="submit" name="typesubmit" value="Display Data" /> 
</form>

你会在你的insert.php文件中体健，使显示器之间的差异，并通过检查$ _ POST [“typesubmit”]值提交。

如果你想你的“显示”按钮，张贴在另一个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>

来源

2014-02-07 11:21:37

HTML button onClick监听器调用HTML表单onSubmit javascript函数

回答

相关问题