dimanche 8 novembre 2015

A price calculator using radio and check boxes

I'm creating an HTML catalog that lets them select what they want and then emails the item code, item name, their prices and the total price to me. I want the user to be able to check what they want and then they can click the submit button to see their total price, and if they change their choices and click submit again, the new price will be displayed. I don't know how to do the JS for this.

Here is what I have:

<form method="" action="" name="catalog" id="" class="">
 <table>
  <tr><th>Item Code</th><th><br></th><th>Item Name</th><th>Price</th><th>Sample</th></tr>

  <tr>
   <td>65A3</td>    
   <td><input type="checkbox" name="item1" id="" class=""></td>
   <td>Item 1</td>
   <td>$5.00</td>
   <td><a onclick="PopUpBasic ('[add-link-here]');">here</a></td>
  </tr>

  <tr>
   <td>814R</td>
   <td><input type="checkbox" name="item2" id="" class=""></td>
   <td>Item 2</td>
   <td>$10.00</td>
   <td><a onclick="PopUpBasic ('[add-link-here]');">here</a></td>
  </tr>

  <tr>
   <td>942Q</td>
   <td><input type="checkbox" name="item3" id="" class=""></td>
   <td>Item 3</td>
   <td>$15.00</td>
   <td><a onclick="PopUpBasic ('[add-link-here]');">here</a></td>
  </tr>

  <tr>
   <td>1138</td>
   <td>
    <input type="radio" name="item4" id="" class=""><br>
    <input type="radio" name="item4" id="" class=""><br>
    <input type="radio" name="item4" id="" class="">
   </td>
   <td>Item 4a<br>Item 4b<br>Item 4c</td>
   <td>$5.00<br>$6.00<br>$7.00</td>
   <td><a onclick="PopUpBasic ('[add-link-here]');">here</a></td>
 </table>

 <br>

 <input type="submit" id="" class="" name="" value="Calculate your price!!!"><br>
 The total price is: <input type="text" id="" class="" name="" size="5" readonly><br><br>

 <input type="reset" id="" class="" name="" value="Start over">
</form>




Aucun commentaire:

Enregistrer un commentaire