Disable multiple submission of submit button - javascript

<button onclick="task_reject('<?php echo $task['task_id'];?>');" type="submit" class="buttonClass blueBtn pull-right">
I need to disable the submit button on first click but there is an onclick function which is not functioning.
I tried with the following but still its not working
onclick="this.disabled=true;task_reject('<?php echo $task['task_id'];?>');"
Thanks in advance for help!!!!!!!

You can add disabled attribute to the button using button id or class. Write this code in your task_reject function as first line.
$('button').attr('disabled', "disabled")

Add this code and will only execute once.
$("form[name=xxxx]").submit(function() {
$(this).submit(function() {
return false;
});
return true;
});

This might help you. Try it once.
$(document).ready(function(){
var count = 0;
$("#submit").click(function(){
if(count == 0){
//do stuff here
count++;
$('button').attr('disabled', "disabled")
}
});
});

use onclick :
this.disabled=true;
so
<button onclick="this.disabled=true;task_reject('<?php echo $task['task_id'];?>');" type="submit" class="buttonClass blueBtn pull-right">

You can do it with jquery
use this command:
$('button').click(function(e){
e.preventDefault();
});
<form action="">
<button type="submit">Submit</button>
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></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 disable submit button after click single time

I want to disable submit button once it has clicked for send.this is my submit button code
<button title="<?PHP echo getTranslatedString('LBL_SAVE_ALT'); ?>" accessKey="S" class="btn btn-primary" value="<?PHP echo getTranslatedString('LBL_SAVE_LAPTOP'); ?>" id="formSave" type="submit" name="button" onclick="return checkform();">
Save detail
and this is onclick function code
function checkform() {
var incvfr = $("#invoice").val();
var inseridf = $("#invserial").val();
if (incvfr == 1) {
if (inseridf == '') {
alert("Please enter invoice number");
return false;
}
} else {
document.save.submit();
document.getElementById('formSave').setAttribute("disabled", "disabled");
}
}
when i disable submit button then form not send for save just disable button how to do it.
when i use disable code after save.submit(); then form submit but save button not disable
Try one() method in jQuery, it will run once for an element and might simplify your code.
jQuery Solution:
$(function(){
$('#formSave').one('click', function() {
$(this).attr('disabled','disabled');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input title="" accessKey="S" class="btn btn-primary" value="Save detail" id="formSave" type="submit" name="button" onclick="">
JavaScript Solution:
Use setAttribute() method.
function disable(){
document.getElementById('formSave').setAttribute("disabled", "disabled");
}
<input title="" accessKey="S" class="btn btn-primary" value="Save detail" id="formSave" type="submit" name="button" onclick="disable()">
As I can see that you re using jQuery so when you are saving after that you can use jQuery hide function to hide your button by passing button id
function checkform(){
var incvfr=$("#invoice").val();
var inseridf=$("#invserial").val();
if(incvfr== 1) {
if(inseridf==''){
alert("Please enter invoice number");
return false;
}
} else {
document.save.submit();
$("#formSave").hide();
}
}
You can disable submit button using
$("#formSave").attr('disabled',true);
or
$("#formSave").prop('disabled',true);
add property disable
$("#formSave").prop('disabled',true);
if you want revert it use
$("#formSave").prop('disabled',false);

How to click on an input type"submit" button without submiting the whole form

I am trying to click the following line of code:
<input title="Add To Cart" name="pdp_addtocart" value="Add To Cart" type="submit" class="active_step">
I have tried the .click() form and it doesnt work. I need the code in javascript.
With Jquery:
var my_btn = $('input[name="pdp_addtocart"]');
my_btn.click(function(event){
event.preventDefault(); //This avoid the default behavior of the button
//Your Stuff
});
In case your form still sending add this line:
$('form').submit(function(event){
event.preventDefault(); //This avoid the behavior of sending the form
});
Try adding the onclick event to the button:
<input onclick="return false;".... />
return false in the event will halt the form submission.
or using pure javascript:
theButton.onclick = function() {
return false;
};
Edit:
jQuery version:
$theBtn.click(function() {
return false;
});
Does it have to be a <input type="submit" />?
You could use a <input type="button" /> instead.

Form submission is not working

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>

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