americast americast - 1 month ago 9
Javascript Question

How to call "onsubmit" when "javascript:document.forms[0].submit()" is used?

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. 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. I link it to

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

Your onsubmit function isn't firing because there is a syntax error. The property expects a function. You were also trying to set a nodeValue of the first child of the "spam" span tag, but it had no children. You can just set the innerText of the spam span to your error.

Just change:

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

to:

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

Also, there was an error with this line because your errorHere node has no child:

errorHere.firstChild.nodeValue = msg;

You can switch it to set the innerText of errorHere as in:

errorHere.innerText = msg;

For the form to call the onsubmit function when using the link, you can have it call a function that will check for the onsubmit property and call the onsubmit function if it doesn't exist. Answer adapted from this SO answer

function checkDate() {
  console.log('checkDate() fired!');
  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 submitForm() {   
  var form = document.forms[0];

  if (form.onsubmit) {
    var result = form.onsubmit.call(form);
  }

  if (result !== false) {
    form.submit();
  }     
}

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:submitForm()"; // this will call forms[0].submit() using the onsubmit 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="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>