HTML按鈕onClick偵聽器，調用HTML表單onSubmit javascript函數

Question

我是Web開發的新手，我創建了一個簡單的html頁面。 該頁面有兩個按鈕， Submit和Display Data 。 驗證表單后，應該使用“ 提交”按鈕將表單數據發布到特定頁面。 此按鈕工作正常。 我遇到了“ 顯示數據”按鈕的問題。 該按鈕應該打開一個單獨的頁面，並且不應進行任何形式的表單驗證。 該頁面已打開，但表單也得到了驗證。

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>

我要去哪里錯了？ 為什么調用表單驗證功能？

Answer 1

將<button onClick="location.href = 'insertDisplay.php'">Display Data</button>置於表格之外的這一行...

Answer 2

給此按鈕指定您要執行的操作的類型。

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

Answer 3

您可以從表單中取出值，也可以使用<input type="button"/>標記。 它不會提交您的表格，並且會按預期工作。

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

Answer 4

我想您還希望在單擊按鈕后將數據傳遞到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>

您可以通過檢查$ _POST ['typesubmit']值來在insert.php文件上進行顯示和提交之間的區別。

並且，如果您希望您的“顯示”按鈕將表單發布到另一個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>

HTML按鈕onClick偵聽器，調用HTML表單onSubmit javascript函數

問題描述

4 個解決方案

解決方案1
0 已采納 2014-02-07 11:07:30

解決方案2
0 2014-02-07 11:09:38

解決方案3
0 2014-02-07 11:10:26

解決方案4
0 2014-02-07 11:21:37

HTML按鈕onClick偵聽器，調用HTML表單onSubmit javascript函數

問題描述

4 個解決方案

解決方案1 0 已采納 2014-02-07 11:07:30

解決方案2 0 2014-02-07 11:09:38

解決方案3 0 2014-02-07 11:10:26

解決方案4 0 2014-02-07 11:21:37

解決方案1
0 已采納 2014-02-07 11:07:30

解決方案2
0 2014-02-07 11:09:38

解決方案3
0 2014-02-07 11:10:26

解決方案4
0 2014-02-07 11:21:37