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>
Related
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>
I have a button in the main page which on clicking opens a modal. I have a form in the modal with a button which, on submitting closes the modal and returns to the main page. I want to change the html button which is on the main page after closing the modal to plain text. How would I replace the main button in main page after the modal is closed ?
function submitForm() {
alert('yes');
var button = document.getElementById('mainButton');
button.style.display = 'none';
}
<body>
<button id="mainButton"> Click here </button>
<div class="modal">
<form onsubmit="submitForm()">
<input type="text">
<button> Done </button>
</form>
</div>
</body>
I tried the following in submitForm function:
removing the button like this:
document.getElementById('mainButton').innerHTML = '';
Also tried:
document.getElementById('mainButton').style.display = 'none'
You are working with a submit button (that's the default type of button you get with <button>). So, when you click it, the onsubmit event handler fires and the form submits, which results in the current page being unloaded, so trying to display anything else isn't going to work.
In this scenario, you'd need the form to redirect to another page that has the content you want on it (that is done by configuring the form element's action attribute.
If you don't really need to submit data to a server, then you can change the type of button you have to a regular button and change the event handler to handle just a click event and then just take what you are already doing to the next level.
In addition to hiding what you no longer want to see with display:none, you can show something that is set up ahead of time and defaulted to display:none and then change it to display:block when it's time to show it.
function submitForm() {
alert('yes');
var button = document.getElementById('mainButton');
button.style.display = 'none';
// Remove the class that hides the element that you want to now see
document.querySelector(".afterClick").classList.remove("afterClick");
}
.afterClick { display:none; } /* Defaults to hidden */
<body>
<button id="mainButton"> Click here </button>
<div class="afterClick">Thanks!</div>
<div class="modal">
<form onclick="submitForm()">
<input type="text">
<button type="button"> Done </button>
</form>
</div>
</body>
You could do something like this to replace your button with a div containing its text.
var mainButton = document.getElementById('mainButton');
var buttonText = mainButton.textContent;
var newDiv = document.createElement('div');
newDiv.textContent = buttonText;
document.body.removeChild(mainButton);
document.body.appendChild(newDiv);
I'm trying to edit the url in a button onclick event. Below is the source of the button and the text I'd like to strip from the onclick portion. The end goal is to have a Tampermonkey script that allows me to easily download stp files without manually editing a link after clicking it.
Remove
"fusion360://command=insert&file=" +
From
<button type='button' class="event btn btn-default btn-lg btn-block" onclick='window.location.href = "fusion360://command=insert&file=" + encodeURIComponent("https://assets.sas-automation.com/cad/SWM%203.stp");' data-category="Product Sidebar Right" data-action="Button Click" data-label="Opened CAD File in Fusion" aria-label="button">Open in Fusion360</button>
There are many ways to achieve this, here is one that came to my mind:
Use a getElementsByClassName (or any other selector function) to grab the button
Save the onclick attribute value (which is of text type) to a variable
Find the given substring and replace it with an empty string
Save the result back to the button's onclick attribute.
NOTE: your solution has a gotcha: in order to get a proper redirect on button click, you have to remove the method encodeURIComponent since the url appears to be encoded already.
And you should be good to go. You can play with the snippet.
var button = document.getElementsByClassName('event btn btn-default btn-lg btn-block')[0];
var onClick = button.getAttribute('onclick')
.replace(/"fusion360:\/\/command=insert&file="\s*\+\s/, '')
.replace('encodeURIComponent(', '')
.replace(');', '');
button.setAttribute('onclick', onClick);
<button type='button' class="event btn btn-default btn-lg btn-block" onclick='window.location.href = "fusion360://command=insert&file=" + encodeURIComponent("https://assets.sas-automation.com/cad/SWM%203.stp");'
data-category="Product Sidebar Right" data-action="Button Click" data-label="Opened CAD File in Fusion" aria-label="button">Open in Fusion360</button>
I have two buttons (describing the type of delivery). Once selected I have to press another button to proceed . Is there any way how I can proceed automatically after selection?
Here is my code before selection:
<button type="button" class="button btn-delivery-method" data-delivery-method="s_method_free">
<span class="btn-delivery-method__label">Select</span>
</button>
Here is my code after selection:
<button type="button" class="button btn-delivery-method delivery-method__selected" data-delivery-method="s_method_free">
<span class="btn-delivery-method__label">Select</span>
</button>
Here is my third button to proceed:
<button type="button" class="button btn-large--alt" onclick="shippingMethod.save()">
Continue
</button>
Thanks
You can add the onclick event to the first two buttons.
Btw, what does the code do after pressing either of the first two buttons?
Bind a click event to the first button as well:
$(".button.btn-delivery-method").click(function() {
// check if the delivery has been selected
if($(this).hasClass("delivery-method__selected")) {
// either call shippigMethod.save(); here
//trigger the button click
$(".button.btn-large--alt").trigger("click");
}
});
This will trigger the button only when the delivery is selected
if($(this).hasClass("delivery-method__selected")) {
$(".button.btn-large--alt").trigger("click");
}
It would be nice to have the Id from your second button just to avoid any conflicts with other buttons.
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
}