What I am doing is catching the click action on my form's submit button, preventDefault()ing it, doing some computation, and then making an ajax call instead of submitting the form.
Is there a way to use javascript to force the html5 validators to fire even if the form isn't being submitted?
$('#submitButton').click(function (e) {
e.preventDefault(); //stop the form from submitting
//Do computation
$.post('/comments', values, function(results) {
hideForm($('#new_comment_' + parentId));
parent.children('.children').prepend(results);
}, 'html');
});
It works just fine, I tested in latest Chrome and Firefox. Just e.preventDefault() on the <form>:
html:
<form method="post" action="test.html">
<input type="text" required></input>
<input type="submit" value="Submit">
</form>
jQ:
$('form').submit(function(e){ e.preventDefault(); });
example: http://jsfiddle.net/elclanrs/2nnLc/2/
Using html5 constraints the form object has some new methods. For example you can call checkValidity() on the form object to check the input.
<form method="post" action="test.html" id="myForm">
<input type="text" required></input>
<input type="submit" value="Submit" id="submitButton">
</form>
<script type="text/javascript">
$('#submitButton').click(function (e) {
e.preventDefault();
alert($("#myForm").get()[0].checkValidity());
})
</script>
Related
I have a submit button in my form, I'm not using onsubmit event because i'm gonna add more submits button to this same form. So i'm doing like this:
<script type="text/javascript" src="../script/script.js"></script>
<form id="form_cad" action="my_php.php" method="post" enctype="multipart/form-data">
<input type="submit" id="submit1" value="Add" onclick="return confirmMessage();"/>
</form>
function confirmMessage()
{
var x = confirm("...");
if(x)
{
document.getElementById("my_post_value").value = "val1";
return true;
}
return false;
}
I'm using the latest version of Firefox, IE and Google Chrome, but in Chrome the onclick event is not working.
Instead of using onclick attribute for your submit button, onsubmit for your <form>
Try replacing your code as follows
<form id="form_cad" action="my_php.php" method="post" enctype="multipart/form-data" onsubmit="return confirmMessage();">
<input type="text" name="email" id="email">
<input type="submit" id="submit1" value="Add"/>
</form>
Because you are in into a form, the onsubmit event is triggered automatically, one way of stop it is after call confirmMessage(), return false. That stop the propagation of events:
<form id="form_cad" action="my_php.php" method="post"
enctype="multipart/form-data" onclick="confirmMessage(); return
false;">
<input type="text" name="email" id="email">
<input type="submit" id="submit1" value="Add"/>
</form>
It's working fine in my Chrome, and I've never had problems using events on submit buttons, but since you're using an external js file you might want to try it with a pure js solution, instead of inline:
See example below:
function confirmMessage() {
var x = confirm("Click OK to submit form");
if (x) {
return true;
}
return false;
}
document.getElementById('submit1').onclick = function() {
return confirmMessage();
};
<form id="form_cad" action="my_php.php" method="post" enctype="multipart/form-data" onsubmit="alert('submitting')">
<input type="submit" id="submit1" value="Add" />
</form>
The alert in the form's onsubmit is just to illustrate that the event is actually only called when confirm() returns true.
I had a similar problem but I fixed it launching the submit event inside the 'onclick' function. I also prevented the event to prevent launching it twice in the case of using Firefox:
submit_button.click(function(event){
event.preventDefault();
var selected_file = $("#id-file-to-upload").val();
if (selected_file) {
submit_button.prop('disabled', true);
submit_button.prop('value', "Loading");
}
var upload_form = $("#id-form-to-submit");
upload_form.submit();
});
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 this code:
<form method="get" action="" id="search">
<input id="search_box" name="search" type="text" class='search_box' onkeypress="if(event.keyCode==13) sentAjax('searchdata.php');var filelink='searchdata.php';" value="" onclick="this.value=''" />
<input type="hidden" name="course_val" id="course_val" />
</form>
I want to block the form from submitting to a different page.Now if you hit enter it submits to a different page
in pure javascript
<form method="get" action="" id="search" onsubmit="return false;">
...
</form>
Please note that will not let you submit the form so ideally you would invoke your submit handler function in which you would control when you want to submit
<form method="get" action="" id="search" onsubmit="return mySubmitHandler()">
...
</form>
and in your submit handler
function mySubmitHandler(){
if (submit_criteria_met) {
return true;
} else {
return false;
}
return false;
}
This should do the trick:
$('form#search').on('submit', function(e) {
e.preventDefault();
});
The important part being e.preventDefault(), which prevents the form submitting when it's submit event is triggered.
Remove the onkeypress attribute in the input field, it looks like it does some posting behind the curtains when pressing enter (keycode 13).
You might also want to prevent the form from submitting, although it seems to submit to the same page since the action attribute is empty.
If you are unable to edit the HTML, try something like:
$('#search').submit(function(e) {
e.preventDefault();
}).find('input[onkeypress]').removeAttr('onkeypress');
Test: http://jsfiddle.net/DAvfm/
Prevent the default action of the form.
$('#search').submit(function(event) { event.preventDefault(); });
$('#search').bind('submit',function(e) {
e.preventDefault();
});
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()