当使用“javascript：document.forms [0] .submit（）”时如何调用“onsubmit”？

Question

I am new to javascript and I am facing the following issue: I made a simple date accepting form which checks the format before submission. 我是javascript的新手，我面临以下问题：我做了一个简单的日期接受表单，在提交之前检查格式。 In case the entered date is not in the desired format, it shows an error. 如果输入的日期不是所需的格式，则显示错误。 Now, I replace the submit button on the form with a link using another javascript function. 现在，我使用另一个javascript函数替换表单上的提交按钮。 I link it to javascript:document.forms[0].submit() . 我将它链接到javascript:document.forms[0].submit() 。 This time, the format checking function is not called during form submission. 这次，在表单提交期间不调用格式检查功能。 It gets submitted without the check. 它在没有支票的情况下提交。 It would be nice if someone could tell me how to overcome this issue. 如果有人能告诉我如何克服这个问题，那就太好了。

 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>

Gramercy... 格拉梅西...

Answer 1

Instead of using 而不是使用

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

you can call your own function that will call the validation function and submit if the form is valid: 您可以调用自己的函数来调用验证函数，并在表单有效时提交：

`javascript:singleSumbitFunc()`

This same function can then be set as the form's onsubmit function as well. 然后可以将相同的函数设置为表单的onsubmit函数。

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

Example function: 功能示例：

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
}

The reason you need to do this is because the submit event is not fired when using .submit() in your code/link. 您需要这样做的原因是因为在代码/链接中使用.submit()时不会触发提交事件。 The function used in this example will call the desired function directly. 此示例中使用的函数将直接调用所需的函数。

The onsubmit handling was adapted from this SO answer 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