Develop Reference

Bootstrap Confirmation: Detect open and close states?

I am trying to detect when the bootstrap confirmation is opened and closed but I am having no luck with detecting this. I am using an <a> tag to trigger the confirmation (code down below), and trying to detect this is jquery.
<a class="delete" data-toggle="confirmation" title="" data-original-title="Delete Row?">
<i class="fa fa-trash-o"></i>
</a>
I originally tried to detect the button click but failed in doing so. It would be better if the confirmation is able to trigger a function once opened and closed.

You may you "data-on-confirm" and "data-on-cancel" attributes to register your callbacks for those particular events.These are given in the documentation provided by the bootstrap confirmation plugin.
Eg
<button class="btn btn-default" data-toggle="confirmation" data-singleton="true" data-on-confirm="myAcceptFunction" data-on-cancel="myRejectFunction">Confirmation 1</button>

Use events, e.g.:
var modalIsShown = false;
$('#myModal').on('shown.bs.modal', function () {
modalIsShown = true;
});
$('#myModal').on('hidden.bs.modal', function () {
modalIsShown = false;
});
http://getbootstrap.com/javascript/#modals-events

I ended up finding my answer thanks to the other answers getting me there. The code simply looks at the trigger button which in my case has a class name of delete and then looks for a <div> with the class name popover to see if it is visible or not.
if ($(".delete").next('div.popover:visible').length){
//do something
}

How to create button event occurs without page load?

I am working on an asp.net application where I have button written like this:-
<button onclick='javascript:imagech(this);' class='close_product color_dark tr_hover'><i class='fa fa-times'></i></button>
I have also a client-side javascript function for the above button:
<script type="text/javascript">
function imagech() {
alert('image clicked.');
}
</script>
What I want that is whenever I click that function then the button click event should not fire page-load. The above object is not server control but it's event occurs page-load. I can also use another html control like this:
<input type='button' onclick='javascript:cartclicked(this);' value='X' class='close_product color_dark tr_hover' />
and this does not occurs page-load but I want icon also used as :
<i class='fa fa-times'></i>
inside <button> tag. but the <i> tag is not used in <input> tag. How I can <button> tag event without any page-load? Please help me someone here.

it seems you are using <button> inside a <form> element. By default a button acts as a submit button and it tries to submit your form on click.
In order to continue using button and avoid this issue you need to specify type as button as shown below
<button type="button" onclick='javascript:imagech(this);' class='close_product color_dark tr_hover'><i class='fa fa-times'></i></button>

