I want to detect if a button has been pressed on a document. That means I don't want to put in document.getElementById("ID").onclick for each button. In other words, i want to detect if ANY button has been pressed on the document. If a button is pressed, get that button object, get it's textContent and that's all there is to it.
Have you tried this?
let buttons = document.querySelectorAll(".button");
buttons.forEach(btn=>{
btn.addEventListener("click",function(e){
btn.innerText = "CLICKED BUTTON"
});
});
<button class="button">1</button>
<button class="button">2</button>
<button class="button">3</button>
<button class="button">4</button>
Hello Stackoverflow community,
Is there any way to automatically click a "Submit" type button once a type "Button" is clicked?
Example:
Using:
-Wordpress
-Woocommerce
-WHMCA (for custom forms)
-Html/Javascript
I am retrieving a product from the backend once the customer clicks on our custom Add to cart button but also need the product information from the current page the customer is making the purchase on. Because they are two different types of button thought the best way was to trigger Button 2 automatically once button one is clicked. Please need help in this one :)
Button to be clicked by user:
<button type="button" onclick="window.location.href='https://example.com/?add-to-cart=375'">Buton 1</button>
Button to be automatically clicked after Button 1 is clicked.
<form>
<button type="submit" name="add-to-cart" value="363" class="1">Button 2</button>
</form>
Look forward for your advice!
Best regards,
Jaso
p.s. If there is a way to have both types inside one button, that would work to! Thank you!
Both types inside one button I can think of appending both values (375 and 363) to the first button like in:
<button type="button" onclick="window.location.href='https://example.com/?add-to-cart1=375&add-to-cart2=363'">Buton 1</button>
Html code
<button type="button" class="btn btn-default btn-sm pull-right" ng-click="move(1)" tabindex="-1"><i class="glyphicon glyphicon-chevron-right"></i></button>
In angular protractor, is there any way to click on particular button if multiple buttons are having same classes. Please help me out on this.
you can distinguish the button by the button text. Like yiu can grab the element (button) by button text and perform your desired action
<button>Save</button>
element(by.buttonText('Save'));
You can click on the button by :-
By Id :
element(by.id('id')).click().then(function() {
});
By xpath :
element(by.xpath('//div[#id="ui-datepicker-div"]//a[#title="Next"]')).click(); // whatever your xpath is
I have a form with two states: editing and visible. When you click an icon to edit the form two buttons (acting like submit) at the bottom appear to save or cancel. When I click them the form is updated (or cancelled) and the buttons disappear. The problem is when I re-open the form to edit it (and the buttons are visible again) the last one clicked still has it's hover state applied in Chrome.
<div>
<div class="col-xs-5">
<button class="btn btn-primary pull-right" ng-click="save(true)">Save</button>
</div>
<div class="col-xs-5 cancel-btn">
<button class="btn btn-primary pull-left" ng-click="cancel()">Cancel</button>
</div>
</div>
For simplicity here is just the cancel function...
$scope.cancel = function() {
//set a flag for angular to hide/show editing mode in HTML
$scope.editMode = false;
};
As mentionned in an earlier comment (runTarm), this is because of the active/focused state of the buttons.
To change it :
.btn-primary:active,
.btn-primary:focus {
// place your 'default' styling over here
}
You will probably need to be more specific with your declaration because what I posted will override all the items with class btn-primary.
Hope this helps !
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
}