First-time poster...please don't beat me up too bad. I'm not even sure how all of this works, but here goes. I'm basically trying to recreate the form located here: http://yeticustomshop.com/get-quote I have the product selection showing and the table showing as of right now.
Needed user experience:
Any takers?
// Get all the product radio buttons and loop them
var products = document.getElementsByName('product');
for (var i = products.length; i--;) {
// add an event listener to do stuff when one of them is clicked
products[i].addEventListener("click", function() {
// get the value of the clicked button
var cup = this.value;
// put the value in the input box
document.getElementById('yourSelection').value = cup;
// hide the radio buttons and show the table
document.getElementById("cupDesc").style.display = "block";
document.getElementById("cupSelect").style.display = "none";
});
}
Thanks to user " I wrestled a bear once " for the help!
Here you go. Please pay attention to the comments for the explanation.
// Get all the product radio buttons and loop them
var products = document.getElementsByName('product');
for (var i = products.length; i--;) {
// add an event listener to do stuff when one of them is clicked
products[i].addEventListener("click", function() {
// get the value of the clicked button
var cup = this.value;
// put the value in the input box
document.getElementById('yourSelection').value = cup;
// hide the radio buttons and show the table
document.getElementById("cupDesc").style.display = "block";
document.getElementById("cupSelect").style.display = "none";
});
}
Note that you should hide the selection table until the radio button is clicked with style='display:none'
Happy coding!
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.