I have a code that disables the button after one click perfectly, but the problem is, is the form doesn't submit then. How do I disabled the button after one click and still have the form submit.
Code
<input id="submitbtn" name="submit" type="submit" value="Submit for Payment" />
<script type="text/javascript">
$(function(){
$('#submitbtn').one('click', function() {
$(this).attr('disabled','disabled');
});
});
</script>
Try this:
$('form').submit(function() {
$(this).find("button[type='submit']").prop('disabled',true);
});
Deferring the button disabling code until after the form submit event fires might be your best option. You can do this a few ways. If you only have one button that you want to disable, add a submit event listener to the form and disable it in the callback. Another simple approach is to use setTimeout which runs after 0 milliseconds.
setTimeout( () => $(this).attr('disabled','disabled') , 0);
Also, if you're using a version of jQuery that supports .prop(), I'd recommend using that instead of attr. Example: $(this).prop('disabled', true).
$(function(){
$('#submitbtn').on('click', function() {
$(this).prop('disabled', true);
$("#formID").submit();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="submitbtn" name="submit" type="submit" value="Submit for Payment" />
Add the onsubmit attribute to your form and put the code to disable the button there, so you disable the button but the first submit has already happened:
<form onsubmit="myFunction();">
<script type="text/javascript">
function myFunction(){
$('#submitbtn').attr('disabled','disabled');
// my submit code here
}
</script>
Related
I have a button that I want to dynamically change from a regular button to a form submission button.
I.e. I have my button start with type='button' to prevent it from submitting my form on the first click.
<button id="myButton" type="button">Button</button>
Then I bind a click event to my button, to change it to a submit type for the next click. For some reason, it's triggering the submit on the first click.
$('#myButton').click(function(){
$(this).prop('type', 'submit');
});
How can I achieve what I'm trying to do? I want my button to turn into a button which will submit my form on the second click, not the first.
You'll want to prevent the default click action from occurring on the first click, but allow the default click action to submit the form on the second click.
You can do this with jQuery's one()
$('#myButton').one('click', function(e) {
$(this).prop('type', 'submit');
e.preventDefault();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form onsubmit="alert('Form Submitted!');return false;">
<button id="myButton" type="button">
My Button
</button>
</form>
Code and style inline for demonstration purposes
This is by far the simplest and safest
<button type="button" onclick="$(this).hide(); $('#subbut').show()">Click</button>
<button id="subbut" type="Submit" style="display:none">Submit</button>
You need to remove the click event ,
try this:
$('#myButton').click(function(){
console.log('foo');
$(this).unbind();
$(this).prop('type', 'submit');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<button id="myButton" type="button">Button</button>
Since the click event will still apply to your button, even as you change the type, you need to insert a small delay between it and the changing of the type. Try:
$('#myButton').click(function() {
setTimeout(function() {
$('#myButton').prop('type', 'submit')
}, 100)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<button id="myButton" type="button">Button</button>
</form>
You should see the first click don't submit the form but the second does.
I saw from W3C example something like this. An action happens on form submit(an alert). However, when I tried with my own function here, my action doesn't happen (show hidden div). Goal is to show hidden div on form submit using 'GET' request. I am new to javascript/jQuery/ajax, but isn't jQuery supposed make call to server without refreshing page?
not working javascript:
$(document).ready(function(){
$("form").submit(function showDiv(){
document.getElementById("showMe").style.display = "block";
});
});
not working html:
<body>
<form action="" method="GET">
<input type="text" name="LastName" value="Mouse"><br>
<input type="submit" value="Submit">
</form>
<div id="showMe" style="display: none;">
<p>hey this should be hidden</p>
</div>
</body>
You need to cancel the form submit before executing your code:
$(document).ready(function(){
$("form").submit(function(e){
// At this point you'll want to have some type of flag to indicate whether you
// should allow the form submission to continue, or cancel the event. For example,
// it could be whether not showMe is visible (I don't know what you're going for).
e.preventDefault();
$("#showMe").css("display", "block");
// Submit form after your code runs (or whenever you want)
$("form").submit();
});
});
$(document).ready(function(){
$("form").submit(function(e){
e.preventDefault(); // this will prevent the submit
document.getElementById("showMe").style.display = "block";
});
});
Actually the jfiddle you posted is not blocking the form, it shows you an alert that block all js execution (browser behavior), if you select ok in the alert, the form goes through
the event.preventDefault() statement means: don't process anything outside this function
Try this:
$("form").submit(function(e){
e.preventDefault();
$("#showMe").show();
});
You need at least one form element (button or input), that has type "submit".
Then jQuery .submit() or .on('submit',..) will definitely work.
I'm new with JS and I have a very simple question.
I want to submit a form with a button which located outside of it.
The form header looks like this:
<form action="http://www.google.com" method="get" id="myform">
The button looks like this:
<input type="button" value="Click Me" id="send">
The JS file is:
document.getElementById("send").onclick = function() {
document.getElementById("myform").submit();
};
And it is not working. When I clicked the button nothing happens.
Any idea? Jquery will be also fine for me instead of vanilla JS.
Appreciate your help.
Thanks
<script type="text/javascript">
$(document).ready(function(){
$("#send").on("click",function () {
$('#myform').submit();
});
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
hope this will help you.since your showing google page on button click.
I Prefer using JQuery to submit a form.
There are other posts on stackoverflow covering the topic of submitting a form using JQuery. You can check out this one Submit form using jquery
If I may add something that might come in handy if you have validators on the form, for required fields for example. You could add a check before you submit the form to see if all the fields are valid. Your button click method may look something like this:
function SubmitButtonClick(){
var form = $('#myForm');
form.validate();
if(!form.valid())
return false;
else
form.submit();
})
Obviously you should just remember to add the method to the button's onclick like so:
<input type="button" value="Click Me" id="send" onclick="SubmitButtonClick()" />
You can try get the id of the form. And you call it from wherver you want.
Try:
$(".button").click( function() {
$('#myform').submit();
});
try this:
window.onload = function(){
document.getElementById("send").onclick = function() {
document.getElementById("myform").submit();
};}
or
document.getElementById("send").onclick = function() {
document.getElementById("myform").submit();}
after
<input type="button" value="Click Me" id="send">
I'm trying to prevent a form from being submitted twice. I'm doing that by catching clicks on a submit button and disabling it while the form submit goes on in the background.
Here's a very basic example of the code I'm using:
$("button").click(function(){
$(this).attr("disabled","true").html("Wait here while posted...");
});
Working example:
http://jsfiddle.net/t93Vw/
This works perfectly in firefox and IE, but in chrome the form is not submitted.
Why is this different behaviour, and does anyone have a quick fix?
If you want to submit a form then you should use onsubmit event:
$("form").submit(function () {
$(':submit', this).prop("disabled", true).html("Wait here while posted...");
});
onclick is for click, form has a special event for submission. Advantage is that it will properly behave on Enter key submit.
Demo: http://jsfiddle.net/t93Vw/1/
Try .prop( propertyName, value ) and don't wrap true in quotes
value Type: String or Number or Boolean A value to set for the property.
$("button").click(function (e) {
e.preventDefault(); //stop default behavior of form submit
$(this).prop("disabled", true) // disable button
.text("Wait here while posted...") //change text of button
.closest('form').submit();//find closest form and submit it
});
.closest()
event.preventDefault()
Fiddle Demo
The type of the button may be the reason ... try this
<form action="/test" method="post">
<input type="text" name="somefield"/>
<button id="submitbutton">Send</button>
</form>
$("button").click(function(){
$(this).prop("disabled",true).html("Wait here while posted...")
.parent().get(0).submit();
e.preventDefault();
});
Not quite sure what's the error but maybe this will help?
$("button").click(function(e){
e.preventDefault();
$(this).attr("disabled","true").html("Wait here while posted...");
});
For it to work on chrome, do the following updates in your codes:
(1) your form
<form action="/test" method="post" id="myForm">
<input type="text" name="somefield"/>
<button id="submitbutton" type="submit">Send</button>
</form>
(2) Use jquery to submit the form:
$("button").click(function(){
$('form#myForm').submit();
$(this).attr("disabled","true").html("Wait here while posted...");
});
I have the following HTML and jquery:
<html dir="ltr" lang="en">
<head>
</head>
<body>
<h2>Test disabling submit button for 1 minute...</h2>
<br/>
<p style="text-align:center">
<form id="yourFormId" name="yourFormId" method="post" action="#">
<input type="submit" class="submitBtn" value="I Accept"/>
</form>
</p>
<!--script to disable the submit button -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js">
</script>
<script type="text/javascript">
$(document).ready(function () {
$(".submitBtn").click(function () {
$(".submitBtn").attr("disabled", true);
return true;
});
});
</script>
<!--script ends here-->
</body>
</html>
As its stands the submit button gets disabled when pressed. However once pressed it does not seem perform the submit. If I removed the jquery to disable the button, the button then performs the submit normally.
How can I disable the button only after it has performed the submit? the current jquery above seems to conflict with the submit operation.
Any suggestions to resolve this issue would be extremely helpful.
Add the disable part in the submit event.
$(document).ready(function () {
$("#yourFormId").submit(function () {
$(".submitBtn").attr("disabled", true);
return true;
});
});
I faced the same problem. Customers could submit a form and then multiple e-mail addresses will receive a mail message. If the response of the page takes too long, sometimes the button was pushed twice or even more times..
I tried disable the button in the onsubmit handler, but the form wasn't submitted at all. Above solutions work probably fine, but for me it was a little bit too tricky, so I decided to try something else.
To the left side of the submit button, I placed a second button, which is not displayed and is disabled at start up:
<button disabled class="btn btn-primary" type=button id="btnverzenden2" style="display: none"><span class="glyphicon glyphicon-refresh"></span> Sending mail</button>
<button class="btn btn-primary" type=submit name=verzenden id="btnverzenden">Send</button>
In the onsubmit handler attached to the form, the 'real' submit is hidden and the 'fake' submit is shown with a message that the messages are being sent.
function checkinput // submit handler
{
..
...
$("#btnverzenden").hide(); <= real submit button will be hidden
$("#btnverzenden2").show(); <= fake submit button gets visible
...
..
}
This worked for us. I hope it will help you.
This solution has the advantages of working on mobile and being quite simple:
<form ... onsubmit="myButtonValue.disabled = true; return true;">
Hey this works,
$(function(){
$(".submitBtn").click(function () {
$(".submitBtn").attr("disabled", true);
$('#yourFormId').submit();
});
});
As a number of people have pointed out, disabling the submit button has some negative side effects (at least in Chrome it prevents the name/value of the button pressed from being submitted). My solution was to simply add an attribute to indicate that submit has been requested, and then check for the presence of this attribute on every submit. Because I'm using the submit function, this is only called after all HTML 5 validation is successful. Here is my code:
$("form.myform").submit(function (e) {
// Check if we have submitted before
if ( $("#submit-btn").attr('attempted') == 'true' ) {
//stop submitting the form because we have already clicked submit.
e.preventDefault();
}
else {
$("#submit-btn").attr("attempted", 'true');
}
});
Test with a setTimeout, that worked for me and I could submit my form, refers to this answer https://stackoverflow.com/a/779785/5510314
$(document).ready(function () {
$("#btnSubmit").click(function () {
setTimeout(function () { disableButton(); }, 0);
});
function disableButton() {
$("#btnSubmit").prop('disabled', true);
}
});
Reading the comments, it seems that these solutions are not consistent across browsers.
Decided then to think how I would have done this 10 years ago before the advent of jQuery and event function binding.
So here is my retro hipster solution:
<script type="text/javascript">
var _formConfirm_submitted = false;
</script>
<form name="frmConfirm" onsubmit="if( _formConfirm_submitted == false ){ _formConfirm_submitted = true;return true }else{ alert('your request is being processed!'); return false; }" action="" method="GET">
<input type="submit" value="submit - but only once!"/>
</form>
The main point of difference is that I am relying on the ability to stop a form submitting through returning false on the submit handler, and I am using a global flag variable - which will make me go straight to hell!
But on the plus side, I cannot imagine any browser compatibility issues - hey, it would probably even work in Netscape!
This is the edited script, hope it helps,
<script type="text/javascript">
$(function(){
$("#yourFormId").on('submit', function(){
return false;
$(".submitBtn").attr("disabled",true); //disable the submit here
//send the form data via ajax which will not relaod the page and disable the submit button
$.ajax({
url : //your url to submit the form,
data : { $("#yourFormId").serializeArray() }, //your data to send here
type : 'POST',
success : function(resp){
alert(resp); //or whatever
},
error : function(resp){
}
});
})
});
</script>
I put this in my global code to work on all submit buttons:
$("input[type='submit']").on("click", function (e) {
$(this).attr("disabled", true);
$(this).closest("form").submit()
});
My problem was solved when i add bind section to my script file.
Totally i did this 2 steps :
1 - Disable button and prevent double submitting :
$('form').submit(function () {
$(this).find(':submit').attr('disabled', 'disabled');
});
2 - Enable submit button if validation error occurred :
$("form").bind("invalid-form.validate", function () {
$(this).find(':submit').prop('disabled', false);
});
Not that I recommend placing JavaScript directly into HTML, but this works in modern browsers (not IE11) to disable all submit buttons after a form submits:
<form onsubmit="this.querySelectorAll('[type=submit]').forEach(b => b.disabled = true)">
I went through a lot of solutions for my problem statement and I think most of the people here are also answering the same.
Generally, when you do a server side form submit, there is a chance of user clicking the button multiple times which leads to multiple submissions. So, to prevent that, the button should be disabled after the first submit. This is what worked for me in the most elegant way.
We have a form submit event <form onsubmit="onFormSubmitted()"></form>.
In onFormSubmitted() disable your submit button or do any operations required.
Handing this way retains your html validations as well as it disables the button once the form submit is triggered when first click of button takes place.
function onSubmit() {
$('.btn_submit').attr('disabled', true);
}
<form class="contact_form" method="POST" autocomplete="off" onsubmit="onSubmit()">
<input name="email" id="email">
<button class="btn_submit" type="submit">Submit</button>
</form>
Alternatively, you can also make global form submit handler for forms throughout the project.
$('form').on('submit', function() {
$(this).find(":submit").prop('disabled', true);
});
$(document).ready(function() {
$(body).submit(function () {
var btn = $(this).find("input[type=submit]:focus");
if($(btn).prop("id") == "YourButtonID")
$(btn).attr("disabled", "true");
});
}
$(function(){
$("input[type='submit']").click(function () {
$(this).attr("disabled", true);
});
});
thant's it.