當使用“javascript：document.forms [0] .submit（）”時如何調用“onsubmit”？

Question

我是javascript的新手，我面臨以下問題：我做了一個簡單的日期接受表單，在提交之前檢查格式。 如果輸入的日期不是所需的格式，則顯示錯誤。 現在，我使用另一個javascript函數替換表單上的提交按鈕。 我將它鏈接到javascript:document.forms[0].submit() 。 這次，在表單提交期間不調用格式檢查功能。 它在沒有支票的情況下提交。 如果有人能告訴我如何克服這個問題，那就太好了。

 function checkDate() { var date = document.getElementById("date"); var dt = date.value; var flag = 1; var msg = ""; var errorHere = document.getElementById("spam"); for (var i = 0; i < dt.length; i++) { if (i == 2 || i == 5) { if (dt[i] != '-') { flag = 0; break; } continue; } if (dt[i] < '0' || dt[i] > '9') { flag = 0; break; } } if (dt.length != 10) flag = 0; if (dt.length == 0) flag = -1; if (flag == 0) msg += "Invalid format."; else if (flag == -1) msg += "Empty field." else msg += "OK."; errorHere.firstChild.nodeValue = msg; if (flag == 1) return true; else return false; } function submitter() { var abc = confirm("Would you like to switch to link?"); if (abc == true) { var i = 0, now; while (++i) { now = document.getElementsByTagName("input")[i]; if (!now) return; if (now.type == "submit") break; } var latest = document.createElement("a"); latest.href = "javascript:document.forms[0].submit()"; var text = document.createTextNode(now.value); latest.appendChild(text); now.parentNode.replaceChild(latest, now); } } window.onload = submitter;

 <head> <script type="text/javascript" src="date.js"> </script> </head> <body> <h1>Date checker</h1> <form action="eventssearch.php" method="post" onsubmit="return checkDate();"> <p> <label for="date">Date in the format DD-MM-YYYY:</label> <br /> <input type="text" id="date" name="date" /> <input type="submit" value="Check" /> <br />(example 01-01-1970) <p id="spam"></p> </p> </form> </body>

格拉梅西...

Answer 1

而不是使用

"javascript:document.forms[0].submit()"

您可以調用自己的函數來調用驗證函數，並在表單有效時提交：

`javascript:singleSumbitFunc()`

然后可以將相同的函數設置為表單的onsubmit函數。

<form action="eventssearch.php" method="post" onsubmit="return singleSubmitFunc()">

功能示例：

function singleSubmitFunc() {
  var form = document.forms[0];

  // here is the where your validation function is called
  // .call() is to set the form as 'this'
  var formIsValid = checkDate.call(form);

  if (formIsValid) {
    form.submit();
  } 

  return false; // this prevents normal submit if called by form
}

您需要這樣做的原因是因為在代碼/鏈接中使用.submit()時不會觸發提交事件。 此示例中使用的函數將直接調用所需的函數。

onsubmit處理是根據這個SO答案改編的

 function checkDate() { document.getElementById('checkDateFeedBack').innerText = 'checkDate() fired! at ' + new Date().toLocaleString(); var date = document.getElementById("date"); var dt = date.value; var flag = 1; var msg = ""; var errorHere = document.getElementById("spam"); for (var i = 0; i < dt.length; i++) { if (i == 2 || i == 5) { if (dt[i] != '-') { flag = 0; break; } continue; } if (dt[i] < '0' || dt[i] > '9') { flag = 0; break; } } if (dt.length != 10) flag = 0; if (dt.length == 0) flag = -1; if (flag == 0) msg += "Invalid format."; else if (flag == -1) msg += "Empty field." else msg += "OK."; errorHere.innerText = msg; if (flag == 1) return true; else return false; } function singleSubmitFunc(event) { var form = document.forms[0]; // here is the where your validation function is called // .call() is to set the form as 'this' var formIsValid = checkDate.call(form); if (formIsValid) { form.submit(); document.getElementById('checkDateFeedBack').innerText = 'Valid form has been submitted!'; } return false; // prevent normal submit if called by form } function submitter() { var abc = confirm("Would you like to switch to link?"); if (abc == true) { var i = 0, now; while (++i) { now = document.getElementsByTagName("input")[i]; if (!now) return; if (now.type == "submit") break; } var latest = document.createElement("a"); latest.href = "javascript:singleSubmitFunc()"; // calls custom form submit function var text = document.createTextNode(now.value); latest.appendChild(text); now.parentNode.replaceChild(latest, now); } } window.onload = submitter;

 .error { color: #c00; font-weight: bold; }

 <head> <script type="text/javascript" src="date.js"> </script> </head> <body> <h1>Date checker</h1> <form action="eventssearch.php" method="post" onsubmit="return singleSubmitFunc()"> <p> <label for="date">Date in the format DD-MM-YYYY:</label> <br /> <input type="text" id="date" name="date" /> <input type="submit" value="Check" /> <br />(example 01-01-1970) <p id="spam"></p> <p id="checkDateFeedBack"></p> </p> </form> </body>

當使用“javascript：document.forms [0] .submit（）”時如何調用“onsubmit”？

問題描述

1 個解決方案

解決方案1
2 已采納 2016-10-15 18:03:09

當使用“javascript：document.forms [0] .submit（）”時如何調用“onsubmit”？

問題描述

1 個解決方案

解決方案1 2 已采納 2016-10-15 18:03:09

解決方案1
2 已采納 2016-10-15 18:03:09