Fill Form Values With Javascript Using "Select Name"

Question

I am trying to use javascript to automatically fill a form and I am having some difficult setting the value for the country.

<form action="/payment" method="post" novalidate="">
    <div class="input_group">
      <p class="input text changed">
        <label for="shipping_address_1">Address</label>
        <input type="text" name="shipping_address_1" id="shipping_address_1" value="xxx">
      </p>
    </div>

    <div class="input_group" data-ignore-validation="true">
      <p class="input text">
        <label for="shipping_address_2">Apt num, Suite (optional)</label>
        <input type="text" name="shipping_address_2" value="">
      </p>
    </div>

    <div class="input_group">
      <p class="input text span_half changed">
        <label for="shipping_city">City</label>
        <input type="text" name="shipping_city" value="xxx">
      </p>
      <p class="text input select span_half changed">
        <label for="shipping_state" data-loading="Loading" data-default="State / Province">State / Province</label>
        
  <span class="select_wrapper"><select name="shipping_state">
    <option value="">State / Province</option>
    <option value="Alberta">Alberta</option>
<option value="British Columbia">British Columbia</option>
<option value="Manitoba">Manitoba</option>
<option value="New Brunswick">New Brunswick</option>
<option value="Newfoundland and Labrador">Newfoundland and Labrador</option>
<option value="Nova Scotia">Nova Scotia</option>
<option value="Northwest Territories">Northwest Territories</option>
<option value="Nunavut">Nunavut</option>
<option value="Ontario" selected="">Ontario</option>
<option value="Prince Edward Island">Prince Edward Island</option>
<option value="Quebec">Quebec</option>
<option value="Saskatchewan">Saskatchewan</option>
<option value="Yukon Territory">Yukon Territory</option>
  </select><span class="value">Ontario</span></span>


      </p>

    </div>

    <div class="input_group">
      <p class="input text span_half changed">
        <label for="shipping_zip">Zip / Postal code</label>
        <input type="text" name="shipping_zip" value="xxxxx" maxlength="10">
      </p>
      <p class="text input select span_half changed">
        <label>Country</label>
        <span class="select_wrapper"><select name="shipping_country_id">
          <option value="46">Afghanistan</option>
