I have an ecommerce website that uses jQuery 1.9.1 and Bootstrap 2.3.2
I'd like to prevent customers from double-submitting orders on accident (hitting submit twice).
Any ideas on how to do this?
My input submit is simply:
<input type="submit" class="btn btn-orange pull-right" value="Place Order">
Is there anything I can do to prevent this from occurring? I don't want to hinder other customers, I just don't want folks to submit, wait, get impatient, submit again, and they are double charged for their order. That's sloppy.
Thanks.
Here is a little trick:
<input type="submit" class="btn btn-orange pull-right" value="Place Order" onClick="this.disabled=1">
Disable the button when form is submitted. You can do something like this:
$('.pull-right').click(function() {
// Code to submit the form
$(this).attr('disabled', true);
});
This SO Question might help
How-to-prevent-calling-of-en-event-handler-twice-on-fast-clicks
You can do it like this:
<input type="submit" class="btn btn-orange pull-right" value="Place Order" onclick="$(this).attr('disabled', true);">
Some times you may want to also run a function like: OnSubmit function (or a validation) you can do this:
<input type="submit" class="btn btn-orange pull-right" value="Place Order" onclick="this.disabled=true;OnSubmit(this.parentNode);" />
Related
I have one Input button control i want to call javascript function with parameter.
parameter is object of my Asp.Net repeater.
here is my Button
<input id="btnAddNew" class="btn btn-primary pull-left" type="button" value="Add More" onclick="AddFileUpload(<%# Eval("PrimaryID")%>)" />
and JavaScript Function is like this
function AddFileUpload(PrimaryID) {
document.getElementById('<%= hdnField.ClientID %>').setAttribute('value', PrimaryID);
}
I assume that your <%# Eval("PrimaryID")%> is returning non-numeric value so this would generate the syntax error.
replace
onclick="AddFileUpload(<%# Eval("PrimaryID")%>)"
with
onclick="AddFileUpload('<%# Eval("PrimaryID")%>')"
I hope this will work fine if not then post your error here.
You can try this
<input id="btnAddNew" class="btn btn-primary pull-left" type="button" value="Add More" onclick="AddFileUpload('<%# Eval(\'PrimaryID\')%>')">
Hope it works for you..
I am using jquery form plug-in for posting my form ajax way.
Post is working fine with default button.But it is not working when I am using custom bootstrap button as below . Please let me know what i am missing here?
http://jquery.malsup.com/form/#validation
Working case :
<input name="Update" value="Update" type="submit">
Not working case:
<a class="btn btn-sm btn-bitbucket" name="Update" value="Update" type="submit">
<i class="demo-icon icon-ccw fa-fw" style="font-size:1.3em;"> </i> Update
</a>
I've just removed my comment as any of these should work:
<input name="Update" value="Update" type="submit" class="btn btn-sm btn-bitbucket">
<button class="btn btn-sm btn-bitbucket" name="Update" type="submit">
<i class="demo-icon icon-ccw fa-fw" style="font-size:1.3em;"></i> Update
</button>
An anchor can't (by default) be used to submit the form, hence why it isn't working. However Bootstrap allows you to use the button classes on input and button tags.
Sorry for the ghost comment now!
I have a button on a form that I'd like to disable until one or more checkboxes have been selected. This is probably fairly simple to solve, but the button is not disabled when I use !result.isSelected.
This is my button:
<button class="btn btn-success" ng-click="send()" ng-disabled="!result.isSelected" </button>
And the checkbox:
<input type="checkbox" class="checkbox-row" ng-model="result.isSelected" ng-click="selected()" />
Does anyone know of a better solution? Thanks for your help!
A better solution would be:
<input type="checkbox" class="checkbox-row" ng-model="checked" ng-click="selected()" />
<button class="btn btn-success" ng-click="send()" ng-disabled="!checked"> </button>
I am very new in JavaScript and I have the following problem.
I have this form:
<form id="actionButton" action="salwf.do?serv=1" method="post">
<button id="accept" name="ctrl" value="Accept" type="submit" class="acceptButton" onclick="sottometti(this)">ACCEPT ICON BUTTON</button>
<button id="cancel" name="ctrl" value="Cancel" type="submit" class="cancelButton" onclick="sottometti(this)">CANCEL ICON BUTTON</button>
<button id="sap" name="ctrl" value="SAP" type="submit" class="sapButton" onclick="sottometti(this)">SAP ICON BUTTON</button>
<input id="testId" name="test" type="hidden">
</form>
As you can see this form contains 3 different button. Clicking on one of this button it is performed the sottometti(this) Javascript script, that have the following code:
function sottometti(obj){
//document.getElementById('testId').value = obj.value;
document.getElementById('testId').value = obj.value[id]
document.getElementById('actionButton').submit()
}
This script should submit the previous form (the id of the clicked button) but it don't work. Why?
I think that it is trying to retrieve an actionButton that is not present in my form code.
Can you help me to make it work?
replace obj.value[id] with obj.id.
Try this alternative:
<form id="actionButton" action="salwf.do?serv=1" method="post">
<button name="ctrl" value="accept" type="submit" class="acceptButton">ACCEPT ICON BUTTON</button>
<button name="ctrl" value="cancel" type="submit" class="cancelButton">CANCEL ICON BUTTON</button>
<button name="ctrl" value="sap" type="submit" class="sapButton">SAP ICON BUTTON</button>
</form>
I have basically just removed all the JavaScript and the hidden input.
Now, on the server side, test it by simply outputting the value of the ctrl POST variable.
You should clearly see accept, cancel or sap according to the button that the user clicked. No JavaScript required, it's built-in, default functionality :)
I have a marketplace application, and in the payment page, there's a h:form with some validations on the fields. I have a h:commandButton to submit the form and perform an action in the back-end.
The code is this:
<div class="form-actions">
<h:commandButton onclick="setTimeout($('#adios').modal('show'),50)"
value="Pay!" action="#{basketManager.pay(accountManager.currentAccount.username)}"
class="btn btn-primary btn-lg"/>
</div>
The modal just displays a message. But I want this action to be performed after the h:form validations are correctly met, or even better, after the action inside the h:commandButton (which by the way is not working, it only works if I remove the onClick)
Any ideas?
EDIT: Thanks to #SRy for his advice, but there's still problems. This is my code now:
<div class="form-actions">
<p:commandButton oncomplete="$('#adios').modal('show')"
value="Pay!" action="#{basketManager.pay(accountManager.currentAccount.username)}"
styleClass="btn btn-primary btn-lg"/>
</div>
You Can use Primefaces commandbutton p:commandButton for easy execution or you can do somthing like this
<h:commandButton
value="Pay!" action="#{basketManager.pay(accountManager.currentAccount.username)}"
class="btn btn-primary btn-lg">
<f:ajax execute="#this" render="#form" onevent=showdlg();/>
</h:commandButton>
JavaScript
function showdlg(data){
if(data.status=='success'){
setTimeout($('#adios').modal('show'),50);
}
}