listpaypalunordered

Multiple unordered list value to paypal

I've got a form with 2 radio buttons. Based on the radio buttons an unordered list is shown (hide/show using js). This works as desired.

The list is used to select a service. When I select a service with the 1st radio button "pre selected" it always passes the 1st value of the 2nd hidden list.

If I apply the list in 2 separate pages everything works fine.

What I'm trying to achieve: 1 page, 2 radio buttons, 1 list. The selected value of the list is passed to paypal for payment.

As you can see, I'm populating the same field for both lists, I believe that, by doing this it would just take the selected value regardless of which list is visible.

Does anyone have an idea where I'm wrong in my logic?

Here's my code:

                  <div class="col-sm-12">
                     <div class="radio mt-20">
                        <label><input type="radio" name="optionsRadios" id="optionsRadios1" value="inh" checked onclick="show1();"> In-House service </label>&nbsp;&nbsp;&nbsp;
                        <label><input type="radio" name="optionsRadios" id="optionsRadios2" value="mob" onclick="show2();"> Mobile service</label>
                     </div>
                  </div>
                  <div class="col-sm-12">
                    <div class="form-group mb-10">
                       <div class="form-group">
                          <select name="form_massage" id="form_is" class="form-control">
                            <option value="In house Full body relax massage - &euro;40">Full body relax massage - &euro;40</option>
                            <option value="In house Full body strong massage - &euro;45">Full body strong massage - &euro;45</option>
                            <option value="In house Back and Neck massage - &euro;20">Back and Neck massage - &euro;20</option>
                            <option value="In house Back and Legs - &euro;25">Back and Legs - &euro;25</option>
                            <option value="In house Legs and Feet - &euro;15">Legs and Feet - &euro;15</option>
                          </select>
                          <select name="form_massage" id="form_ms" class="form-control hide">
                            <option value="Mobile - Full body relax massage - &euro;50">Full body relax massage - &euro;50</option>
                            <option value="Mobile - Full body strong massage - &euro;55">Full body strong massage - &euro;55</option>
                            <option value="Mobile - Back and Neck massage - &euro;30">Back and Neck massage - &euro;30</option>
                            <option value="Mobile - Back and Legs - &euro;35">Back and Legs - &euro;35</option>
                            <option value="Mobile - Legs and Feet - &euro;20">Legs and Feet - &euro;20</option>
                          </select>                            
                       </div>
                    </div>
                  </div>                        
                </div>
Solution

  • The second select (or input) of the same name essentially overrides the first one, making it irrelevant as a form input on submit.

    You need them to have different names if you want the first one to have an effect as a form input.

    For your use case, the simplest solution may be to merge all the options into a single select and give them a class corresponding to which ones you want to be visible when (say, class=inh, class=mob). Then have your JS code show/hide the options, selecting them by class.