How to change content of a span based on a drop down selection

Question

I have the following code. I'm trying to get it when the user clicks on "add another sport" that the kpsport1 will increment to 2, 3, 4, etc depending on how many times the user clicks.
In addition, when they choose a sport, I'd like the "CHOOSE YOUR SPORT" (formSectionHeader) to be replaced with the sport they choose. Having major problems getting this to work despite days of working on the JS portion. Appreciate any insight! Thank you so much!!

<div id="copy">
    <div id="personalInfo">
                <h1>Sporting Experience</h1>

                <form action="" name="signUp-pg1" id="signUp-pg1">

                    <div class="singleSportWrap">
                        <h2 class="formSectionHeader"><strong>CHOOSE YOUR SPORT</strong> <span>you can add another sport later.</span></h2>

                      <div class="singleSport">

                     <div id="KPspecialityPosition" class="formSection">

                         <div id="sportSelectField" class="selectStyled">
                              <select class="longField styled KPsportSelecter" name="KPsport1" id="KPsport1">
                                 <option value="default">Sport</option>
                                 <option value="basketball">Basketball</option>
                                 <option value="soccer">Soccer</option>
                                 <option value="football">Football</option>
                                 <option value="baseball">Baseball</option>
                                 <option value="hockey">Hockey</option>
                             </select>

                             <div class="checkboxInput"><input type="checkbox" name="primarySport" value="primarySport"><span>This my primary sport</span></div>

                         </div><!-- //selectStyled -->


                                             </div><!-- //formSection -->
                 </div><!-- //singleSport -->
                 </div><!-- //singleSportWrap -->


                 <p id="addAnotherSport" class="addMoreBtn">Add Another Sport</p>

                 <div id="formStepControls">
                     <a id="saveForm">Save for Later</a>
                     <a href="sign-up-3.php" id="proceedForm">Proceed to Vouching</a>
                 </div><!-- //formStepControls -->

             </form>


    </div><!-- personal info -->

</div><!-- copy -->

What does this have to do with PHP or HTML5? Also, where's the JavaScript you've tried? — j08691, Mar 15 '13 at 19:14

score 0 · Answer 1 · answered Mar 15 '13 at 19:23

Here is some JavaScript that should do what you're asking for (or at least how I interpret what you are asking for):

document.getElementById("addAnotherSport").onclick = function () {
    var kps = document.getElementById("KPsport1");

    var i = kps.selectedIndex;
    i++;
    if (i >= kps.options.length) i = kps.options.length - 1;

    kps.selectedIndex = i;

    document.getElementsByTagName("strong")[0].innerHTML = kps.options[kps.selectedIndex].text;
}

document.getElementById("KPsport1").onchange = function () {
    document.getElementsByTagName("strong")[0].innerHTML = this.options[this.selectedIndex].text;
}

If you add this to a script tag at the bottom of the page just before the closing body tag it should work.

Thank you! Will try this and get back to you! – lobstahcrushah Mar 15 '13 at 19:27 — lobstahcrushah, Mar 15 '13 at 19:27

How to change content of a span based on a drop down selection

1 Answers1