Calculations based on radio button choices

Question

I am using a MEAN stack for my web project. The front end is a simple registration form that asks for several user inputs. For example, it says "how many products are you buying?" The next question is a radio button. It says is this product large or small? My question is the following: the calculation to get the cost of the order is #products*42+(12 if large is selected) or #products*42+(0 if small is selected). How do I code this in javascript(I am using node in my backend). In other words, how do I tell my calculation code that when user selects a radio button you need to add a following number and how do I pass on the number of products typed to my formulas? I have started by assigning value=1 for small and value=2 for large radio button option. Just a general example would be helpful as I can code the details and update the formulas once I get around this problem. Thank you

Answer 1

If you want to do the calculation on the client side and the elements are in an HTML form like:

<h1>Radio Buttons</h1>
<form name="catch-radio" method="post">
  <div class="input">
    <span class="label">How many products are you buying?</span>
    <input id="product-count" type="text" name="product_count" value="0"/>
    <br/>
    <span class="label">Is this product large or small?</span>
    <br/>
    <span class="label">Large</span>
    <input type="radio" name="product-size" value="12" checked="checked"/>
    <br/>
    <span class="label">Small</span>
    <input type="radio" name="product-size" value="0"/>
  </div>
</form>
<div>
  <h2>Cost of order:</h2>
  <p id="calculation"></p>
</div>

with an input for the number of products (with an id of 'product-count') and radio buttons corresponding to the product size (named 'product-size'), you can calculate the cost and output it to an element on the page (with an id of 'calculation') by adding event handlers to the form fields to register a change in the form, and then from those handlers calling a function to perform the calculation and update the page accordingly like so:

// Cost is the count of products purchased multipled by 42 then added
// to 12 in the case that the product is large, and zero in the case
// that the product is small
function calculate_cost() {
    let count = parseInt(document.getElementById('product-count').value);
    if (count > 0) {
        let size = 0;
        for (var i = 0 ; i < document.getElementsByName('product-size').length; i++) {
            if (document.getElementsByName('product-size')[i].checked) {
                    size = parseInt( document.getElementsByName('product-size')[i].value);
                    break;
            }
        }

        let cost = count * 42 + size
        document.getElementById('calculation').innerHTML = cost;
    }
}

// handlers for form input change
// call calculate_cost() on change
// note that the text input is an on-change event but for radio buttons
// an onclick handler is needed for each button
for (var i = 0 ; i < document.getElementsByName('product-size').length; i++) {
    document.getElementsByName('product-size')[i].onclick = function() { 
        calculate_cost(); 
    }
}
document.getElementById('product-count').onchange = function() { 
    calculate_cost(); 
}

I put up a quick demo of this on CodePen here: http://codepen.io/P1xt/pen/yOKqXP/

The particularly interesting bit is that for the radio buttons, you need to add a click handler for each button separately (and it must be a click not a change handler, and to figure out which radio is currently selected, you need to explicitly check each one to see if it's 'checked'.

Note: If you're looking to do your calculations on the server-side, you'd need to submit the form, then collect the product-count and product-size from the submitted form elements in order to perform the calculation.

Answer 2

为什么不使用0和12作为单选按钮的值，那么后端可以只添加选定的值？