samedi 20 mars 2021

JQuery script to total values from input boxes, checkboxes and option values from select element

I'm trying to write what I think must be a simple JQuery script to display a running sum total of options selected by a user in an order form. I have assigned values to all the checkboxes, radio buttons and option values from my drop downs and now want to display the sum total in a div so a user can see the total.

Image of input form

Here is the form code:

<form class="input-form" name="textinput" id="input_form" method="POST">
  <table id="formtable">
    <tr id="mainrow">
      <td id="inputcell">
        <label for="propertyaddress">Covered Property Address</label>
        <input type="text" id="propertyaddress" name="propertyaddress" required>
        <label for="mailingaddress">Mailing Address (If Different)</label>
        <input type="text" id="mailingaddress" name="mailingaddress">
        <label for="buyername">Buyer Name(s)</label>
        <input type="text" id="buyername" name="buyername" required>
        <label for="buyeremail">Buyer Email Address</label><br>
        <input type="text" id="buyeremail" name="buyeremail" required><br>
        <label for="buyerphone">Buyer Phone</label><br>
        <input type="text" id="buyerphone" name="buyerphone"><br>
        <label for="titlecompany">Title Company</label><br>
        <input type="text" id="titlecompany" name="titlecompany"><br>
        <label for="escrowofficer">Escrow Officer Name</label><br>
        <input type="text" id="escrowofficer" name="escrowofficer"><br>
        <label for="escrowofficeremail">Escrow Officer Email Address</label><br>
        <input type="text" id="escrowofficeremail" name="escrowofficeremail"><br>
        <label for="escrowofficerphone">Escrow Officer Phone</label><br>
        <input type="text" id="escrowofficerphone" name="escrowofficerphone"><br>
        <label for="referringagent">Agent Name and Agency</label><br>
        <input type="text" id="referringagent" name="referringagent" required><br>
        <label for="referringagentphone">Agent Phone</label><br>
        <input type="text" id="referringagentphone" name="referringagentphone" required><br>
        <label for="referringagentemail">Agent Email Address</label><br>
        <input type="text" id="referringagentemail" name="referringagentemail" required><br>
      </td>

      <td id="radiocell">
        <table>
          <tr>
            <td class="centercolumntd">
              <label for="closingdate"><u>Closing Date</u></label><br>
              <input type="date" id="closingdate" name="closingdate" required><br><br>
              <label for="hometype"><u>Type of Home</u></label><br><br>
              <input type="radio" id="Single Family" name="hometype" value="singlefamily" required><label for="Single Family">Single Family</label><br>
              <input type="radio" id="Townhome/Condo/Mobile Home" name="hometype" value="towncondomobile"><label for="Townhome/Condo/Mobile Home">Townhome/Condo/Mobile Home</label><br>
              <select form="input_form" name="multitype" id="duplex_triplex_fourplex" value="Multi-Flat Warranty Options" class="selectboxes">
                <option value="" selected disabled hidden>Duplex/Triplex/Fourplex</option>
                <option value="duplex_gold">Duplex Gold - $720</option>
                <option value="duplex_platinum">Duplex Platinum - $855</option>
                <option value="duplex_diamond">Duplex Diamond - $945</option>
                <option value="triplex_gold">Triplex Gold - $1040</option>
                <option value="triplex_platinum">Triplex Platinum - $1235</option>
                <option value="triplex_gold">Triplex Diamond - $1365</option>
                <option value="triplex_gold">Fourplex Gold - $1360</option>
                <option value="triplex_platinum">Fourplex Platinum - $1615</option>
                <option value="triplex_gold">Fourplex Diamond - $1785</option>
              </select>


            </td>
            <td class="centercolumntd">
              <label for="warrantytype"><u>Select Warranty Type</u></label><br>
              <input type="radio" id="Gold" name="warrantytype" value="400" required><label for="Gold">Gold - $400</label><br>
              <input type="radio" id="Platinum" name="warrantytype" value="475"><label for="Platinum">Platinum - $475</label><br>
              <input type="radio" id="Diamond" name="warrantytype" value="525"><label for="Diamond">Diamond - $525</label><br>
              <input type="radio" id="Sellers" name="warrantytype" value="Sellers"><label for="Sellers" value="0">Sellers Warranty - $0</label><br>
              <select form="input_form" name="multiyear" id="multiyear" value="Multi Year Warranties" class="selectboxes">
                <option value="0" selected disabled hidden>Multi-Year Warranties</option>
                <option value="760" id="2yr_Gold">2yr. Gold Warranty - $760</option>
                <option value="1120" id="3yr_Gold">3yr. Gold Warranty - $1120</option>
                <option value="903" id="2yr_Platinum">2yr. Platinum Warranty - $903</option>
                <option value="1330" id="3yr_Platinum">3yr. Platinum Warranty - $1330</option>
                <option value="998" id="2yr_Diamond">2yr. Diamond Warranty - $998</option>
                <option value="1470" id="3yr_Diamond">3yr. Diamond Warranty - $1470</option>
              </select>
              <select form="input_form" name="newconstruction" id="newconstruction" value="New Construction Warranties" class="selectboxes">
                <option value="" selected disabled hidden>New Construction Warranties</option>
                <option value="400" id="2yr_nc_gold">2yr. Gold New Constr. - $400</option>
                <option value="520" id "3yr_nc_gold">3yr. Gold New Constr. - $520</option>
                <option value="660" id="4yr_nc_gold">4yr. Gold New Cons"tr. - $660</option>
                <option value="475" id="2yr_nc_plat">2yr. Platinum New Constr. - $475</option>
                <option value="618" id="3yr_nc_plat">3yr. Platinum New Constr. - $618</option>
                <option value="784" id="4yr_nc_plat">4yr. Platinum New Constr. - $784</option>
                <option value="525" id="2yr_nc_diam">2yr. Diamond New Constr. - $525</option>
                <option value="683" id="3yr_nc_diam">3yr. Diamond New Constr. - $683</option>
                <option value="866" id="4yr_nc_diam">4yr. Diamond New Constr. - $866</option>
              </select><br>

            </td>
          </tr>
        </table>

        <label for="warrantynotes"><u>Warranty Notes - Any instructions or information about the order or payment arrangements</u></label><br>
        <input type="text" id="notes" name="warrantynotes"><br><br>

        <label for="options"><u>Options</u></label><br>

        <div class="warranty_option_container">
          <div class="wty_option_child">
            <input type="checkbox" id="greenplus" name="optiontype[]" value="70"><label for="greenplus">$70 Green Plus</label><br>
            <input type="checkbox" id="termite" name="optiontype[]" value="75"><label for="termite">$75 Subterranean Termite Treatment</label><br>
            <input type="checkbox" id="freezer" name="optiontype[]" value="50"><label for="freezer">$50 Freezer-Standalone</label><br>
            <input type="checkbox" id="wetbar" name="optiontype[]" value="25"><label for="wetbar">$25 Wet Bar Refrigerator/2nd Fridge</label><br>
            <input type="checkbox" id="poolspa" name="optiontype[]" value="150"><label for="poolspa">$150 Pool/Spa Combo</label><br>
            <input type="checkbox" id="addpoolspa" name="optiontype[]" value="150"><label for="addpoolspa">$150 Additional Pool or Spa</label>
          </div>

          <div class="wty_option_child">
            <input type="checkbox" id="saltpool" name="optiontype[]" value="300"><label for="saltpool">$300 Salt Water Pool w/Spa Combo</label><br>
            <input type="checkbox" id="wellpump" name="optiontype[]" value="100"><label for="wellpump">$100 Well Pump</label><br>
            <input type="checkbox" id="septicpump" name="optiontype[]" value="75"><label for="septicpump">$75 Septic /Ejector Pump/Tank Pumping</label><br>
            <input type="checkbox" id="waterline" name="optiontype[]" value="90"><label for="waterline">$90 External Water Line Repair</label><br>
            <input type="checkbox" id="waterlineandsewer" name="optiontype[]" value="195"><label for="waterlineandsewer">$195 External Water/Sewer Line Repair</label><br><br>
          </div>
        </div><br>

        <div class="warranty_option_container">
          <div class="wty_option_child" id="wty_option_child1">
            <h2>Warranty Total:</h2>
          </div>
          <div class="wty_option_child" id="wty_option_child2">
            <h2></h2>
          </div>
        </div>



Aucun commentaire:

Enregistrer un commentaire