Level 1
If you are using bootstrap use this
$('#ordersubmitform').submit(function(){
$('input[type=submit]').addClass("disabled");
});
Mar 21, 2016
6
Level 7
Onclick Disable submit button
I have an order form with a submit button:
{!! Form::open(['url' => action('\Modules\Ordering\Http\Controllers\CheckoutController@postSubmitOrder'), 'id' => 'ordersubmitform' ]) !!}
{!! Form::button('Place Your Order', ['class' => 'pull-right btn btn-success', 'onclick' => 'submit()']) !!}
on submit i want to disable the button so a user cannot click it twice or click it again causing a double or duplicate submission
$('#ordersubmitform').submit(function(){
$(this).find('input[type=submit]').prop('disabled', true);
});
would this be the appropriate direction to take? how could i replace the button with a loading image or an hourglass showing it has been submitted. and waiting for the redirect?
Level 7
both
$('#ordersubmitform').submit(function(){
$(this).find('input[type=submit]').prop('disabled', true);
});
and your suggestion
$('#ordersubmitform').submit(function(){
$('input[type=submit]').addClass("disabled");
});
I can't seem to get to work and am still able to reclick the button and am getting duplicate submissions? maybe I'm missing something?
Level 7
<input type="submit" value="Place Your Order" class="pull-right btn btn-success" name="submitBtn" onclick="this.disabled=true;this.form.submit();"
did the trick
6 likes
Level 1
replace your code with mine
Level 1
Disable every form from double-submitting and add a fontawesome loading spinner to its submit button :)
$('form').submit(function (event) {
if ($(this).hasClass('submitted')) {
event.preventDefault();
}
else {
$(this).find(':submit').html('<i class="fa fa-spinner fa-spin"></i>');
$(this).addClass('submitted');
}
});
7 likes
Level 1
@kjdion84 I had to add:
document.getElementById("submit").disabled = true;
for the button to get disabled. Thanks!
Please or to participate in this conversation.