Note that there are some explanatory texts on larger screens.

plurals
  1. POCalculation of radio buttons
    text
    copied!<p>I have a set of radio buttons that are for certain products. I am wanting to be able to have a total box at the bottom of the form which add's the total up of each radio buttons that is clicked. I know this can be done via the Value of the radio button and then using some javascript. </p> <p>The problem is i dont think i can use that method as i need the values to be how they are in the code below so when i get sent the email from the form submit i can see what options the user has choosen.</p> <p>Any suggestions without using javascript or using the values?</p> <pre><code>&lt;input class="radio" type="radio" name="keystage1yr1" value="Paper" /&gt; &lt;span&gt;&amp;#163;25&lt;/span&gt; &lt;input class="radio" type="radio" name="keystage1yr1" value="CD" /&gt; &lt;span&gt;&amp;#163;25 excl VAT&lt;/span&gt; &lt;input class="radio" type="radio" name="keystage1yr1" value="Paper &amp; CD" /&gt; &lt;span&gt;&amp;#163;40 excl VAT&lt;/span&gt; &lt;input class="radio" type="radio" name="keystage1yr2" value="Paper" /&gt; &lt;span&gt;&amp;#163;25&lt;/span&gt; &lt;input class="radio" type="radio" name="keystage1yr2" value="CD" /&gt; &lt;span&gt;&amp;#163;25 excl VAT&lt;/span&gt; &lt;input class="radio" type="radio" name="keystage1yr2" value="Paper &amp; CD" /&gt; &lt;span&gt;&amp;#163;40 excl VAT&lt;/span&gt; &lt;input class="radio" type="radio" name="keystage1save" value="Paper" /&gt; &lt;span&gt;&amp;#163;47.50&lt;/span&gt; &lt;input class="radio" type="radio" name="keystage1save" value="CD" /&gt; &lt;span&gt;&amp;#163;47.50 excl VAT&lt;/span&gt; &lt;input class="radio" type="radio" name="keystage1save" value="Paper &amp; CD" /&gt; &lt;span&gt;&amp;#163;75 excl&lt;/span&gt; </code></pre> <p>Is it possible to add something like <code>price="20"</code> etc for each radio button and then add these up?</p> <p><strong>EDIT</strong> </p> <p>@Jamiec answer worked perfectly fine adding a extra "data-price" felid and totaling up using some javascript.</p> <p>Ok so after playing around with Jamiec code i realised that it add's up the total of radio buttons that have been checked but are no longer checked. As i also have some javascript which does the following:</p> <p>Only one radio button from <code>name="keystage1yr1"</code> can be selected Only one radio button from <code>name="keystage1yr2"</code> can be selected </p> <p>But if any radio button from <code>name="keystage1save"</code> is selected then any radio button from <code>name="keystage1yr1"</code> and <code>name="keystage1yr2"</code> that has been selected will be deselected.</p> <p>The problem is that with the javascript supplied by @Jamiec the total will still have the values of the <code>name="keystage1yr1"</code> and <code>name="keystage1yr2"</code> if <code>name="keystage1save"</code> is selected. I need it to just calculate the total from the radio buttons that are <strong>selected</strong></p> <p><strong>EDIT2</strong> @Jamiec updated answer to not store the values in cache fixed the problem</p>
 

Querying!

 
Guidance

SQuiL has stopped working due to an internal error.

If you are curious you may find further information in the browser console, which is accessible through the devtools (F12).

Reload