www.webdeveloper.com
Results 1 to 4 of 4

Thread: use JS to change the display in Textbox using onSelect...

  1. #1
    Join Date
    Jul 2009
    Posts
    9

    use JS to change the display in Textbox using onSelect...

    Long story short, say I want to create an online resume. I want a drop down menu to select areas from (ie skills, work history, education, etc).
    By default, nothing will be selected, and there will be an empty textbox. When something is selected, I want to display that portion of a resume.

    HTML -
    <form name="myform" action="#" method="post">
    <select name="myresume" onChange="disp_text()">
    <option selected="selected>...</option>
    <option value="skill">SKILLS</option>
    <option value="wh">WORK HISTORY</option>
    <option value="edu">EDUCATION</option>
    <option value="mil">MILITARY</option>
    </select>
    <input type="textbox" name="txt" value="" size="50" />
    </form>

    JS -

    function disp_text() {
    var skills = document.myform.myresume.skill;
    var wh = document.myform.myresume.wh;
    var edu = document.myform.myresume.edu;
    var mil = document.myform.myresume.mil;
    var skillsDisplay = "Some multiline text";
    var whDisplay = "More Multiline Text";
    var eduDisplay = "Even more multiline text";
    var milDisplay = "Yet more text";
    var w = document.myform.myresume.selectedIndex;

    if (w = skills) {
    document.write(skillsDisplay);
    } else if {w = wh) {
    document.write(whDisplay);
    } else if (w = edu) {
    document.write(eduDisplay);
    } else if (w = mil) {
    document.write(milDisplay);
    }
    }


    Several problems here: How do I make the xxxDisplay variable display inside a textbox? Why isn't this working at all? :-)

  2. #2
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Lightbulb Consider this ...

    I'm making a guess a to what you want to do as your original code needed work.
    See the areas I commented out for some of the reasons
    and note changes made to do what I assume you want to do.
    Code:
    <html>
    <head>
    <title>Resume Creator</title>
    <script type="text/javascript">
    // From: http://www.webdeveloper.com/forum/showthread.php?p=1021891#post1021891
    
    function disp_text() {
    /* not needed
      var skills = document.myform.myresume.skill;
      var wh = document.myform.myresume.wh;
      var edu = document.myform.myresume.edu;
      var mil = document.myform.myresume.mil;
    */  
      var skillsDisplay = "Some \nmultiline \ntext\n";
      var whDisplay = "More \nMultiline \nText\n";
      var eduDisplay = "Even more \nmultiline text\n";
      var milDisplay = "Yet more \ntext\n";
    /* \n added to create multiple lines of text */
    
      var w = document.myform.myresume.selectedIndex;
      if (w == 1) { document.myform.txt.value += skillsDisplay + '\n'; } 
      if (w == 2) { document.myform.txt.value += whDisplay + '\n'; } 
      if (w == 3) { document.myform.txt.value += eduDisplay + '\n'; } 
      if (w == 4) { document.myform.txt.value += milDisplay + '\n'; } 
      
    /* invalid checks and comparisons
       and document.write can not be used after page posted
      if (w = 'skill') { document.write(skillsDisplay); } 
      if (w = 'wh') { document.write(whDisplay); } 
      if (w = 'edu') { document.write(eduDisplay); } 
      if (w = 'mil') { document.write(milDisplay); }
    */
    }
    </script>
    </head>
    <body>
    <form name="myform" action="#" method="post" onsubmit="return false">
    <select name="myresume" onchange="disp_text()">
    <option selected>...</option>
    <option value="skill">SKILLS</option>
    <option value="wh">WORK HISTORY</option>
    <option value="edu">EDUCATION</option>
    <option value="mil">MILITARY</option>
    </select>
    <br>
    <!-- input type="textbox" name="txt" value="" size="50" / -->
    <!-- above only show a single line, not very useful for multi-lined text -->
    <textarea id='txt' name='txt' rows='10' cols='50'></textarea>
    <br>
    <button onclick="document.getElementById('txt').value = ''">Clear</button>
    </form>
    </body>
    </html>
    I would make further changes but wanted to keep as close to original
    so you could see the problems with original script.

    Good Luck!

  3. #3
    Join Date
    Jul 2009
    Posts
    9
    Thank you so much for your help! I just have one question. "if (w == 1)" Where are the variables 1, 2, 3 & 4 assigned or defined? How does the script know 1 is for skills, etc? The code definitely works great, just wanted to understand it a bit more

  4. #4
    Join Date
    Dec 2005
    Location
    FL
    Posts
    7,434

    Thumbs up

    Quote Originally Posted by crazyboy9807 View Post
    Thank you so much for your help! I just have one question. "if (w == 1)" Where are the variables 1, 2, 3 & 4 assigned or defined? How does the script know 1 is for skills, etc? The code definitely works great, just wanted to understand it a bit more
    The 'w' variable is assigned here:
    Code:
      var w = document.myform.myresume.selectedIndex;
    just before the series of 'if...' tests.

    The 'selectedIndex' ranges from -1 (not selected at all)
    to 0...n where 'n' is the number of options in the select box.

    Because it is a number, the test for 'w' must be numeric
    and cannot be the skills, wh, edu and mil that you originally had,
    which were really assignment in the if statements; ie if (w=1).....

    You could change the assignments and comparisons in your original script
    to assign strings and test for strings, but you need to do one (strings) or the other (numbers).

    You could also change the logic to use a 'switch' command rather than
    the series of 'if...' statements that might make the code a little more readable.

Thread Information

Users Browsing this Thread

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

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