<option value="47">Albania</option>
<option value="48">Algeria</option>
<option value="49">American Samoa</option>
<option value="50">Andorra</option>
<option value="51">Angola</option>
<option value="1">Anguilla</option>
<option value="52">Antarctica</option>
<option value="53">Antigua And Barbuda</option>
<option value="2">Argentina</option>
<option value="54">Armenia</option>
<option value="55">Aruba</option>
<option value="3">Australia</option>
<option value="4">Austria</option>
<option value="56">Azerbaijan</option>
<option value="253">Åland Islands</option>
<option value="57">Bahamas</option>
<option value="58">Bahrain</option>
<option value="59">Bangladesh</option>
<option value="60">Barbados</option>
<option value="61">Belarus</option>
<option value="5">Belgium</option>
<option value="62">Belize</option>
<option value="63">Benin</option>
<option value="64">Bermuda</option>
<option value="65">Bhutan</option>
<option value="66">Bolivia</option>
<option value="67">Bosnia and Herzegovina</option>
<option value="68">Botswana</option>
<option value="69">Bouvet Island</option>
<option value="6">Brazil</option>
<option value="70">British Indian Ocean Territory</option>
<option value="71">British Virgin Islands</option>
<option value="72">Brunei Darussalam</option>
<option value="73">Bulgaria</option>
<option value="74">Burkina Faso</option>
<option value="75">Burundi</option>
<option value="76">Cambodia</option>
<option value="77">Cameroon</option>
<option value="7" selected="">Canada</option>
<option value="78">Cape Verde</option>
<option value="79">Cayman Islands</option>
<option value="80">Central African Republic</option>
<option value="81">Chad</option>
<option value="8">Chile</option>
<option value="9">China</option>
<option value="82">Christmas Island</option>
<option value="83">Cocos (Keeling) Islands</option>
<option value="84">Colombia</option>
<option value="85">Comoros</option>
<option value="86">Congo</option>
<option value="87">Cook Islands</option>
<option value="10">Costa Rica</option>
<option value="88">Cote D'Ivoire (Ivory Coast)</option>
<option value="89">Croatia (Hrvatska)</option>
<option value="90">Cuba</option>
<option value="91">Cyprus</option>
<option value="92">Czech Republic</option>
<option value="249">Democratic Republic of the Congo</option>
<option value="11">Denmark</option>
<option value="93">Djibouti</option>
<option value="94">Dominica</option>
<option value="12">Dominican Republic</option>
<option value="95">East Timor</option>
<option value="13">Ecuador</option>
<option value="96">Egypt</option>
<option value="97">El Salvador</option>
<option value="98">Equatorial Guinea</option>
<option value="99">Eritrea</option>
<option value="100">Estonia</option>
<option value="101">Ethiopia</option>
<option value="102">Falkland Islands</option>
<option value="103">Faroe Islands</option>
<option value="104">Fiji</option>
<option value="14">Finland</option>
<option value="15">France</option>
<option value="105">France, Metropolitan</option>
<option value="106">French Guiana</option>
<option value="107">French Polynesia</option>
<option value="108">French Southern Territories</option>
<option value="109">Gabon</option>
<option value="110">Gambia</option>
<option value="111">Georgia</option>
<option value="16">Germany</option>
<option value="112">Ghana</option>
<option value="113">Gibraltar</option>
<option value="17">Greece</option>
<option value="114">Greenland</option>
<option value="115">Grenada</option>
<option value="116">Guadeloupe</option>
<option value="117">Guam</option>
<option value="118">Guatemala</option>
<option value="244">Guernsey</option>
<option value="119">Guinea</option>
<option value="120">Guinea-Bissau</option>
<option value="121">Guyana</option>
<option value="122">Haiti</option>
<option value="123">Heard and McDonald Islands</option>
<option value="124">Honduras</option>
<option value="18">Hong Kong</option>
<option value="125">Hungary</option>
<option value="19">Iceland</option>
<option value="20">India</option>
<option value="126">Indonesia</option>
<option value="127">Iran</option>
<option value="128">Iraq</option>
<option value="21">Ireland</option>
<option value="245">Isle of Man</option>
<option value="22">Israel</option>
<option value="23">Italy</option>
<option value="24">Jamaica</option>
<option value="25">Japan</option>
<option value="247">Jersey</option>
<option value="129">Jordan</option>
<option value="130">Kazakhstan</option>
<option value="131">Kenya</option>
<option value="132">Kiribati</option>
<option value="133">Korea (North) (People's Republic)</option>
<option value="134">Kuwait</option>
<option value="135">Kyrgyzstan (Kyrgyz Republic)</option>
<option value="136">Laos</option>
<option value="137">Latvia</option>
<option value="138">Lebanon</option>
<option value="139">Lesotho</option>
<option value="140">Liberia</option>
<option value="141">Libya</option>
<option value="142">Liechtenstein</option>
<option value="143">Lithuania</option>
<option value="26">Luxembourg</option>
<option value="144">Macau</option>
<option value="145">Macedonia</option>
<option value="146">Madagascar</option>
<option value="147">Malawi</option>
<option value="27">Malaysia</option>
<option value="148">Maldives</option>
<option value="149">Mali</option>
<option value="150">Malta</option>
<option value="151">Marshall Islands</option>
<option value="152">Martinique</option>
<option value="153">Mauritania</option>
<option value="154">Mauritius</option>
<option value="155">Mayotte</option>
<option value="28">Mexico</option>
<option value="156">Micronesia</option>
<option value="157">Moldova</option>
<option value="29">Monaco</option>
<option value="158">Mongolia</option>
<option value="243">Montenegro</option>
<option value="159">Montserrat</option>
<option value="160">Morocco</option>
<option value="161">Mozambique</option>
<option value="162">Myanmar</option>
<option value="163">Namibia</option>
<option value="164">Nauru</option>
<option value="165">Nepal</option>
<option value="30">Netherlands</option>
<option value="166">Netherlands Antilles</option>
<option value="167">Neutral Zone (Saudia Arabia/Iraq)</option>
<option value="168">New Caledonia</option>
<option value="31">New Zealand</option>
<option value="169">Nicaragua</option>
<option value="170">Niger</option>
<option value="171">Nigeria</option>
<option value="172">Niue</option>
<option value="173">Norfolk Island</option>
<option value="174">Northern Mariana Islands</option>
<option value="32">Norway</option>
<option value="175">Oman</option>
<option value="176">Pakistan</option>
<option value="177">Palau</option>
<option value="186">Palestine</option>
<option value="178">Panama</option>
<option value="179">Papua New Guinea</option>
<option value="180">Paraguay</option>
<option value="181">Peru</option>
<option value="182">Philippines</option>
<option value="183">Pitcairn</option>
<option value="184">Poland</option>
<option value="33">Portugal</option>
<option value="185">Puerto Rico</option>
<option value="187">Qatar</option>
<option value="188">Reunion</option>
<option value="189">Romania</option>
<option value="190">Russian Federation</option>
<option value="191">Rwanda</option>
<option value="192">S. Georgia and S. Sandwich Isls.</option>
<option value="193">Saint Kitts and Nevis</option>
<option value="194">Saint Lucia</option>
<option value="195">Saint Vincent and The Grenadines</option>
<option value="196">Samoa</option>
<option value="197">San Marino</option>
<option value="198">Sao Tome and Principe</option>
<option value="199">Saudi Arabia</option>
<option value="200">Senegal</option>
<option value="242">Serbia</option>
<option value="201">Seychelles</option>
<option value="202">Sierra Leone</option>
<option value="34">Singapore</option>
<option value="203">Slovakia (Slovak Republic)</option>
<option value="204">Slovenia</option>
<option value="205">Solomon Islands</option>
<option value="206">Somalia</option>
<option value="207">South Africa</option>
<option value="35">South Korea</option>
<option value="208">Soviet Union (former)</option>
<option value="36">Spain</option>
<option value="209">Sri Lanka</option>
<option value="210">St. Helena</option>
<option value="211">St. Pierre and Miquelon</option>
<option value="212">Sudan</option>
<option value="213">Suriname</option>
<option value="214">Svalbard and Jan Mayen Islands</option>
<option value="215">Swaziland</option>
<option value="37">Sweden</option>
<option value="38">Switzerland</option>
<option value="216">Syria</option>
<option value="39">Taiwan</option>
<option value="217">Tajikistan</option>
<option value="218">Tanzania</option>
<option value="40">Thailand</option>
<option value="251">Timore-Leste</option>
<option value="219">Togo</option>
<option value="220">Tokelau</option>
<option value="221">Tonga</option>
<option value="222">Trinidad and Tobago</option>
<option value="223">Tunisia</option>
<option value="41">Turkey</option>
<option value="224">Turkmenistan</option>
<option value="225">Turks and Caicos Islands</option>
<option value="226">Tuvalu</option>
<option value="227">Uganda</option>
<option value="228">Ukraine</option>
<option value="229">United Arab Emirates</option>
<option value="42">United Kingdom</option>
<option value="43">United States</option>
<option value="257">United States Minor Outlying Islands</option>
<option value="44">Uruguay</option>
<option value="230">Uzbekistan</option>
<option value="231">Vanuatu</option>
<option value="232">Vatican City State (Holy See)</option>
<option value="45">Venezuela</option>
<option value="233">Viet Nam</option>
<option value="234">Virgin Islands (US)</option>
<option value="235">Wallis and Futuna Islands</option>
<option value="236">Western Sahara</option>
<option value="237">Yemen</option>
<option value="255">Yugoslavia</option>
<option value="239">Zaire</option>
<option value="240">Zambia</option>
<option value="241">Zimbabwe</option>
        </select><span class="value">Canada</span></span>
      </p>
    </div>

    <div class="submit">
      <span class="button" data-update="Update" data-default="Next" style="padding: 0px; width: 138px;">
  <span class="text" unselectable="on">Update</span>
  <button type="submit">Update</button>
   <span class="loader icon">d</span>
  <span class="success icon">e</span>
</span>

    </div>
  </form>

Any suggestions on how to set the value for shipping_country_id?

This should be very simple and I'm surprised at how much difficulty I am experiencing.

reduce your code to a minimum that reproduces the issue. and include the code that's not working — Zig Mandel
– Zig Mandel, Commented Jul 10, 2015 at 1:20

score 1 · Accepted Answer · 2015-07-09 16:50:59Z

1

Not sure if I understand your question correctly, but this should populate it:

document.getElementsByName('shipping_country_id')[0].value = '47'

This sets the default value of the select element to 'Albania'

To set the address:

document.getElementById('shipping_address_1').value = 'New Address';

edited Jul 9, 2015 at 16:50

answered Jul 9, 2015 at 16:33

user1009835

Sign up to request clarification or add additional context in comments.

8 Comments

Otis Quagmire Over a year ago

Oddly enough, this does not do it.

user1009835 Over a year ago

Yes it does: jsfiddle.net/fegpjz0L . Perhaps you could also create a jsfiddle?

user1009835 Over a year ago

@OtisQuagmire See the updated answer. This is very basic Javascript. Hopefully you're planning to learn the language.

Otis Quagmire Over a year ago

Sorry -- I meant for my personal details. As for the solution, this is the exact code I am using, which is why I'm so perplexed as to why it is not working in practice.

user1009835 Over a year ago

@OtisQuagmire, Make sure to put the javascript at the very end of your html page. Or you could use jQuery's $(document).ready functionality. You could also use firebug to see what the error is.

|

Collectives™ on Stack Overflow

Fill Form Values With Javascript Using "Select Name"

1 Answer 1

8 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

8 Comments

Your Answer

Sign up or log in

Post as a guest

Related