I have a table with buttons. My goal is whenever I click a button, it will disable. My problem is when I click the button, it only disable the first button in the column. What I want is to disable only the specific button that I have click. I used bootstrap for the table and buttons.
Here is my button:
<td>
<input type="button" onclick="checker()" href="php/doneProblem.php?problemID=<?= $rows['problemID'] ?>" id="btn-done" class="btn btn-primary" value="Mark as Done" />
</td>
Here's how I disable the button:
<script>
function checker() {
var result = confirm('Are you sure to mark this as done?');
if (result == false) {
event.preventDefault();
} else {
$('#btn-done').attr('disabled', true);
$('#btn-done').addClass('disabled');
}
}
</script>
I tried using class instead of id but it disable all the buttons when I click a single button.
Instead of trying to target the item by ID you will want to target the item via event.target. This gives you reference to the specific button that was clicked. You can read more about event.target here.
Related
My goal is to replace a button with another button, but I am running into some issues. I am able to trigger the first button click and I am able to cause an alert with the second button click, but for some reason when I try to trigger the first button click in the click event handler of the second button, it doesn't work. What am I doing wrong? For some context, I'm doing this in Powerapps Portals by adding a Content Snippet.
$(window).load(function() {
//Code to Add Custom 'Register' Button (and Hide the original one- currently commented out)
$('#SubmitButton').after('<input type="submit" name="ctl00$ctl00$ContentContainer$MainContent$MainContent$mySubmitButton" value="Register" id="mySubmitButton" class="btn btn-primary">');
//$('#SubmitButton').hide(); *THIS WORKS*
//$("#SubmitButton").click(); *THIS ALSO WORKS*
$("#mySubmitButton").click(function()
{
//window.alert('yes!'); *THIS WORKS*
$("#SubmitButton").click(); // *THIS DOES NOT WORK*
});
});
You need to prevent the default action to stop the form from submitting when the button is clicked.
$("#mySubmitButton").click(function(e){
e.preventDefault();
$("#SubmitButton").click();
});
Alternatively, you can set the button's type to "button" so clicking it does not submit the form by default.
$('#SubmitButton').after('<input type="button" name="ctl00$ctl00$ContentContainer$MainContent$MainContent$mySubmitButton" value="Register" id="mySubmitButton" class="btn btn-primary">');
I have two buttons and one input. The input takes the value of the clicked button. Both buttons have the same class, have one click (Vue) for add active class, and second click. On click take the button's value and append it in the input.
The problem with which I am stuck is that the function for taking the value works after the second triggered click.
I've tried with dblclick and to delete the click for active class - but nothing changed. Can someone give a hand with this? Thank you.
Vue project (js function imported in methods)
<div class="col-md-12 buttons-wrapper" id="direction">
<button id="buy-button" value="1" name="Direction1" class="button btn buy" #click="selected = 1" :class="{active:selected == 1}" v-on:click.capture="buttonDirectionValue">Buy</button>
<button id="sell-button" value="2" name="Direction2" class="button btn sell" #click="selected = 2" :class="{active:selected == 2}" v-on:click.capture="buttonDirectionValue">Sell</button>
<input id="inputDirection" name="Direction" type="text" placeholder="" class="form-control input-md" style="display: block" readonly></input>
</div>
buttonDirectionValue() {
event.preventDefault();
$("#direction button").click(function() {
$("#inputDirection").val($(this).val());
});
buttonDirectionValue() {
event.preventDefault();
$("#direction button").trigger("click");
});
$("#direction button").click(function() {
$("#inputDirection").val($(this).val());
});
Above should be your code. Correction is to place the .click outside of buttonDirectionValue() function.
If you place the .click inside of buttonDirectionValue() function, the .click will only be registered when the button is clicked for the first time and triggered on the second click.
While placing it outside will bind the .click on page load and trigger the click on buttonDirectionValue() function call.
Hope this helps
The problem obviously is that you bind the click event after the button click
you can bind the click event right after page loads like that:
$(document).ready(function(){
$("#direction button").click(function() {
$("#inputDirection").val($(this).val());
}
});
//edit1
you can also remove the v-on:click.capture="buttonDirectionValue"
and use this code to bind click events for both buttons
$(document).ready(function(){
$('button.buy, button.sell').click(function() {
$("#inputDirection").val($(this).val());
}
});
What I am trying to do is to prevent the user from changing the radio button until they confirm that they want to leave the "page". The radio button should not change to the one they clicked until after they click on the button in the popup to say "ok leave page".
This call handles changing the page to the selected radio button, and everything else. This should only be fired if the button in the popup is clicked:
$("body").on("change", "input[type='radio'][name='quote-type']:checked", function(e){
//Change the radio button and everything else
});
This handles the popup and everything:
$(function(){
var LEAVEPAGE;
//Radio button changes, so show a popup
$("body").on("change", ".coverage-options-wrapper li:not(.custom) input[type='radio'][name='quote-type']", function(e){
e.preventDefault();
e.stopPropagation();
LEAVEPAGE = e.currentTarget;
//Show the popup to ask if you are sure you want to switch radio buttons
});
//Click the button in the popup to leave the page, so change the originally clicked radio button.
$("body").unbind("click").on("click", ".leave-page", function(){
$(LEAVEPAGE).prop("checked", true).trigger("change"); //triggers change for the first call to be run, to actually change the page
});
});
What is happening is the radio button is just being changed regardless, it shows the popup too, however it isn't waiting for a response from the popup. It just switches anyways. Also, when I click on the .leave-page button, it triggers change (it's suppose to be so that it will load the new page attributed to that button), however it ALSO triggers the popup again (as they both use the change event).
I am very stumped.
DEMO
JS
var optionTarget;
$(":radio").click(function(e){
e.preventDefault();
optionTarget = e.target;
$("#leave-dialog").show();
});
$("#leave-dialog button").click(function(){
$("#leave-dialog").hide();
});
$("#leave-btn").click(function(){
$(optionTarget).prop('checked', true);
});
HTML
<input type="radio" name="bleh" value="yes" checked>option 1
<input type="radio" name="bleh" value="no">option 2
<div id="leave-dialog">Are you sure?
<br/>
<button id="leave-btn">Yes</button>
<button>No</button>
</div>
I am showing and hiding a div based on some options selection.
Have a dropdown list with options 'enabled and disabled'.once user selects enabled needs to display the div else Hide the div.
Based on dropdown option selection Hide/Show div is working fine, but
If Disabled is the configured value. when I load the page , div will be hidden(working fine) , Then I will select Enabled, then div shows but ....... When I click on reset option,
Dropdown option is getting back to Disabled but Div section which should be hiden is not hiding
Here I have my code like this, protection switch is the wtform field recieved from flask
{{form.protection_switch}}
<div align="center" >
<button class="btn btn-info btn-sm" type="submit"><i class="icon-ok bigger-110"></i>Submit</button>
<button class="btn btn-sm" type="reset"><i class="icon-undo bigger-110"></i>Reset</button>
</div>
Section should be hide or display
<div id="protection_data"></br>
<table id="grid-table"></table>
<div id="grid-pager"></div>
</div>
Jquery code
function protection_selected() {
if ($('#protection_switch option:selected').val() == '0') {
$('#protection_data').hide();
} else if ($('#protection_switch option:selected').val() == '1') {
$('#protection_data').show();
}
}
$(document).ready(function() {
$('#protection_switch').change(function() {
protection_selected();
});
});
window.onload = protection_selected;
Listen for the click on the reset.
function protection_selected() {
var isVisible = $('#protection_switch').val() == '1';
$('#protection_data').toggle(isVisible);
}
$(function(){ //document ready
$("#protection_switch") //get your select element
.on("change", protection_selected) //listen for change event
.change(); //trigger the change event so defaults can be set
$('input:reset').on("click", function(e){ //bind click event to reset button
this.form.reset(); //force reset so we guarantee it has finished running
protection_selected(); //run the update code
e.preventDefault(); //cancel the click since we already ran the reset code
});
});
The pain in the rear thing about reset is you can detect when it has called, but there is no event for after it has successfully run. That is why I captured the click, run the reset on the form, called your function, and cancelled the click. Other way is to just use a delay inside and than call the function, but that can lead to a race condition.
Because we use orbeon xforms, we don't know the id of the button tag.
What we would like is the Enter key to trigger a button that contains a certain string value.
If my form contains a Check button like so:
<button id"random">Check</button>
I would like my javascript button to trigger it with something like:
find the button that has value "Check" and click it when Enter is pressed.
Updated code, since I didn't see your markup (which contained <button> instead of <input>)
I would use JQuery here since selecting the buttons you are looking for could be more difficult using Pure JS only.
Something like this should work:
$(
function(){
$(document).keydown(function(){
if (event.keyCode == '13') {
event.preventDefault();//stop what normally happens..
//..like submitting a form maybe
//$("input[type='submit'][value='Check']").click();
$("button").each(function(i){
if($(this).text() == "Check")
{
$(this).click();
}
})
}
});
}
);
With markup like this:
<button id="random" onclick="alert('clicked 0');">Check</button>
<button id="random2" onclick="alert('clicked 1');">Something else</button>
<button id="random3" onclick="alert('clicked 2');">Third Button</button>
See Demo : http://jsfiddle.net/giddygeek/Caxae/3/
(Click/Focus on the result pane and hit the Enter key)