If I understand you correctly the problem is that the button is inside a form (The main asp.net form) and the click event post the form to the server. That's why you the page load occurred.
The solution Just add to the button (it doesn't matter if you are using input or button) attribute type="button".

Allow Button Submit on Click with jQuery

I have an web page that has a submit button. My submit button looks like the following:
<button type="submit" class="btn btn-primary wait-on-click">
<span>Submit</span>
</button>
When a user clicks the submit button, I want to disable the button and let the user know that something is happening. To do that, I have the following JavaScript:
$('.wait-on-click').click(function(e) {
e.preventDefault();
$(this).prop('disabled', true);
$('span', this).text('Please wait...');
});
The button disables. The text is updated. However, the submit does not actually get submitted to the server. If I comment out the body of my JavaScript function, it works fine. I do not understand how to fix this.
Thank you!

I believe your problem is with this line
e.preventDefault();
This is preventing the default behavior of the submit button, i.e., submitting! Therefore, remove it.
Update
After testing, I have found the problem.
I believe your problem is with this line
$(this).prop('disabled', true);
For some reason, this is preventing the form from submitting. Therefore, put it in the submit handler.
$('.wait-on-click').click(function(e) {
$('span', this).text('Please wait...');
});
$('form').on('submit', function() {
$('.wait-on-click').prop('disabled', true);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<form>
<input name="n" />
<button type="submit" class="btn btn-primary wait-on-click">
<span>Submit</span>
</button>
</form>

HTML Form Submit disable and change text on click

Whats the best way to disable a HTML Form Submit button when it is clicked and also change the text value on it?

Someone recommended a Javascript onclick event, but I would instead recommend using onsubmit. This will be on the form itself rather than the button, and this encompasses the real event that you want to disable the button with (submission), as well as other events that could possibly trigger submit.
document.getElementById('FormId').addEventListener('submit',function(){
var button = document.getElementById('buttonId');
button.innerText = 'Something new!';
button.disabled = true;
});
Edited my answer to include the extra changes you were looking for (text of button, disabled as well).
Edit again: lets be super cross browser!
var form = document.getElementById('FormId');
function submitForm(){
var button = document.getElementById('ButtonId');
button.innerText = 'Something new!';
button.disabled = true;
}
if(form.addEventListener){
form.addEventListener('submit',submitForm,false);
} else {
form.attachEvent('onsubmit',submitForm);
}
This covers versions of IE prior to IE9. Obviously if you have more than one form you would try to make this a little more reusable, but this is the general gist.

The best way to achieve this is via JQuery.
Let say your form submit button has an id="submitButton". So add this script to you page head and refer the place where you put your downloaded JQuery and JQuery-UI script.
<script type="text/javascript" src="Scripts/jquery-2.0.3.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui-1.10.3.js"></script>
<script>
function submitButton_OnClick() {
$("#submitButton").text("New Text");
$("#submitButton").attr("disabled", "disabled");
}
$(document).ready(function() {
$("#submitButton").click(submitButton_OnClick);
});
</script>
and this to your html
<button id="submitButton">test</button>
Check it work!

You can add an onclick event and implement a javascript function to do what you want. You can have a look here to see how to disable a button from javascript. Also take a look here for an example how to change the text of the button using javascript.

You have to use JavaScript and set on click event for example it should be:
HTML:
input type="button" value="value" id="1" onClick="OnClick(this.id)"/>
JavaScript:
function OnClick(id)
{
//some stuff...
}
Also you can use jQuery and catch on submit, for example:
$("form").on('submit',function(event)
{
event.preventDefault();
//some stuff...
}

You can use to onclick attribute to set the disabled attribute. Note that I don't cover how to reenable the button when form submission is complete.
<button type="submit" onclick="this.setAttribute('disabled', 'disabled');">Submit</button>
See the live example here at this fiddle:
http://jsfiddle.net/yinkadet/DPJGw/
I hope this helps

Here is my example of providing this functionality using Ruby on Rails and jQuery - it is an implementation example of the jQuery answer which i found very useful! (so there, haters):
<div class="col s12">
<div class="actions">
<%= f.submit nil, class: "waves-effect waves-light btn green darken-3", id: "gsb" %>
<script>
function submitButton_OnClick() {
$("#gsb").val("***CREATING***");
$("#gsb").attr("disabled", "disabled");
$("#new_group").submit();
}
$(document).ready(function() {
$("#gsb").click(submitButton_OnClick);
});
</script>
</div>
</div>

How to use jQuery to submit a form and specify which submit button to use

Suppose a form has multiple submit buttons:
...
<button type="submit" value="deletefoo">Delete Foo</button>
<button type="submit" value="deletebar">Delete Bar</button>
<button type="submit" value="Edit">Edit</button>
...
I am intercepting the clicks for only the 2 delete buttons and disabling the form submit to trigger a custom modal dialog which has OK and CANCEL buttons on it to confirm user choice. If user presses OK, I want to submit the form. If cancel, then dialog dismissed and nothing happens.
I have the first part wired up to trigger the dialog but I am at a loss on how to get the OK button in the dialog to trigger the form submit contingent on which original submit button was pressed (e.g. if Delete button pressed, I want to confirm with user they want to delete, then if so, submit the form as normal.
I've searched around and look at jQuery docs but haven't found the answer yet so I must be missing something really straightforward.
Update: I don't want to use JS confirm function. In my original question above I'm looking to use a custom modal dialog for various reasons.

Check out the JS confirm function and put it as an onclick event.
You have a nice example here.

Why not have them be regular buttons and then onclick set a variable to determine the action type and then when the form submits include this hidden variable and check that to find what you're supposed to do

First, you'd have to intercept both (all) the buttons, you could do this easily by fetching any of the submit buttons within a specific form, then you can ask your question and given you still have the current event handler, you can figure out what button was pressed and do the callback you'd like. For example:
<form id="myform">
<button type="submit" value="delete">Delete</button>
<button type="submit" value="Edit">Edit</button>
</form>
--
$(function() {
$("form#myform button[type='submit']").click(function(ev) {
ev.preventDefault();
if (confirm("you sure")) {
var action = $(ev.currentTarget).val();
console.log(action);
}
});
});
JSLint is here: http://jsfiddle.net/r48Cb/
Basically, console.log(action) will output either "delete" or "Edit" based on the original click. How you handle that value is up to you. A switch statement, a simple if block could work, but it's up to you, I don't know the scope of your app.

The window.confirm function returns a true if the user selects okay and a false if the user cancels. Using this logic you could do something like this:
<button id="delete" type="submit" value="delete">Delete</button>
<button type="submit" value="Edit">Edit</button>
var question;
$("#delete").click(function(){question=window.confirm("Are you sure?");)
if (question){
//Submit the form here
}
else{
alert("Not deleted!");
}

I think you are making it too complex, you can do something as simple as:
<form >
<input name="foo" value="foo">
<button name="sub0" value="sub0" onclick="
return window.confirm('sure?');
">submit 0</button>
<button name="sub1" value="sub1" onclick="
return window.confirm('sure?');
">submit 1</button>
</form>
If the user clicks OK on the confirm dialog, the form submits from whichever button was pressed. If not, it doesn't.

My 2c:
... (edited: removed the value parameter. buttons don't need that)
<button onclick='deleteFoo(); ' >Delete Foo</button>
<button onclick='deleteBar(); ' >Delete Bar</button>
<button onclick='allowEdit(); ' >Edit</button>
...
function deleteFoo() {
do-your-modal-whichever-way-you-want;
if confirmed,
$('#form-id').attr('action','your-action-for-delete-foo');
$('#form-id').submit();
else-just-return
}
function deleteBar() {
do-your-modal-whichever-way-you-want;
if confirmed,
$('#form-id').attr('action','your-action-for-delete-bar');
$('#form-id').submit();
else-just-return
}
function allowEdit() {
whatever
}