Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 14 of 14
  1. #1
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Question drop down selections to pass value to display total but refresh on change

    I am brand new at coding. I am trying to create a drop down selection and pass the value which would be the dollar amount to a field that displays the total.

    My problem is that I have it summing each drop down menu change rather than it changing to the value of the selected amount. If it defaults to the first selection of 50 but then select the 100 choice it calculates and displays 150 and continues increasing the amount selected by the drop down. How do I get the code to only pass the one amount selected to display the total in a field called amount. This is the code I've started(there are additional fields in my form along with a submit button). So I just looking for this piece to display the value in a total field called amount.



    <p class="MsoNormal">Please select how many sponsorship's you would like to purchase (@$50.00 each).<br></p>

    <script type="text/javascript" language="Javascript">
    var sum = 0;
    function OnChange(value){
    sum += new Number(value);
    document.getElementById('result').innerHTML = sum;
    }
    </script>


    <select name="select1" onchange="OnChange(this.value)">
    <option value="50">1 - $50</option>
    <option value="100">2 - $100</option>
    <option value="150">3 - $150</option>
    <option value="200">4 - $200</option>
    <option value="250">5 - $250</option>
    </select>

    <div id="result"></div>

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,208
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Ummm...by *NOT* running a SUM!

    If you didn't WANT a sum, why are you using one?
    Code:
    <script type="text/javascript" language="Javascript">
    function OnChange(value){
        document.getElementById('result').innerHTML = value;
    }
    </script>
    But you could have also simply done:
    Code:
    <select name="select1" onchange="document.getElementById('result').innerHTML = this.value;">
    with no need for the function code.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,208
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Also, if the user *WANTS* to choose only 1, then in order to trigger the onchange, he has to first choose some other quantity and then choose 1.

    Better to start with no choice:
    Code:
    <select name="select1" onchange="document.getElementById('result').innerHTML = this.value;">
    <option value="0">--please choose--</option>
    <option value="50">1 - $50</option>
    <option value="100">2 - $100</option>
    <option value="150">3 - $150</option>
    <option value="200">4 - $200</option>
    <option value="250">5 - $250</option>
    </select>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    christyann (11-06-2012)

  • #4
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    Updated code....

    Thanks for all your help. The last thing I was attempting to do was to add in a read-only total to my billing container field called "Amount" which populates with the users selection.



    Code:
    <span class="contentYellowTitle"><br><br>Sponsorship Details</span>
    
    
    <p class="MsoNormal">Please select how many sponsorship's  you would like to purchase (@$50.00 each).<br>
    <label>
    </label></p>
    
        <select name=”select1” onchange=”document.getElementById (‘result’).innerHTML = this.value;”>
            <select name="select1" onchange="this.form.submit()">
                <option value="0">--please choose--</option>         
                <option value="50">1 - $50</option>
                <option value="100">2 - $100</option>
                <option value="150">3 - $150</option>
                <option value="200">4 - $200</option>
                <option value="250">5 - $250</option>
    </select>
    
    
    
    <table cellpadding="0" cellspacing="0"><tbody><tr><td colspan="2"><span class="contentYellowTitle"><br>Payment and Rate Information</span></td></tr><tr id="billingNameContainer">
    <td class="label">Billing Name</td>
    <td class="field">
    <input type="text" id="BillingName" name="BillingName" value="">
    <span id="ValidateBillingName" class="field-validation-error"></span></td>
    </tr>
    <tr id="billingAddressContainer">
    <td class="label">Billing Address</td>
    <td class="field">
    <input type="text" id="BillingAddress" name="BillingAddress" value="">
    <span id="ValidateBillingAddress" class="field-validation-error"></span></td>
    </tr>
    <tr id="billingCityContainer">
    <td class="label">Billing City</td>
    <td class="field">
    <input type="text" id="BillingCity" name="BillingCity" value="">
    <span id="ValidateBillingCity" class="field-validation-error"></span></td>
    </tr>
    <tr id="billingStateContainer">
    <td class="label">Billing State</td>
    <td class="field">
    <select id="BillingState" name="BillingState">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="DC">District Of Columbia</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="HI">Hawaii</option>
    <option value="ID">Idaho</option>
    <option value="IL">Illinois</option>
    <option value="IN">Indiana</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NV">Nevada</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NM">New Mexico</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="ND">North Dakota</option>
    <option value="OH">Ohio</option>
    <option value="OK">Oklahoma</option>
    <option value="OR">Oregon</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="SD">South Dakota</option>
    <option value="TN">Tennessee</option>
    <option value="TX">Texas</option>
    <option value="UT">Utah</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WA">Washington</option>
    <option value="WV">West Virginia</option>
    <option value="WI">Wisconsin</option>
    <option value="WY">Wyoming</option>
    <option value="Canada">---Canada---</option>
    <option value="AB">Alberta</option>
    <option value="BC">British Columbia</option>
    <option value="MB">Manitoba</option>
    <option value="NB">New Brunswick</option>
    <option value="NL">Newfoundland and Labrador</option>
    <option value="NT">Northwest Territories</option>
    <option value="NS">Nova Scotia</option>
    <option value="NU">Nunavut</option>
    <option value="ON">Ontario</option>
    <option value="PE">Prince Edward Island</option>
    <option value="QC">Quebec</option>
    <option value="SK">Saskatchewan</option>
    <option value="YT">Yukon</option>
    <option value="Other">---Other---</option>
    <option value="International">International</option>
    </select>
    <span id="ValidateBillingState" class="field-validation-error"></span></td>
    </tr>
    <tr id="billingZipContainer">
    <td class="label">Billing ZIP Code</td>
    <td class="field">
    <input type="text" id="BillingZip" name="BillingZip" value="">
    <span id="ValidateBillingZip" class="field-validation-error"></span></td>
    </tr>
    <tr id="billingCountryContainer">
    <td class="label">Billing Country</td>
    <td class="field">
    <select id="BillingCountry" name="BillingCountry">
    <option value="United States">United States</option>
    <option value="APO/FPO">APO/FPO</option>
    <option value="Canada">Canada</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="American Samoa">American Samoa</option>
    <option value="Andorra">Andorra</option>
    <option value="Angola">Angola</option>
    <option value="Anguilla">Anguilla</option>
    <option value="Antigua and Barbuda">Antigua and Barbuda</option>
    <option value="Argentina">Argentina</option>
    <option value="Armenia">Armenia</option>
    <option value="Aruba">Aruba</option>
    <option value="Australia">Australia</option>
    <option value="Austria">Austria</option>
    <option value="Azerbaijan Republic">Azerbaijan Republic</option>
    <option value="Bahamas">Bahamas</option>
    <option value="Bahrain">Bahrain</option>
    <option value="Bangladesh">Bangladesh</option>
    <option value="Barbados">Barbados</option>
    <option value="Belarus">Belarus</option>
    <option value="Belgium">Belgium</option>
    <option value="Belize">Belize</option>
    <option value="Benin">Benin</option>
    <option value="Bermuda">Bermuda</option>
    <option value="Bhutan">Bhutan</option>
    <option value="Bolivia">Bolivia</option>
    <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
    <option value="Botswana">Botswana</option>
    <option value="Brazil">Brazil</option>
    <option value="British Virgin Islands">British Virgin Islands</option>
    <option value="Brunei Darussalam">Brunei Darussalam</option>
    <option value="Bulgaria">Bulgaria</option>
    <option value="Burkina Faso">Burkina Faso</option>
    <option value="Burma">Burma</option>
    <option value="Burundi">Burundi</option>
    <option value="Cambodia">Cambodia</option>
    <option value="Cameroon">Cameroon</option>
    <option value="Cape Verde Islands">Cape Verde Islands</option>
    <option value="Cayman Islands">Cayman Islands</option>
    <option value="Central African Republic">Central African Republic</option>
    <option value="Chad">Chad</option>
    <option value="Chile">Chile</option>
    <option value="China">China</option>
    <option value="Colombia">Colombia</option>
    <option value="Comoros">Comoros</option>
    <option value="Democratic Republic of the Congo">Congo, Democratic Republic of the</option>
    <option value="Republic of the Congo">Congo, Republic of the</option>
    <option value="Cook Islands">Cook Islands</option>
    <option value="Costa Rica">Costa Rica</option>
    <option value="Ivory Coast">Cote d Ivoire (Ivory Coast)</option>
    <option value="Republic of Croatia">Croatia, Republic of</option>
    <option value="Cyprus">Cyprus</option>
    <option value="Czech Republic">Czech Republic</option>
    <option value="Denmark">Denmark</option>
    <option value="Djibouti">Djibouti</option>
    <option value="Dominica">Dominica</option>
    <option value="Dominican Republic">Dominican Republic</option>
    <option value="Ecuador">Ecuador</option>
    <option value="Egypt">Egypt</option>
    <option value="El Salvador">El Salvador</option>
    <option value="Equatorial Guinea">Equatorial Guinea</option>
    <option value="Eritrea">Eritrea</option>
    <option value="Estonia">Estonia</option>
    <option value="Ethiopia">Ethiopia</option>
    <option value="Falkland Islands">Falkland Islands (Islas Malvinas)</option>
    <option value="Fiji">Fiji</option>
    <option value="Finland">Finland</option>
    <option value="France">France</option>
    <option value="French Guiana">French Guiana</option>
    <option value="French Polynesia">French Polynesia</option>
    <option value="Gabon Republic">Gabon Republic</option>
    <option value="Gambia">Gambia</option>
    <option value="Georgia">Georgia</option>
    <option value="Germany">Germany</option>
    <option value="Ghana">Ghana</option>
    <option value="Gibraltar">Gibraltar</option>
    <option value="Greece">Greece</option>
    <option value="Greenland">Greenland</option>
    <option value="Grenada">Grenada</option>
    <option value="Guadeloupe">Guadeloupe</option>
    <option value="Guam">Guam</option>
    <option value="Guatemala">Guatemala</option>
    <option value="Guernsey">Guernsey</option>
    <option value="Guinea">Guinea</option>
    <option value="Guinea-Bissau">Guinea-Bissau</option>
    <option value="Guyana">Guyana</option>
    <option value="Haiti">Haiti</option>
    <option value="Honduras">Honduras</option>
    <option value="Hong Kong">Hong Kong</option>
    <option value="Hungary">Hungary</option>
    <option value="Iceland">Iceland</option>
    <option value="India">India</option>
    <option value="Indonesia">Indonesia</option>
    <option value="Ireland">Ireland</option>
    <option value="Israel">Israel</option>
    <option value="Italy">Italy</option>
    <option value="Jamaica">Jamaica</option>
    <option value="Jan Mayen">Jan Mayen</option>
    <option value="Japan">Japan</option>
    <option value="Jersey">Jersey</option>
    <option value="Jordan">Jordan</option>
    <option value="Kazakhstan">Kazakhstan</option>
    <option value="Kenya">Kenya</option>
    <option value="Kiribati">Kiribati</option>
    <option value="South Korea">Korea, South</option>
    <option value="Kuwait">Kuwait</option>
    <option value="Kyrgyzstan">Kyrgyzstan</option>
    <option value="Laos">Laos</option>
    <option value="Latvia">Latvia</option>
    <option value="Lebanon">Lebanon</option>
    <option value="Liechtenstein">Liechtenstein</option>
    <option value="Lithuania">Lithuania</option>
    <option value="Luxembourg">Luxembourg</option>
    <option value="Macau">Macau</option>
    <option value="Macedonia">Macedonia</option>
    <option value="Madagascar">Madagascar</option>
    <option value="Malawi">Malawi</option>
    <option value="Malaysia">Malaysia</option>
    <option value="Maldives">Maldives</option>
    <option value="Mali">Mali</option>
    <option value="Malta">Malta</option>
    <option value="Marshall Islands">Marshall Islands</option>
    <option value="Martinique">Martinique</option>
    <option value="Mauritania">Mauritania</option>
    <option value="Mauritius">Mauritius</option>
    <option value="Mayotte">Mayotte</option>
    <option value="Mexico">Mexico</option>
    <option value="Micronesia">Micronesia</option>
    <option value="Moldova">Moldova</option>
    <option value="Monaco">Monaco</option>
    <option value="Mongolia">Mongolia</option>
    <option value="Montenegro">Montenegro</option>
    <option value="Montserrat">Montserrat</option>
    <option value="Morocco">Morocco</option>
    <option value="Mozambique">Mozambique</option>
    <option value="Namibia">Namibia</option>
    <option value="Nauru">Nauru</option>
    <option value="Nepal">Nepal</option>
    <option value="Netherlands">Netherlands</option>
    <option value="Netherlands Antilles">Netherlands Antilles</option>
    <option value="New Caledonia">New Caledonia</option>
    <option value="New Zealand">New Zealand</option>
    <option value="Nicaragua">Nicaragua</option>
    <option value="Niger">Niger</option>
    <option value="Nigeria">Nigeria</option>
    <option value="Niue">Niue</option>
    <option value="Norway">Norway</option>
    <option value="Oman">Oman</option>
    <option value="Pakistan">Pakistan</option>
    <option value="Palau">Palau</option>
    <option value="Panama">Panama</option>
    <option value="Papua New Guinea">Papua New Guinea</option>
    <option value="Paraguay">Paraguay</option>
    <option value="Peru">Peru</option>
    <option value="Philippines">Philippines</option>
    <option value="Poland">Poland</option>
    <option value="Portugal">Portugal</option>
    <option value="Puerto Rico">Puerto Rico</option>
    <option value="Qatar">Qatar</option>
    <option value="Romania">Romania</option>
    <option value="Russian Federation">Russian Federation</option>
    <option value="Rwanda">Rwanda</option>
    <option value="Saint Helena">Saint Helena</option>
    <option value="Saint Kitts-Nevis">Saint Kitts-Nevis</option>
    <option value="Saint Lucia">Saint Lucia</option>
    <option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
    <option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
    <option value="San Marino">San Marino</option>
    <option value="Saudi Arabia">Saudi Arabia</option>
    <option value="Senegal">Senegal</option>
    <option value="Serbia">Serbia</option>
    <option value="Seychelles">Seychelles</option>
    <option value="Sierra Leone">Sierra Leone</option>
    <option value="Singapore">Singapore</option>
    <option value="Slovakia">Slovakia</option>
    <option value="Slovenia">Slovenia</option>
    <option value="Solomon Islands">Solomon Islands</option>
    <option value="Somalia">Somalia</option>
    <option value="South Africa">South Africa</option>
    <option value="Spain">Spain</option>
    <option value="Sri Lanka">Sri Lanka</option>
    <option value="Suriname">Suriname</option>
    <option value="Svalbard">Svalbard</option>
    <option value="Swaziland">Swaziland</option>
    <option value="Sweden">Sweden</option>
    <option value="Switzerland">Switzerland</option>
    <option value="Syria">Syria</option>
    <option value="Tahiti">Tahiti</option>
    <option value="Taiwan">Taiwan</option>
    <option value="Tajikistan">Tajikistan</option>
    <option value="Tanzania">Tanzania</option>
    <option value="Thailand">Thailand</option>
    <option value="Togo">Togo</option>
    <option value="Tonga">Tonga</option>
    <option value="Trinidad and Tobago">Trinidad and Tobago</option>
    <option value="Tunisia">Tunisia</option>
    <option value="Turkey">Turkey</option>
    <option value="Turkmenistan">Turkmenistan</option>
    <option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
    <option value="Tuvalu">Tuvalu</option>
    <option value="Uganda">Uganda</option>
    <option value="Ukraine">Ukraine</option>
    <option value="United Arab Emirates">United Arab Emirates</option>
    <option value="Uruguay">Uruguay</option>
    <option value="Uzbekistan">Uzbekistan</option>
    <option value="Vanuatu">Vanuatu</option>
    <option value="Vatican City State">Vatican City State</option>
    <option value="Venezuela">Venezuela</option>
    <option value="Vietnam">Vietnam</option>
    <option value="Virgin Islands">Virgin Islands (U.S.)</option>
    <option value="Wallis and Futuna">Wallis and Futuna</option>
    <option value="Western Sahara">Western Sahara</option>
    <option value="Western Samoa">Western Samoa</option>
    <option value="Yemen">Yemen</option>
    <option value="Zambia">Zambia</option>
    <option value="Zimbabwe">Zimbabwe</option>
    <option value=""></option>
    </select>
    <span id="ValidateBillingCountry" class="field-validation-error"></span></td>
    </tr>
    <tr>
    <td class="label">Amount</td>
    <td class="field">
    <input type="text" id="Amount" name="Amount" value="">
    <span id="ValidateAmount" class="field-validation-error"></span></td>
    </tr>
    <tr id="cardNumberContainer">
    <td class="label">Card Number (do not include spaces or dashes)</td>
    <td class="field">
    <input type="text" id="CardNumber" name="CardNumber" value="" maxlength="16">
    <span id="ValidateCardNumber" class="field-validation-error"></span></td>
    </tr>
    <tr id="expirationDateContainer">
    <td class="label">Expiration Date (mm/yy)</td>
    <td class="field">
    <input type="text" id="ExpirationDate" name="ExpirationDate" value="" maxlength="5">
    <span id="ValidateExpirationDate" class="field-validation-error"></span></td>
    </tr>
    <tr id="securityCodeContainer">
    <td class="label">Security Code</td>
    <td class="field">
    <input type="text" id="SecurityCode" name="SecurityCode" value="">
    <span id="ValidateSecurityCode" class="field-validation-error"></span> <a onclick="OpenSecurityCode()">What's this?</a></td>
    </tr>
    <tr><td colspan="2"><div id="reCaptcha"></div><span id="ValidatereCaptcha" class="field-validation-error"></span></td></tr><tr><td class="label">
    </td>
    <td class="field"></td>
    </tr><tr>
    <td class="label"></td>
    <td class="field">
    <div class="submitBox" style="display: none">Processing form...</div><div class="submitButton"><input type="hidden" value="" id="referringURL" name="referringURL"><input value="Submit Form" type="Submit"></div></td>
    </tr>
    </tbody></table>
    Last edited by VIPStephan; 11-06-2012 at 04:35 PM. Reason: added code BB tags

  • #5
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Actually, if I could get the contents of the drop down selection to populate the "Amount" field below as read-only that would be even better.



    Code:
    <table cellpadding="0" cellspacing="0"><tbody><tr><td colspan="2"><span class="contentYellowTitle"><br>Payment and Rate Information</span></td></tr><tr id="billingNameContainer">
    <td class="label">Billing Name</td>
    <td class="field">
    <input type="text" id="BillingName" name="BillingName" value="">
    <span id="ValidateBillingName" class="field-validation-error"></span></td>
    </tr>
    <tr id="billingAddressContainer">
    <td class="label">Billing Address</td>
    <td class="field">
    <input type="text" id="BillingAddress" name="BillingAddress" value="">
    <span id="ValidateBillingAddress" class="field-validation-error"></span></td>
    </tr>
    <tr id="billingCityContainer">
    <td class="label">Billing City</td>
    <td class="field">
    <input type="text" id="BillingCity" name="BillingCity" value="">
    <span id="ValidateBillingCity" class="field-validation-error"></span></td>
    </tr>
    <tr id="billingStateContainer">
    <td class="label">Billing State</td>
    <td class="field">
    <select id="BillingState" name="BillingState">
    <option value="AL">Alabama</option>
    <option value="AK">Alaska</option>
    <option value="AZ">Arizona</option>
    <option value="AR">Arkansas</option>
    <option value="CA">California</option>
    <option value="CO">Colorado</option>
    <option value="CT">Connecticut</option>
    <option value="DE">Delaware</option>
    <option value="DC">District Of Columbia</option>
    <option value="FL">Florida</option>
    <option value="GA">Georgia</option>
    <option value="HI">Hawaii</option>
    <option value="ID">Idaho</option>
    <option value="IL">Illinois</option>
    <option value="IN">Indiana</option>
    <option value="IA">Iowa</option>
    <option value="KS">Kansas</option>
    <option value="KY">Kentucky</option>
    <option value="LA">Louisiana</option>
    <option value="ME">Maine</option>
    <option value="MD">Maryland</option>
    <option value="MA">Massachusetts</option>
    <option value="MI">Michigan</option>
    <option value="MN">Minnesota</option>
    <option value="MS">Mississippi</option>
    <option value="MO">Missouri</option>
    <option value="MT">Montana</option>
    <option value="NE">Nebraska</option>
    <option value="NV">Nevada</option>
    <option value="NH">New Hampshire</option>
    <option value="NJ">New Jersey</option>
    <option value="NM">New Mexico</option>
    <option value="NY">New York</option>
    <option value="NC">North Carolina</option>
    <option value="ND">North Dakota</option>
    <option value="OH">Ohio</option>
    <option value="OK">Oklahoma</option>
    <option value="OR">Oregon</option>
    <option value="PA">Pennsylvania</option>
    <option value="RI">Rhode Island</option>
    <option value="SC">South Carolina</option>
    <option value="SD">South Dakota</option>
    <option value="TN">Tennessee</option>
    <option value="TX">Texas</option>
    <option value="UT">Utah</option>
    <option value="VT">Vermont</option>
    <option value="VA">Virginia</option>
    <option value="WA">Washington</option>
    <option value="WV">West Virginia</option>
    <option value="WI">Wisconsin</option>
    <option value="WY">Wyoming</option>
    <option value="Canada">---Canada---</option>
    <option value="AB">Alberta</option>
    <option value="BC">British Columbia</option>
    <option value="MB">Manitoba</option>
    <option value="NB">New Brunswick</option>
    <option value="NL">Newfoundland and Labrador</option>
    <option value="NT">Northwest Territories</option>
    <option value="NS">Nova Scotia</option>
    <option value="NU">Nunavut</option>
    <option value="ON">Ontario</option>
    <option value="PE">Prince Edward Island</option>
    <option value="QC">Quebec</option>
    <option value="SK">Saskatchewan</option>
    <option value="YT">Yukon</option>
    <option value="Other">---Other---</option>
    <option value="International">International</option>
    </select>
    <span id="ValidateBillingState" class="field-validation-error"></span></td>
    </tr>
    <tr id="billingZipContainer">
    <td class="label">Billing ZIP Code</td>
    <td class="field">
    <input type="text" id="BillingZip" name="BillingZip" value="">
    <span id="ValidateBillingZip" class="field-validation-error"></span></td>
    </tr>
    <tr id="billingCountryContainer">
    <td class="label">Billing Country</td>
    <td class="field">
    <select id="BillingCountry" name="BillingCountry">
    <option value="United States">United States</option>
    <option value="APO/FPO">APO/FPO</option>
    <option value="Canada">Canada</option>
    <option value="United Kingdom">United Kingdom</option>
    <option value="Afghanistan">Afghanistan</option>
    <option value="Albania">Albania</option>
    <option value="Algeria">Algeria</option>
    <option value="American Samoa">American Samoa</option>
    <option value="Andorra">Andorra</option>
    <option value="Angola">Angola</option>
    <option value="Anguilla">Anguilla</option>
    <option value="Antigua and Barbuda">Antigua and Barbuda</option>
    <option value="Argentina">Argentina</option>
    <option value="Armenia">Armenia</option>
    <option value="Aruba">Aruba</option>
    <option value="Australia">Australia</option>
    <option value="Austria">Austria</option>
    <option value="Azerbaijan Republic">Azerbaijan Republic</option>
    <option value="Bahamas">Bahamas</option>
    <option value="Bahrain">Bahrain</option>
    <option value="Bangladesh">Bangladesh</option>
    <option value="Barbados">Barbados</option>
    <option value="Belarus">Belarus</option>
    <option value="Belgium">Belgium</option>
    <option value="Belize">Belize</option>
    <option value="Benin">Benin</option>
    <option value="Bermuda">Bermuda</option>
    <option value="Bhutan">Bhutan</option>
    <option value="Bolivia">Bolivia</option>
    <option value="Bosnia and Herzegovina">Bosnia and Herzegovina</option>
    <option value="Botswana">Botswana</option>
    <option value="Brazil">Brazil</option>
    <option value="British Virgin Islands">British Virgin Islands</option>
    <option value="Brunei Darussalam">Brunei Darussalam</option>
    <option value="Bulgaria">Bulgaria</option>
    <option value="Burkina Faso">Burkina Faso</option>
    <option value="Burma">Burma</option>
    <option value="Burundi">Burundi</option>
    <option value="Cambodia">Cambodia</option>
    <option value="Cameroon">Cameroon</option>
    <option value="Cape Verde Islands">Cape Verde Islands</option>
    <option value="Cayman Islands">Cayman Islands</option>
    <option value="Central African Republic">Central African Republic</option>
    <option value="Chad">Chad</option>
    <option value="Chile">Chile</option>
    <option value="China">China</option>
    <option value="Colombia">Colombia</option>
    <option value="Comoros">Comoros</option>
    <option value="Democratic Republic of the Congo">Congo, Democratic Republic of the</option>
    <option value="Republic of the Congo">Congo, Republic of the</option>
    <option value="Cook Islands">Cook Islands</option>
    <option value="Costa Rica">Costa Rica</option>
    <option value="Ivory Coast">Cote d Ivoire (Ivory Coast)</option>
    <option value="Republic of Croatia">Croatia, Republic of</option>
    <option value="Cyprus">Cyprus</option>
    <option value="Czech Republic">Czech Republic</option>
    <option value="Denmark">Denmark</option>
    <option value="Djibouti">Djibouti</option>
    <option value="Dominica">Dominica</option>
    <option value="Dominican Republic">Dominican Republic</option>
    <option value="Ecuador">Ecuador</option>
    <option value="Egypt">Egypt</option>
    <option value="El Salvador">El Salvador</option>
    <option value="Equatorial Guinea">Equatorial Guinea</option>
    <option value="Eritrea">Eritrea</option>
    <option value="Estonia">Estonia</option>
    <option value="Ethiopia">Ethiopia</option>
    <option value="Falkland Islands">Falkland Islands (Islas Malvinas)</option>
    <option value="Fiji">Fiji</option>
    <option value="Finland">Finland</option>
    <option value="France">France</option>
    <option value="French Guiana">French Guiana</option>
    <option value="French Polynesia">French Polynesia</option>
    <option value="Gabon Republic">Gabon Republic</option>
    <option value="Gambia">Gambia</option>
    <option value="Georgia">Georgia</option>
    <option value="Germany">Germany</option>
    <option value="Ghana">Ghana</option>
    <option value="Gibraltar">Gibraltar</option>
    <option value="Greece">Greece</option>
    <option value="Greenland">Greenland</option>
    <option value="Grenada">Grenada</option>
    <option value="Guadeloupe">Guadeloupe</option>
    <option value="Guam">Guam</option>
    <option value="Guatemala">Guatemala</option>
    <option value="Guernsey">Guernsey</option>
    <option value="Guinea">Guinea</option>
    <option value="Guinea-Bissau">Guinea-Bissau</option>
    <option value="Guyana">Guyana</option>
    <option value="Haiti">Haiti</option>
    <option value="Honduras">Honduras</option>
    <option value="Hong Kong">Hong Kong</option>
    <option value="Hungary">Hungary</option>
    <option value="Iceland">Iceland</option>
    <option value="India">India</option>
    <option value="Indonesia">Indonesia</option>
    <option value="Ireland">Ireland</option>
    <option value="Israel">Israel</option>
    <option value="Italy">Italy</option>
    <option value="Jamaica">Jamaica</option>
    <option value="Jan Mayen">Jan Mayen</option>
    <option value="Japan">Japan</option>
    <option value="Jersey">Jersey</option>
    <option value="Jordan">Jordan</option>
    <option value="Kazakhstan">Kazakhstan</option>
    <option value="Kenya">Kenya</option>
    <option value="Kiribati">Kiribati</option>
    <option value="South Korea">Korea, South</option>
    <option value="Kuwait">Kuwait</option>
    <option value="Kyrgyzstan">Kyrgyzstan</option>
    <option value="Laos">Laos</option>
    <option value="Latvia">Latvia</option>
    <option value="Lebanon">Lebanon</option>
    <option value="Liechtenstein">Liechtenstein</option>
    <option value="Lithuania">Lithuania</option>
    <option value="Luxembourg">Luxembourg</option>
    <option value="Macau">Macau</option>
    <option value="Macedonia">Macedonia</option>
    <option value="Madagascar">Madagascar</option>
    <option value="Malawi">Malawi</option>
    <option value="Malaysia">Malaysia</option>
    <option value="Maldives">Maldives</option>
    <option value="Mali">Mali</option>
    <option value="Malta">Malta</option>
    <option value="Marshall Islands">Marshall Islands</option>
    <option value="Martinique">Martinique</option>
    <option value="Mauritania">Mauritania</option>
    <option value="Mauritius">Mauritius</option>
    <option value="Mayotte">Mayotte</option>
    <option value="Mexico">Mexico</option>
    <option value="Micronesia">Micronesia</option>
    <option value="Moldova">Moldova</option>
    <option value="Monaco">Monaco</option>
    <option value="Mongolia">Mongolia</option>
    <option value="Montenegro">Montenegro</option>
    <option value="Montserrat">Montserrat</option>
    <option value="Morocco">Morocco</option>
    <option value="Mozambique">Mozambique</option>
    <option value="Namibia">Namibia</option>
    <option value="Nauru">Nauru</option>
    <option value="Nepal">Nepal</option>
    <option value="Netherlands">Netherlands</option>
    <option value="Netherlands Antilles">Netherlands Antilles</option>
    <option value="New Caledonia">New Caledonia</option>
    <option value="New Zealand">New Zealand</option>
    <option value="Nicaragua">Nicaragua</option>
    <option value="Niger">Niger</option>
    <option value="Nigeria">Nigeria</option>
    <option value="Niue">Niue</option>
    <option value="Norway">Norway</option>
    <option value="Oman">Oman</option>
    <option value="Pakistan">Pakistan</option>
    <option value="Palau">Palau</option>
    <option value="Panama">Panama</option>
    <option value="Papua New Guinea">Papua New Guinea</option>
    <option value="Paraguay">Paraguay</option>
    <option value="Peru">Peru</option>
    <option value="Philippines">Philippines</option>
    <option value="Poland">Poland</option>
    <option value="Portugal">Portugal</option>
    <option value="Puerto Rico">Puerto Rico</option>
    <option value="Qatar">Qatar</option>
    <option value="Romania">Romania</option>
    <option value="Russian Federation">Russian Federation</option>
    <option value="Rwanda">Rwanda</option>
    <option value="Saint Helena">Saint Helena</option>
    <option value="Saint Kitts-Nevis">Saint Kitts-Nevis</option>
    <option value="Saint Lucia">Saint Lucia</option>
    <option value="Saint Pierre and Miquelon">Saint Pierre and Miquelon</option>
    <option value="Saint Vincent and the Grenadines">Saint Vincent and the Grenadines</option>
    <option value="San Marino">San Marino</option>
    <option value="Saudi Arabia">Saudi Arabia</option>
    <option value="Senegal">Senegal</option>
    <option value="Serbia">Serbia</option>
    <option value="Seychelles">Seychelles</option>
    <option value="Sierra Leone">Sierra Leone</option>
    <option value="Singapore">Singapore</option>
    <option value="Slovakia">Slovakia</option>
    <option value="Slovenia">Slovenia</option>
    <option value="Solomon Islands">Solomon Islands</option>
    <option value="Somalia">Somalia</option>
    <option value="South Africa">South Africa</option>
    <option value="Spain">Spain</option>
    <option value="Sri Lanka">Sri Lanka</option>
    <option value="Suriname">Suriname</option>
    <option value="Svalbard">Svalbard</option>
    <option value="Swaziland">Swaziland</option>
    <option value="Sweden">Sweden</option>
    <option value="Switzerland">Switzerland</option>
    <option value="Syria">Syria</option>
    <option value="Tahiti">Tahiti</option>
    <option value="Taiwan">Taiwan</option>
    <option value="Tajikistan">Tajikistan</option>
    <option value="Tanzania">Tanzania</option>
    <option value="Thailand">Thailand</option>
    <option value="Togo">Togo</option>
    <option value="Tonga">Tonga</option>
    <option value="Trinidad and Tobago">Trinidad and Tobago</option>
    <option value="Tunisia">Tunisia</option>
    <option value="Turkey">Turkey</option>
    <option value="Turkmenistan">Turkmenistan</option>
    <option value="Turks and Caicos Islands">Turks and Caicos Islands</option>
    <option value="Tuvalu">Tuvalu</option>
    <option value="Uganda">Uganda</option>
    <option value="Ukraine">Ukraine</option>
    <option value="United Arab Emirates">United Arab Emirates</option>
    <option value="Uruguay">Uruguay</option>
    <option value="Uzbekistan">Uzbekistan</option>
    <option value="Vanuatu">Vanuatu</option>
    <option value="Vatican City State">Vatican City State</option>
    <option value="Venezuela">Venezuela</option>
    <option value="Vietnam">Vietnam</option>
    <option value="Virgin Islands">Virgin Islands (U.S.)</option>
    <option value="Wallis and Futuna">Wallis and Futuna</option>
    <option value="Western Sahara">Western Sahara</option>
    <option value="Western Samoa">Western Samoa</option>
    <option value="Yemen">Yemen</option>
    <option value="Zambia">Zambia</option>
    <option value="Zimbabwe">Zimbabwe</option>
    <option value=""></option>
    </select>
    <span id="ValidateBillingCountry" class="field-validation-error"></span></td>
    </tr>
    <tr>
    <td class="label">Amount</td>
    <td class="field">
    <input type="text" id="Amount" name="Amount" value="">
    <span id="ValidateAmount" class="field-validation-error"></span></td>
    </tr>
    <tr id="cardNumberContainer">
    <td class="label">Card Number (do not include spaces or dashes)</td>
    <td class="field">
    <input type="text" id="CardNumber" name="CardNumber" value="" maxlength="16">
    <span id="ValidateCardNumber" class="field-validation-error"></span></td>
    </tr>
    <tr id="expirationDateContainer">
    <td class="label">Expiration Date (mm/yy)</td>
    <td class="field">
    <input type="text" id="ExpirationDate" name="ExpirationDate" value="" maxlength="5">
    <span id="ValidateExpirationDate" class="field-validation-error"></span></td>
    </tr>
    <tr id="securityCodeContainer">
    <td class="label">Security Code</td>
    <td class="field">
    <input type="text" id="SecurityCode" name="SecurityCode" value="">
    <span id="ValidateSecurityCode" class="field-validation-error"></span> <a onclick="OpenSecurityCode()">What's this?</a></td>
    </tr>
    <tr><td colspan="2"><div id="reCaptcha"></div><span id="ValidatereCaptcha" class="field-validation-error"></span></td></tr><tr><td class="label">
    </td>
    <td class="field"></td>
    </tr><tr>
    <td class="label"></td>
    <td class="field">
    <div class="submitBox" style="display: none">Processing form...</div><div class="submitButton"><input type="hidden" value="" id="referringURL" name="referringURL"><input value="Submit Form" type="Submit"></div></td>
    </tr>
    </tbody></table>
    Last edited by VIPStephan; 11-06-2012 at 04:36 PM. Reason: added code BB tags

  • #6
    Supreme Master coder! Philip M's Avatar
    Join Date
    Jun 2002
    Location
    London, England
    Posts
    17,922
    Thanks
    203
    Thanked 2,531 Times in 2,509 Posts
    chistyann -

    When posting here please help us to help you by following the posting guidelines and wrapping your code in CODE tags. This means use the octothorpe or # button on the toolbar. You can (and should) edit your previous post.


    Also, please have regard to MUST READ- How to post a JavaScript question! Para#3. There is no need to post all 50 American states and a list of 100 countries! We don't wnt to see those! Strip your code down to make it manageable if you want people to sort out the problems.

    <select name=”select1” onchange=”document.getElementById (‘result’).innerHTML = this.value;”>
    <select name="select1" onchange="this.form.submit()">

    You cannot call two differnt functions in that way. But in any case it is silly to submit the form onchange of a select as it gives the user no opportrunity to change his mind.
    Last edited by Philip M; 11-06-2012 at 03:40 PM.

    All the code given in this post has been tested and is intended to address the question asked.
    Unless stated otherwise it is not just a demonstration.

  • #7
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts

    What other suggestions do you have?

    What other way do you recommend to pass the users drop down selection (whatever he/she changes it to) to the amount field? I do not want any discrepancies between the drop down amount selection and the amount field because this is what he/she will be charged automatically for. These must match so I don't want a manual entry that doesn't coincide with the drop down selection.

  • #8
    The fat guy next door VIPStephan's Avatar
    Join Date
    Jan 2006
    Location
    Halle (Saale), Germany
    Posts
    8,642
    Thanks
    6
    Thanked 1,004 Times in 977 Posts
    Did you notice the “smart quotes” (a. k. a. typographer’s quotes) in the code? That’s wrong and could lead to problems. Always use straight quotes: " or '.

  • #9
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    See code thus far below. I'd like need to pass the selection of "select1" to "Amount" field below.


    <select name="select1" onchange="document.getElementById (‘result’).innerHTML = this.value;">

    <select name="select1" onchange="this.form.submit()">
    <option value="0">--please choose--</option>
    <option value="50">1 - $50</option>
    <option value="100">2 - $100</option>
    <option value="150">3 - $150</option>
    <option value="200">4 - $200</option>
    <option value="250">5 - $250</option>
    </select>

    <tr>
    <td class="label">Amount</td>
    <td class="field">
    <input type="text" id="Amount" name="Amount" value="">
    <span id="ValidateAmount" class="field-validation-error"></span>
    </td>
    </tr>

  • #10
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,208
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    As you were told, you can *NOT* do this:
    Code:
    <select name="select1" onchange="document.getElementById (‘result’).innerHTML = this.value;"> 
    <select name="select1" onchange="this.form.submit()">
    KILL the second line there. Use ONLY the first of those.

    Submitting the form means that it is GONE! Sent to the server. No chance to change anything of fill in additional fields.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #11
    New to the CF scene
    Join Date
    Nov 2012
    Posts
    6
    Thanks
    1
    Thanked 0 Times in 0 Posts
    Often vague replies are misunderstood especially to a beginner that's not a mind reader.

    Thanks for the additional tips to remove the second line. Does removing the second line allow for the insertion into the 'amount' field or is that the piece that can't be done.

  • #12
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,208
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    Removing that second line is just correcting the egregious mistake you made in putting it there in the first place.

    If you want to put something into the amount field, you will have to write code to do so.

    In your post #9, the ONLY code you have "putting" anything anywhere is this:
    Code:
    <select name="select1" onchange="document.getElementById (‘result’).innerHTML = this.value;">
    (the code in red).

    Does that look like it is putting anything into a field named amount? Of course not. It is putting something into a (non-existent in post #9) non-form element with the id of result. Just as it says.

    (And, incidentally, you really do NOT want to put anything into a field named amount. Your field is named Amount. JavaScript is case sensitive. "amount" and "Amount" are different things.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #13
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,208
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    By the by, the answers you have been getting have been treating your questions as if you are doing homework, because that's what the page/code feels like.

    If this is not homework, then please say so and, if possible, show us the web page where it is to go. (Not to prove it's not homework--just so we have a feel as to how it really needs to work.)
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #14
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,208
    Thanks
    75
    Thanked 4,343 Times in 4,309 Posts
    I guess if I had looked more closely at your post #5 I wouldn't have assumed it's homework, actually.

    But there's a ton of stuff missing in that post.

    In particular, I see you have code like this:
    Code:
    <span id="ValidateExpirationDate" class="field-validation-error"></span>
    But that code is useless unless you are using some sort of library that is going to do form field validation and/or you are going to write the validation yourself.

    All the more reason that the best way we could help you would be for you to show us the live page...give us a URL to look at.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •