www.webdeveloper.com
Results 1 to 3 of 3

Thread: drop down box content not diplaying

Hybrid View

  1. #1
    Join Date
    Dec 2010
    Posts
    36

    drop down box content not diplaying

    Hi
    I'm very new to JavaScript and i'm struggling to get the information selected from the drop down boxes in my form to display in a pop up. The text field and text area information diplays fine. Can anyone tell me why this isnt working?

    JavaScript....

    <SCRIPT LANGUAGE="JavaScript">
    <!-- Begin
    function displayHTML(form) {
    var inf = form.skill.value;
    var inf2 = form.current.value;
    var inf3 = form.number.value;
    var inf4 = form.years.value;
    var inf5 = form.what.value;
    var inf6 = form.experience.value;
    var inf7 = form.career.value;
    var inf8 = form.target.value;

    win = window.open("", 'popup', 'toolbar = yes, status = no');
    win.document.write("" + "<b>" + "Name: " + "</b>" + inf + "<br>" + "<b>" + "Date: " + "</b>" + inf2 + "<br>" + "<br>" + "<b>" + "The areas you wish to enhance are: " + "</b>" + "<br>" + "<b>" + "1. " + "</b>" + inf3 + "<br>" + "<B>" + "2. " + "</b>" + inf4 + "<br>" + "<b>" + "3. " + "</b>" + inf5 + "<br>" + "<br>" + "<b>" + "The actions you are going to take to enhance these areas are: " + "</b>" + "<br>" + "<b>" + "1. " + "</b>" + inf6 + "&nbsp" + "&nbsp" + "&nbsp" + "&nbsp" + "<b>" + "this will be done by: " +"</b>" + inf7 + "<br>" + "<b>" + "2. " +"</b>" + inf8 + "<br>" + "<br>" + "<br>" + "If you are happy with your Action Plan then click on the button below to print it" + "<html><head><title>popup</title></head><body><br><br>" + "<a href='print.html' onclick='window.print();return false;'>" + "<img src='images/printer.png' height='100px' width='100px'></a></body></html>" + "");
    }
    // End -->
    </script>



    HTML Form....


    <form id="form1" name="form1" method="post" action="">
    <div>
    <table width="809" border="1" cellpadding="1" cellspacing="0">
    <tr>
    <td width="799"><h2>Who you are (current position):</h2></td>
    </tr>
    <tr>
    <td><p>I am a
    <label for="number"></label>
    <select name="skill" id="select2">
    <option selected="selected">Please select</option>
    <option>highly skilled</option>
    <option>highly motivated</option>
    <option>knowledgeable</option>
    <option>reliable</option>
    <option>creative</option>
    <option>hardworking</option>
    <option>versatile</option>
    <option>confident</option>
    <option>flexible</option>
    <option>competent</option>
    <option>enthusiastic</option>
    <option>effective</option>
    <option>qualified</option>
    <option>adaptable</option>
    <option>energetic</option>
    </select>
    <label for="current"></label>
    <input type="text" name="current" id="current" />
    with
    <label for="what"></label>
    <select name="number" id="select3">
    <option>Please select</option>
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
    <option>11</option>
    <option>12</option>
    <option>13</option>
    <option>14</option>
    <option>15</option>
    <option>16</option>
    <option>17</option>
    <option>18</option>
    <option>19</option>
    <option>20</option>
    <option>21</option>
    <option>22</option>
    <option>23</option>
    <option>24</option>
    <option>25</option>
    <option>26</option>
    <option>27</option>
    <option>28</option>
    <option>29</option>
    <option>30</option>
    <option>31</option>
    <option>32</option>
    <option>33</option>
    <option>34</option>
    <option>35</option>
    <option>36</option>
    </select>
    years experience in
    <label for="years"></label>
    <input type="text" name="years" id="years" />
    .</p></td>
    </tr>
    </table>
    <p>&nbsp;</p>
    </div>
    <div>
    <table width="809" border="1" cellpadding="1" cellspacing="0">
    <tr>
    <td width="799"><h2>What you can do (skills and experience):</h2></td>
    </tr>
    <tr>
    <td><select name="what" id="select">
    <option selected="selected">Please select</option>
    <option>Specific expertise in</option>
    <option>Wide-ranging expertise in</option>
    <option>Responsible for</option>
    <option>Proven ability in</option>
    <option>Excellent</option>
    </select>
    <label for="experience"></label>
    <textarea name="experience" id="experience" cols="60" rows="2"></textarea>
    .</td>
    </tr>
    </table>
    <p>&nbsp;</p>
    </div>
    <div>
    <table width="809" border="1" cellpadding="1" cellspacing="0">
    <tr>
    <td width="799"><h2>What you want (career target):</h2></td>
    </tr>
    <tr>
    <td><select name="career" id="career">
    <option selected="selected">Please select</option>
    <option>Looking for a position in</option>
    <option>Seeking an opportunity in</option>
    <option>Seeking to continue a career as</option>
    <option>My objective is to develop a career as</option>
    </select>
    <textarea name="target" id="target" cols="60" rows="2"></textarea>
    .</td>
    </tr>
    </table></div>
    <p>
    <input type="submit" value="build" onclick="displayHTML(this.form)">
    </p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    </form>

  2. #2
    Join Date
    Dec 2002
    Location
    St. Louis, MO, USA
    Posts
    1,582
    For SELECT elements, what is natively passed in form submission is not value, but selectedIndex (the zero-index position of the options.) You can get the value, however, by using options[selectedIndex].value.

    Code:
    var inf = form.skill.options[form.skill.selectedIndex].value;
    ^_^

  3. #3
    Join Date
    Dec 2010
    Posts
    36
    thank you so much

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

Tags for this Thread

Posting Permissions

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



Recent Articles