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>
Related
How to go back without page refreshing.Firstly, I am getting data from AJAX dynamically.but when I click Back button it takes me to the main location where it actually started.
So here's the scenario:
3 Locations
There is a button named Deposit in deposit.php when I press it.It took me to location where there are more buttons,like pay with credit card, pay with debit card etc and when I click on pay with credit card, it takes me to the location pay.php..So far everything's fine...
Here's the problem occurs
whenever I press back, it takes me back to deposit.php instead of pay.php
deposit.php
<input type="submit" class='btn btn-primary btn-large' name="send" id="send" value="Deposit" /><br/>
pay.php
<a id='credit'>Pay with credit card</a>
<a id='debit' href='#'>Pay with credit card</a>
Here one thing to notice:
There are 2 anchor tag.one is without href attribute and one is with href='#'attribute
Talking about without href attribute, when I press the back button it takes me to the deposit.php(completey back, where it all started)
Talking about with href attribute, when I press the pay with credit card button.url changes to /pay.php#.When I first press the back button, it doesn't go back..if I press it twice, it goes to completely back(deposit.php)...
paying.php
should I put back button in here.but can't figure out the scenario of back button
So My question is:
what should I do that whenever I press back button in chrome, it should take me back to pay.php instead of deposit.php
ps: I am using ajax jquery and page is not refreshing anywhere.it
Add this in your input or anchor element:
<button value="Back" type="Button" onclick="history.go(-1);">Go back</button>
Currently, I'm doing an application and I need login to this one particular website. Basically, I need to make this button click using a javascript but I have no idea how to.
This is the button code I retrieved from the website:
<button type="submit" class="uk-width-1-1 uk-button uk-button-primary uk-button-large">Sign in</button>
Thank you for your help in advance
You can click on the button programmatically, in case of pure javascript :
(function(){document.querySelector('button[type="submit"]').click();})()
In case of Android JS Interface :
webView.loadUrl("javascript:(function(){"+
"l=document.querySelector('button[type=\"submit\"]');"+
"e=document.createEvent('HTMLEvents');"+
"e.initEvent('click',true,true);"+
"l.dispatchEvent(e);"+
"})()");
The general way to have button click events is to use something like jQuery. For example lets set the button to have an ID
<button id="my-button" type="submit" class="uk-width-1-1 uk-button uk-button primary uk-button-large">Sign in</button>
Then we would apply a click event to it with jQuery
$('#my-button').click(function(){alert('button has been clicked');})
Instead of the alert you could put whatever code you want in there :D
Example: Codepen example
EDIT: Example for a class:
Example for a class
(Note that we use a "." instead of "#" in the call)
-Kyle
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.
I'm working with html and javascript. My problems is, in one webpage a show a plot and a few button. When the user press any of this button I need show 3 or 4 options but in the same page without switching pages.
Below is my code
<form action="MyPage">
<button type="submit" value="More Options">
</form>
redirect to an other page.What I can do?
First of all, get rid of type="submit". That's what's causing the page to do stuff you don't want. The second thing is to add an onclick handler. It should return false to avoid behavior like "submit". The variable 'this' will pass the button to your function, which you might need in that code. Then fill in the body of addMoreStuff() with your code to, well, add more stuff!
<form action="MyPage">
<button onclick="addMoreStuff(this); return false; ">More Options</button>
</form>
<script type="text/javascript">
function addMoreStuff(button) {
/* your code here */
}
</script>
Drop the form (use the button alone), and look into jQuery. It's extremely easy to use, and it'll help you quickly build code your application.
HTML
<button type="submit" value="More Options" id="more">
JavaScript (jQuery)
// run "add_options" when someone clicks on the button
jQuery('button#more').on('click', add_options)
function add_options() {
//code here to add more options
}
I am using knockout js and bootstrap. I have a list of users with a delete button on each row.
I also have a bootstrap modal dialog that has a confirmation message whether to delete the user or not.
I have a click binding on the delete button that can remove the user from the model. How do i change it so that the deletion happens after the user has confirmed.
I have searched several examples and they all suggest to use custom bindings, and the closest i found was this fiddle example
http://jsfiddle.net/snaptopixel/vDZQk/
The one problem with this example is, it uses a pre-defined item from the model in the modal popup, what i want is to automatically bind the item that was deleted by the user and show the user name and other properties in the modal window and ask for confirmation.
Here is my modal dialog
<div class="modal-body">
<div class="well">
<p>By clicking 'Yes', you will remove the User 'foo' from the system. This action cannot be undone. To cancel this action, click 'No'. </p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary">Yes</button>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
For example...
The modal window will say "Are you sure you want to delete User 'foo'? I would like to have access to the selected User inside the modal window.
Thanks for your help
Set a click binding on the 'Yes' button to the function that actually does the deletion, and set the click binding on the delete button to a function that displays the modal. You'll probably want that function to store the current item in an observable (itemToDelete or something like that) so that the actual delete function knows what to delete.