Form submission is not working - javascript

I got a form which I would like to submit using jQuery if the result of checkBrowser function is old.
<form action="xxx" method="post">
...
<input id="iop" type="submit">
...
</form>
jQuery:
$("#iop").mousedown(function(e){
e.preventDefault();
var status=checkBrowser();
if(status=='old'){
$("#iop").submit();
}
});
What I have done:
I debugged the code and it reaches the line $("#iop").submit(); but nothing happens. any idea?

You need to use submit() on <form> not <input> element. From the docs:
The submit event is sent to an element when the user is attempting to
submit a form. It can only be attached to elements
if(status=='old'){
$("form").submit();
}
or more specific by using .closest() to get the closest matching form element of your submit button when traverse up the DOM tree:
if(status=='old'){
$(this).closest('form').submit();
}

Now you are refering to the submit input instead of the form.
Change this:
$("#iop").submit();
To this:
$("form").submit();

Instead of calling submit() explicitly, let the default action do it:
$("form").submit(function(e){
var status=checkBrowser();
if(status != 'old'){
e.preventDefault();
}
});
Also, bind the handler to the form's submit event, not the button.

Change <input id="iop" type="submit"> to <input id="iop" type="button">
and $("#iop").submit(); to $("form").submit();
Try this
<form action="xxx" method="post">
<input id="iop" type="button" value="Submit">
</form>
<script src="http://code.jquery.com/jquery-latest.min.js"
type="text/javascript"></script>
<script>
$(document).ready(function(){
$("#iop").mousedown(function(e){
//e.preventDefault();
// var status=checkBrowser();
status = "old";
if(status=='old'){
$("form").submit();
}
});
});
</script>

Related

jquery preventdefault on submit form will not be re submitted

I got issue on my code. I Have a html form where the button submit when clicked but there will be some checking first, if all values are true the form will be submitted - but on my code, it didn't work. does anyone have an idea about this?
$("#button").click(function(e) {
e.preventDefault();
if ($(this).attr("at") == "1") { //some checking
alert("Subsssmitted");
$("form").submit(function() {
alert("Submitted"); // it didn't passed the form didn't submitted
});
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="">
<!-- some code -->
<button id="button" at="1">Submit</button>
</form>
Add
$('#form').submit()
after
$("form").submit(function(){
alert("Submitted"); // it didn't passed the form didn't submitted
});
Since you are just defining event handler but not triggering submit event.
If possible move
$("form").submit(function(){
alert("Submitted"); // it didn't passed the form didn't submitted
});
Outside the click event handler
You should do this in that way:
$("#button").click(function(e){
e.preventDefault();
if($(this).attr("at") == "1"){ //some checking
alert("Subsssmitted");
// here you trigger event
$("form").submit();
}
});
// here you listen event
$("form").on("submit", function() {
alert("submitted")
})
Just get it here https://jsfiddle.net/6hzt663q/
$('#myForm').submit(function(event){
// do your validation success
if(!success){
event.preventDefault();
}
console.log('fsdfsdfds');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form id="myForm" action="/google">
<input type="text" id="name">
<button id="button" at="1" type="submit">Submit"></button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Your code is working for me, remove e.preventDefault() and try,
$("#button").click(function(e){
if($(this).attr("at") == "1"){
$("form").submit(function(){
console.log('done');
});
}
});
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
<form action="">
<button id="button" at="1">Submit</button>
</form>
Just removed "e.preventDefault();" on button click event and it will work fine.

How to submit form with jQuery .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();
}

Controlling ENTER key

How can we make a form in a page doesn't submit on pressing Enter — rather. it does the same work as pressing a particular button or icon or image?
Here are the contents of my form:
<input type="text" id="txt" /><input type="button" value="search"
onclick="searchresult()" />
The problem is that if I press Enter, the form submits and text field clears itself but the function searchresult() doesn't show its effect. When only pressing the button, it works well.
HTML
<input type="text" id="txt"/>
<input type="button" value="search"/>
jQuery
$('input[type=text]').on('keyup', function(e) {
if(e.which == 13) { // 13 is keycode for enter
e.preventDefault();
}
})
You can also bind to submit() like following
$('form').submit(function(e) { // instead of only `form`,
// use with `id` or `class` combination
if(e.which == 13) {
e.preventDefault();
}
});
Remainder
Don't forget to place you code within
$(document).ready(function() {
// your code
});
in short
$(function() {
// your code
});
Alternatively, instead of disabling the enter key, you might be able to bind to the onsubmit event to perform any processing prior to submitting the form. From the MDN documentation:
The submit event is raised when the user clicks a submit button in a form ().
Try:
$('form').submit(function(event){
if(!$(':focus',this).is(':button'))
event.preventDefault();
});
This attaches to the form itself. If it was submitted any way other that clicking the submit button it halts the submission process. For better performance narrow down the 'form' selector.
Try this:
form
<form id="myForm">
<input type="text" id="txt" />
<input type="submit" value="search" />
</form>
js
<script>
$(document).ready(function(){
$("#myForm").submit(function(e){
e.preventDefault();
searchresult();
});
});
</script>

How to do something before on submit?

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()

Disable button after post using JS/Jquery

I would like to have a function to add an onclick event to my form buttons to get them disabled in order to avoid double posting.
<form>
<button onclick="disable(this)" type="submit">post</button>
</form>
<script> function disable(button){ $(button). ??? }</script>
Ani idea or tip? thanks!
The button must be an input element (if you don't submit the form via JavaScript). A <button> element has no attribute type and setting it will have no effect.
I also suggest to attach the click handler via jQuery:
<form>
<!-- ... -->
<input id="submit" type="submit" value="post" />
</form>
<script type="text/javascript>
$('#submit').click(function() {
$(this).attr('disabled', true);
});
</script>
Reference: click, attr
$(button).attr('disabled', true);
<button onclick="this.disabled='disabled'" type...>
If you want to just target a button:
$('#buttonID').click(function(){
$(this).attr('disabled', 'disabled');
});
If you want a function:
function diableButton(bID){
$(bID).attr('disabled', 'disabled');
}
Call it using something like:
$('#myform').submit(function(){
disableButton($('input[type=submit]', this));
});

Categories

Resources