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=".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>
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./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>
2 Answers
Reset to default 16The DOM submit() method does not trigger submit events. jQuery's does.
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 */
})
OR
const form = document.querySelector('form')
form.onsubmit = e => {
e.preventDefault()
/* Other stuff */
})