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" />
Login4
Login5
</form>
</body>
</html>
The 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:
cosnt form = document.querySelecor('form')
form.addEventListener('submit', e => {
e.preventDefault()
/* Other stuff */
})
OR
const form = document.qeurySelector('form')
form.onsubmit = e => {
e.preventDefault()
/* Other stuff */
})
Related
I want to change the submit button to call signout function after the user signed in
<html>
<head>
/* Here I have the links for jQuery and bootstrap so, they are working properly
</head>
<body>
<form onsubmit="signIn(event)">
<input type="text" id="username" />
<input type="password" id="password" />
<input type="submit" id="connect_disconnect">
</form>
</body>
<script type="text/javascript">
function signIn() {
code ....
// Below I just change the caption of the submit button from 'Connect' to
// 'Disconnect'
$("#connect_disconnect").text('Disconnect');
}
</script>
<script type="text/javascript">
function signOut() {
code...
}
</script>
</html>
with the above code, when I click on submit button, it will call the signIn function even when I am already signed in. I want it to call signOut function when I am already signed it. any ideas?
Thanks in advance and please let me know if my question is not clear.
If you apply a "submit" event handler to your form, then run event.preventDefault() you can prevent the form from submitting the native way and you can run any Javascript you want.
Below I've added a code example showing what you could do to capture the event.
I try not to add too much philosophy into my answers, but I've decided to include an example of a linked Javascript file.
HTML
<body>
<form id="theForm">
<input type="text" id="username" />
<input type="password" id="password" />
<input type="submit" id="connect_disconnect">
</form>
<script type="text/javascript" src="/script.js"></script>
</body>
Javascript (script.js)
(function() { // Create closure to avoid global-scoped variables
var theForm = document.getElementById('theForm'); // Select the <form> element
theForm.addEventListener('submit', handleFormSubmission); // Bind event listener.
function handleFormSubmission(event) {
event.preventDefault(); // Keep the form from taking any further native action
if( /* user is signed in */ )
signOut();
else
signIn();
}
function signIn() {
// Sign In Code
}
function signOut() {
// Sign Out Code
}
})(); // End closure
I am using jcryption for encrypting the form.It works fine if i use submit button in form. Instead if i use button and submit the form manually my jcryption method is not getting called.
below is my code
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#login").bind('click', function(){
document.authenticatorform.username.value=$("#username").val();
document.authenticatorform.password.value=$("#password").val();
alert('outer hello');
$("#authenticatorform").jCryption({
getKeysURL:"<%=request.getContextPath()%>/keypairrequest",
beforeEncryption:function() {
alert('inner hello');
document.authenticatorform.submit()
return true; },
encryptionFinished:function(encryptedString, objectLength) {return true;}
});
});
});
</script>
<body>
<form:form method="post" action="login.htm" name="authenticatorform" id="authenticatorform">
<input type="hidden" name="username"/>
<input type="hidden" name="password"/>
</form:form>
<input type="button" id="login"/>
</body>
</html>
In the code only outer alert is printing.
Is it possible to call jcryption in other than submit button?
Any help will be greatly appreciated!!!!!
Try using on click function instead of bind
Try this:
$("#login").on('click', function(){
//your codes goes here
}
I have the following code:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
</head>
<body>
<form method="post" id="theform" action="http://example.com" target="_blank">
<input name="email" placeholder="email" type="text">
<input id="submit" type="submit" value="submit">
</form>
<script type="text/javascript">
jQuery(function() {
jQuery('#submit').on('click', function(e) {
e.preventDefault();
jQuery('#theform').attr('disabled', 'disabled');
//Code here
jQuery('#theform').removeAttr('disabled').submit();
}
});
});
</script>
</body>
</html>
The form does not submit. Any idea what is up?
I know I could do an ajax call to manually submit the form to action URL and then use JavaScript to redirect to where I want to send the user in a new tab; however, I don't want to do that because popup blockers will eat up the JavaScript redirect. Hence, I have the form target="_blank" upon submit, which gets the user where I want to send them... if only the code worked.
remove the line e.preventDefault(); from your onclick event handler.
Update:
Sorry my bad that I didn't notice that you were explicitly trying to submit the form later in the code. Even though the above change will fix it, the actual issue is else where. Don't make any changes to the function just rename the submit button's id to something else and update the binding and the code should work.
Working fiddle : http://jsfiddle.net/epednoat/
<body>
<form method="post" id="theform" action="http://example.com" target="_blank">
<input name="email" placeholder="email" type="text">
<input id="smt" type="submit" value="submit">
</form>
<script type="text/javascript">
jQuery(function() {
jQuery('#smt').on('click', function(e) {
e.preventDefault();
jQuery('#theform').attr('disabled', 'disabled');
//Code here
jQuery('#theform').removeAttr('disabled').submit();
}
});
});
</script>
</body>
</html>
You can jQuery submit form with below code.
$( "#theform" ).submit(function( event ) {
alert( "Handler for .submit() called." );
event.preventDefault();
});
With JavaScript
function submitform()
{
document.theform.submit();
}
<script type="text/javascript">
$("document").ready(function () {
$("#done").click(function () {
$("#nm").hide();
});
});
</script>
But when I use form tag it doesn't work. When I run the code, the validation stayed for few seconds and then gone.. But in the case when I remove the <form>, it runs well. Why does this happen?
<form id="frm1" method="post" >
Name: <input type="text" id="nm"/><br>
E-Mail: <input type="email" id="eml"/><br>
Password:<input type="password" id="pass"/><br>
<input type="submit" id="done" value="SUBMIT"/>
</form>
you need to pass an event and use preventDefault() to prevent the form from submitting on click:
$("#done").click(function (event) {
event.preventDefault();
$("#nm").hide();
});
You could use the event as in the example above or avoid using it and return false instead:
$("#done").click(function () {
$("#nm").hide();
return false;
});
i have a form which has a button that submits the form. I need to do something before submits happen. I tried doing onClick on that button but it happens after the submit.
I can't share the code but, generally, what should I do in jQuery or JS to handle this?
If you have a form as such:
<form id="myform">
...
</form>
You can use the following jQuery code to do something before the form is submitted:
$('#myform').submit(function() {
// DO STUFF...
return true; // return false to cancel form action
});
Update; for newer JQuery versions (to avoid deprecation warnings), try:
$('#myform').on('submit', function() {
// ...
return true;
});
Assuming you have a form like this:
<form id="myForm" action="foo.php" method="post">
<input type="text" value="" />
<input type="submit" value="submit form" />
</form>
You can attach a onsubmit-event with jQuery like this:
$('#myForm').submit(function() {
alert('Handler for .submit() called.');
return false;
});
If you return false the form won't be submitted after the function, if you return true or nothing it will submit as usual.
See the jQuery documentation for more info.
You can use onclick to run some JavaScript or jQuery code before submitting the form like this:
<script type="text/javascript">
beforeSubmit = function(){
if (1 == 1){
//your before submit logic
}
$("#formid").submit();
}
</script>
<input type="button" value="Click" onclick="beforeSubmit();" />
make sure the submit button is not of type "submit", make it a button. Then use the onclick event to trigger some javascript. There you can do whatever you want before you actually post your data.
Form:
<form id="formId" action="/" method="POST" onsubmit="prepareForm()">
<input type="text" value="" />
<input type="submit" value="Submit" />
</form>
Javascript file:
function prepareForm(event) {
event.preventDefault();
// Do something you need
document.getElementById("formId").requestSubmit();
}
Note: If you're supporting Safari (which you probably are) you'll need to pull in a polyfill for requestSubmit()