Jquery submit vs. javascript submit

Asked 19/7, 2012 at 9:39 Answered 7/3, 2022 at 20:6

Solved javascript jquery forms html submit

I am trying to invoke a form validation when clicked on ordinary button. This seems to work good with jQuery, but not with plain javascript. Can anyone explain this difference between jquery's .submit() and javascript's .submit() methods? Or what am I doing wrong?

<html>
<head>
<title>Form Submit</title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>

<script type="text/javascript">
function validateForm(form) {
  if (form.username.value=='') {
    alert('Username missing');
    return false;
  }
  return true;
}
</script>

</head>

<body>

<form action="index.php" name="loginform" method="post" onsubmit="return validateForm(this);">
  <input name="username" placeholder="username" required="required" type="text" />
  <input name="send1" type="button" value="Login1" onclick="$(document.forms.loginform).submit();" />
  <input name="send2" type="button" value="Login2" onclick="document.forms.loginform.submit();" />
  <input name="send3" type="submit" value="Login3" />
  <a href="" onclick="event.preventDefault(); $(document.forms.loginform).submit();"> Login4 </a>
  <a href="" onclick="event.preventDefault(); document.forms.loginform.submit();"> Login5 </a>
</form>

</body>
</html>

onsubmit results

Rory answered 19/7, 2012 at 9:39 Comment(0)

The DOM submit() method does not trigger submit events. jQuery's does.

Shishko answered 19/7, 2012 at 9:42 Comment(3)

Ok, thanks for explanation. So the script above should be correctly extended to if (validateForm(document.forms.loginform)) document.forms.loginform.submit(); – Rory 19/7, 2012 at 11:0

This is no longer the case. document.formName.submit() (or document.querySelector('form[name="formName"]').submit()) will indeed trigger a form submission – Blender 30/7, 2015 at 17:20

@Blender — Form submission, yes. Form submit event, no. – Shishko 30/7, 2015 at 19:39

I know this is an old question, but it is not been answered very well, so here you go:

the submit() DOM method in vanilla javascript is used to submit a form, but the JQuery submit() method is used to trigger a submit event.

You need to use the submit event.

Example:

const form = document.querySelecor('form')
form.addEventListener('submit', e => {
    e.preventDefault()
    /* Other stuff */
})

const form = document.querySelector('form')
form.onsubmit = e => {
    e.preventDefault()
    /* Other stuff */
})

Rahman answered 7/3, 2022 at 20:6 Comment(0)

Recommended topics

Hot tags