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>
Related
I have 3 buttons on my toolbar (delete,block,unblock). Сan i change form action dynamically
<form action="/users/groupUnblock" method="POST">
<button type="submit" class="btn btn-danger btn-sm">Delete</button>
</form>
Tried to write a func,but its not working
If you don't want to use JavaScript at all, this can be done with pure HTML5. You can specify the action of each button with the formaction attribute.
Example:
<form>
<button type="submit" formaction="http://firsttarget.com">Submit to first</button>
<button type="submit" formaction="http://secondtarget.com">Submit to second</button>
</form>
Read more about this attribute here
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 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 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);" />
What I am trying to achieve is consistent behavior. When we click the input field the color picker shows up. I would like the same behavior when I am clicking the button that wraps it.
<button class="btn btn-small my-btn">
Color <input type="color" value="#33aabb">
</button>
JSFiddle.
Just defer to the input's .click()
http://jsfiddle.net/J73dK/1/
This should work:
<button class="btn btn-small my-btn" onclick="this.querySelector('input').click()">
Color <input type="color" value="#33aabb">
</button>
http://jsfiddle.net/C2wj2/