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.
Related
I was trying to press a button to reload the page but it doesn't work and I don't know why
I'm using handlebars, so in theory all this code down here is inside a <body>
It sends the "POST" and everything okay, the only thing that does not run is the script
As a little relevant information, I am using Bootstrap 5.
<script>
const reload = document.getElementById('reload');
reload.addEventListener('click', _ => {
window.location.reload();
});
</script>
<div class="Things with little reference">
. . .
<form action="/dashboard/" method="POST">
<div class="form-group">
<button id="reload" class="btn btn-success">ye!</button>
</div>
</form>
The default type of button is "submit" which will submit the form.
for this case, you should change the button type to "button" or use preventDefault to stop the default behavior of the button clicked.
change the button type to "button"
<button type="button" id="reload" class="btn btn-success">ye!</button>
or use preventDefault
reload.addEventListener('click', e => {
e.preventDefault()
window.location.reload();
});
Instead of using JS you can directly specify it in button.
<button onClick="window.location.reload();" class="btn btn-success" >ye!</button>
After submiting the form You can call the method for reloading from onSubmit event.
<button type="button" onClick="onSubmit()">Close</button>
<script>
function refreshPage(){
window.location.reload();
}
onSubmit()
{
/*Here you can add your code for submit event*/
this.refreshPage();
}
</script>
I am clicking a submit button using this:
Hlml :
<button type="submit" class="btn btn-submit">Submit</button>
Js :
$("#form_id").on('submit',(function(e) {
The problem is that I have more that 1 submit button on my form wizard so I need to target a specific submit button.
LIke
<button type="submit" id="submit_form" class="btn btn-submit">Submit</button>
How could I submit form using id="submit_form and $("#form_id") ?
You could attach click event to the button you want using the specific id attribute :
$("#form_id").on('click', '#submit_form', function(e) {
e.preventDefault();
//You logic here
//Submit form at the end if you want
//$("#form_id").submit();
});
Hope this helps.
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>
I have following two buttons:
<button type="submit" id="gform_submit_button_1">Submit</button>
<button type="button" data-is_quote="1" data-button="simple_add_to_quote" data-product-type="simple" data-product-id="75448" id="add_to_quote">Submit</button>
the #gform_submit_button_1 button validates form entries before submitting data to the server
and the #add_to_quote button submits form data without validating it
I want to be able to validate the form & submit it using the #add_to_quote button. Any solution?
Trigger click event of gform_submit_button_1 button on click of add_to_quote.
$("#add_to_quote").click(function() {
$("#gform_submit_button_1").click();
});
I'm not sure that I get the problem right, but here is a possible solution :
Create a form element with an hidden input containing all the data-X values and a submit button that submits the form.
<form method="GET/POST" action="validation.php">
<input type="hidden" name="data-validation" data-is_quote="1" data-button="simple_add_to_quote" data-product-type="simple" data-product-id="75448" id="add_to_quote">
<input type="submit" value="submit" id="add_to_quote">
</form>
I hope it will help !
#Dhara Parmar solution is fine... but is missing the event.stopPropagation() and event.preventDefault() like this:
$("#add_to_quote").click(function() {
$(this).preventDefault(); //to stop submit
$(this).stopPropagation();//to avoid the event bubbling up to other submit buttons, if any...
$("#gform_submit_button_1").click();
});
you can call the validation and submit functions of the form directly from the type=button click handler to make it behave like a type=submit
$("#add_to_quote").click(function () {
if (!$("#TheForm").validate()) { //native validation triggered
return false;
} else {
$("#TheForm").submit()
}
});
Pressing return on the <input> of the form in the code below seems to trigger two events:
submit event,
click event for the first <button> in the form.
preventDefault seems to cancel the submit event, but the click event is not stopped because it is triggered before the submit event. I could replace <button> with an <input type="button">, but why is the <button> clicked at all? How can I prevent it?
Here is the form http://jsfiddle.net/MNXUS/:
<form>
<button></button>
<input>
</form>
That's just what browsers do. If you don't want the button to submit the form, you can make it a "button" button instead of a "submit" button:
<button type=button>Click Me</button>