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();
});
Related
I have a form with one field that the user needs to type into, and a button underneath that when clicked, does some jQuery and hides the login-form. But when I hit enter after typing something in, the page refreshes...
There's part of me that thinks it doesn't need to be an <input> or a <form>
I don't actually need to post anything. I have tried changing the input to a <button> which completely ruins my styling and still doesn't work. What's the best way of getting round this?
<div class="login-page">
<div class="form">
<form class="login-form" method="POST">
<!-- user inputs -->
<p class="phc">PHC:</p><input type="text" id="username" placeholder="Enter Your PHC Here" />
<!-- your submit button -->
<input class="login" type="button" id="submit" value="login">
</div>
True, Adam. If the form does not contain the type submit button, a keypress event has to be added manually. Otherwise Enter will act as the Accept Button on the form.
You need to attach keypress event to the form or at least the field. For convenience, you also need to combine the callback functions into one.
$('#username').on('keypress', function(event){
var code = event.keyCode || event.which;
if(code == 13){
// submit the form.
}
});
$('#username').on('keypress', function(event){
var code = event.keyCode || event.which;
if(code == 13){
console.log('Submitting form');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form class="login-form" method="POST">
<p class="phc">PHC:</p><input type="text" id="username" placeholder="Enter Your PHC Here" />
<input class="login" type="button" id="submit" value="login">
</form>
If the enter key is pressed when focused to an input field inside a form that has a submit button, the default browser behaviour is to fire a submit event on that form. You can prevent this happening by either:
return false;
or
e.preventDefault();
Full code:
$('.login-form').on('submit', function() {
return false;
});
Fiddle: https://jsfiddle.net/nc1e2gm6/
Bear in mind that if you go down the route of using e.preventDefault(); instead or return false;, you need to pass the e variable from the function call, like:
$('.login-form').on('submit', function(e) { ...
Don't think i explained it very well but i have fixed it, the enter key now activates the submit button rather than refresh the page.
$("form").submit(function() { return false; });
$(document).ready(function(){
$('#username').keypress(function(e){
if(e.keyCode==13)
$('#submit').click();
});
});
I have a button that links to a php file that tracks user's email when clicked, but I don't want the user to leave the page when button is clicked, I just want to change button's value.
This is the html of the form.
<form action="mysql-query.php" method="post">
<input type="text" name="email" style="display:none;">
<input type="submit" value="Press here" id="test" onclick="Press()">
</form>
And this is the script that handles the form:
<script>
function Press() {
var test= document.getElementById("test");
test.value="Thank you";
localStorage.value=("ok");
}
</script>
I put the display:none; because I don't want to display anything but the button and have a way to connect with my php file.
Any ideas?
You need to use ajax:
html:
<form action="mysql-query.php" method="post" onsubmit="return Press(this)">
<input type="text" name="email" style="display:none;">
<input type="submit" value="Press here" id="test">
</form>
js:
function Press(form) {
$.post($(form).attr('action'), function() {
var test= document.getElementById("test");
test.value="Thank you";
localStorage.value=("ok");
});
return false; // prevent submitting the form
}
or better bind submit event using jQuery:
$('form').submit(function() {
$.post($(this).attr('action'), function() {
var test= document.getElementById("test");
test.value="Thank you";
localStorage.value=("ok");
});
return false; // prevent submitting the form
});
Use:
<form action="javascript:void()">
Ok, this thing prevents the form from sending the data anywhere, unless you use "onclick" event on the submit button.
What you can do is remove the type="submit" on the button and replace it with type="button". Next you can do an ajax call to your php and do your magic.
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();
});
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>
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()