在单选按钮选择上显示表，然后将单选按钮值传递到表中的字段，选项添加更多，然后附加到现有表

Question

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:

1. Select Product, product selection is replaced by table showing product selection name, checkbox, and quantity selector.
2. Option to add another product. If clicked, show product selection, then the process is repeated, adding new selections to table.
3. The ability to remove previously selected items.

Any takers?

Here's a fiddle

    // 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!

Answer 1

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'

Here's a fiddle

Happy coding!