Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 11 of 11
  1. #1
    New Coder
    Join Date
    Feb 2013
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts

    Update text in textfield with two different dropdown boxes

    I have one textbox that onclick updates a textfield. Now, what I need it to do is when they click on a second dropdown it will update a portion of text in the same textfield. Hope this helps.

    Code:
        <script type="text/javascript"><!--    
    
                function OnSelectionChanged(listBox) {
                    var textInput = document.getElementById("dn");
                    textInput.value = listBox.value;
                }
    
    
        //--></script>
    
    </head>
    <body>
    <ul id="menu">
        </ul>
        <div id="main" class="view">
            <h1>Text</h1>
        <div id="intro"><h5>Text</h5>
        <div id="content"><h2>Text:</h2>
        <p>Text</p>
        </div>
      <form method="POST" action="submit" name="myForm"><fieldset>
       <legend>Text</legend>
    
       <label>[<a href="help.html" onclick="openWin(this.href); return false" title="Disposition Details Page">?</a>]
        Disposition Code<br />
        <select size="1" name="disposition" id="drp_dwn" onchange="OnSelectionChanged (this)">
         <option value="-1" selected>&mdash;&mdash;Select one&mdash;&mdash;</option>
         <option value="Text ">190</option>
         <option value="191">191</option>
         <option value="192">192</option>
         <option value="195">195</option>
         <option value="270">270</option>
         <option value="300">300</option>
         <option value="340">340</option>
         <option value="350">350</option>
         <option value="370">370</option>
         <option value="380">380</option>
         <option value="381">381</option>
         <option value="382">382</option>
         <option value="383">383</option>
         <option value="384">384</option>
         <option value="400">400</option>
         <option value="401">401</option>
         <option value="402">402</option>
         <option value="403">403</option>
        </select>
       </label>
          <label>[<a href="help.html#input3" onclick="openWin(this.href); return false" title="Help on filling out input #3.">?</a>]
        Cause Code<br />
        <select size="1" name="cause">
         <option value="-1" selected>&mdash;&mdash;Select one&mdash;&mdash;</option>
         <option value="">Cause - 190</option>
         <option value="B">Option B</option>
         <option value="C">Option C</option>
        </select>
       </label><br /><br />
    
    
       <label><!--[<a href="help.html#input7" onclick="openWin(this.href); return false" title="Help on filling out input #7.">?</a>] -->
        Disposition Narrative
        <textarea id="dn" rows="8" cols="30" name="dn"></textarea>
       </label>
    Thanks

  • #2
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    It would help if you told us WHAT the changes are supposed to be in both cases.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #3
    New Coder
    Join Date
    Feb 2013
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    It would help if you told us WHAT the changes are supposed to be in both cases.
    The first drop down will provide a few lines of text. The second drop down will need to change a word within that same text.

    For example if the options of drop down 1 are:

    This is a random string of text.
    This is the second string of random text.
    And finally, this is the third string of text.

    They would pick one of the strings, lets say they picked the first one:

    This is a random string of text.

    Now, they can choose some options from the second drop down:

    random
    short
    funny

    When they choose from the second drop down, lets say short, it changes the text to this:

    This is a short string of text.

    Any ideas?

  • #4
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,925
    Thanks
    56
    Thanked 548 Times in 545 Posts
    so, you decide which word is going to be changed, and they decide the word to change it to?

  • #5
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    What happens if they chose "random" from the second drop down?

    Would you change
    This is a random string of text.
    to
    This is a random string of text.
    (in other words, change random to random, so no change?)

    Sorry...but that's really as clear as mud.
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • #6
    New Coder
    Join Date
    Feb 2013
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    so, you decide which word is going to be changed, and they decide the word to change it to?
    Yes that is correct

  • #7
    New Coder
    Join Date
    Feb 2013
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    What happens if they chose "random" from the second drop down?

    Would you change
    This is a random string of text.
    to
    This is a random string of text.
    (in other words, change random to random, so no change?)

    Sorry...but that's really as clear as mud.
    The first drop down is going to populate a predetermined string of text into a text field. There will need to be changes within that string that I need to be able to change from another drop down.

    If they select from the first drop down:

    This is a random string of text

    they will then need to pick from a list of choices from a second drop down:

    funny
    sad
    long

    If they choose sad than the text within the text area will then change to:

    This is a sad string of text

    I dont know how to explain this any clearer. If you dont understand than I will keep looking. Thanks for trying though.

  • #8
    Senior Coder xelawho's Avatar
    Join Date
    Nov 2010
    Posts
    2,925
    Thanks
    56
    Thanked 548 Times in 545 Posts
    beginning to get it, but there's one thing that will either make this easy or slightly tricky.

    you posted before that the first drop down could look something like this:

    This is a random string of text.
    This is the second string of random text.
    And finally, this is the third string of text.

    So presumably for the first two options "random" would be the word you wanted to change. But what about if they choose the third?

    Would it be that for each option you would want to store its "changeable word" elsewhere to refer to if that option is chosen?

    Or is that a bad example, and will every option always have the same changeable word, meaning that the example should have been something like:

    This is a random string of text.
    This is the second string of random text.
    And finally, this is the third random string of text.

    with "random" getting changed out regardless of selection?

    Actually, thinking about it, neither is that complicated but you do have to be clear about what you want to do - it may seem straightforward to you, but you are being a little vague.

  • #9
    Supreme Master coder! Old Pedant's Avatar
    Join Date
    Feb 2009
    Posts
    25,200
    Thanks
    75
    Thanked 4,342 Times in 4,308 Posts
    Actually, I don't think it's too hard to have a different "change word" for each <option> in the first dropdown.

    Maybe this?
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <div>
       <div id="message">?</div>
       <hr/>
       <form id="theForm">
       <select name="one">
           <option value="">--choose one--</option>
           <option value="chocolate"> I love eating chocolate </option>
           <option value="random"> This is a random string of text </option>
           <option value="zamboni"> Have fun driving a zamboni! </opton>
       </select>
       <select name="two">
       </select>
       </form>
    </div>
    
    <script type="text/javascript">
    (
      function( )
      {
          var choices = {
              "chocolate" : ["pizza","sushi","chow mein"],
              "random"    : ["sad","funny","useless","interesting","dull"],
              "zamboni"   : ["race car","tricycle","jet ski"]
          };
    
          var msg = document.getElementById("message");
          var form = document.getElementById("theForm");
    
          form.one.onchange = function( )
          {
              msg.innerHTML = "?";
    
              var sel2 = form.two;
              for ( var op = sel2.options.length-1; op >= 0; --op )
              {
                  sel2.options[op] = null;
              }
              var selix = this.selectedIndex;
              if ( selix === 0 ) return;
              msg.innerHTML = this.options[selix].text;
              
              sel2.options[0] = new Option("--choose one--","");
              var ch = choices[this.value];
              for ( var c = 0; c < ch.length; ++c )
              {
                  sel2.options[c+1] = new Option( ch[c], ch[c] );
              }
          }
          
          form.two.onchange = function( )
          {
              if ( this.value === "" ) return;
              var sel1 = form.one;
              var txt = sel1.options[sel1.selectedIndex].text;
              msg.innerHTML = txt.replace( sel1.value, this.value );
          }
    
      }
    )();
    </script>
    </body>
    </html>
    An optimist sees the glass as half full.
    A pessimist sees the glass as half empty.
    A realist drinks it no matter how much there is.

  • Users who have thanked Old Pedant for this post:

    min222002 (03-01-2013)

  • #10
    New Coder
    Join Date
    Feb 2013
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by xelawho View Post
    beginning to get it, but there's one thing that will either make this easy or slightly tricky.

    you posted before that the first drop down could look something like this:

    This is a random string of text.
    This is the second string of random text.
    And finally, this is the third string of text.

    So presumably for the first two options "random" would be the word you wanted to change. But what about if they choose the third?

    Would it be that for each option you would want to store its "changeable word" elsewhere to refer to if that option is chosen?

    Or is that a bad example, and will every option always have the same changeable word, meaning that the example should have been something like:

    This is a random string of text.
    This is the second string of random text.
    And finally, this is the third random string of text.

    with "random" getting changed out regardless of selection?

    Actually, thinking about it, neither is that complicated but you do have to be clear about what you want to do - it may seem straightforward to you, but you are being a little vague.
    I would prefer to be able to choose the word that needs to be changed because I actually need to add several drop downs but I just wanted to make it easier to explain. If I have to make the string more rigid I will but, like I said, I would prefer the option to use any word in the string. Thanks.

  • #11
    New Coder
    Join Date
    Feb 2013
    Posts
    10
    Thanks
    3
    Thanked 0 Times in 0 Posts
    Quote Originally Posted by Old Pedant View Post
    Actually, I don't think it's too hard to have a different "change word" for each <option> in the first dropdown.

    Maybe this?
    Code:
    <!DOCTYPE html>
    <html>
    <body>
    <div>
       <div id="message">?</div>
       <hr/>
       <form id="theForm">
       <select name="one">
           <option value="">--choose one--</option>
           <option value="chocolate"> I love eating chocolate </option>
           <option value="random"> This is a random string of text </option>
           <option value="zamboni"> Have fun driving a zamboni! </opton>
       </select>
       <select name="two">
       </select>
       </form>
    </div>
    
    <script type="text/javascript">
    (
      function( )
      {
          var choices = {
              "chocolate" : ["pizza","sushi","chow mein"],
              "random"    : ["sad","funny","useless","interesting","dull"],
              "zamboni"   : ["race car","tricycle","jet ski"]
          };
    
          var msg = document.getElementById("message");
          var form = document.getElementById("theForm");
    
          form.one.onchange = function( )
          {
              msg.innerHTML = "?";
    
              var sel2 = form.two;
              for ( var op = sel2.options.length-1; op >= 0; --op )
              {
                  sel2.options[op] = null;
              }
              var selix = this.selectedIndex;
              if ( selix === 0 ) return;
              msg.innerHTML = this.options[selix].text;
              
              sel2.options[0] = new Option("--choose one--","");
              var ch = choices[this.value];
              for ( var c = 0; c < ch.length; ++c )
              {
                  sel2.options[c+1] = new Option( ch[c], ch[c] );
              }
          }
          
          form.two.onchange = function( )
          {
              if ( this.value === "" ) return;
              var sel1 = form.one;
              var txt = sel1.options[sel1.selectedIndex].text;
              msg.innerHTML = txt.replace( sel1.value, this.value );
          }
    
      }
    )();
    </script>
    </body>
    </html>

    PERFECT!!!! Thanks you so much! This is exactly what I was looking for.


  •  

    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
    •