Update text in textfield with two different dropdown boxes

min222002 · 02-25-2013, 03:19 PM

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

Old Pedant · 02-25-2013, 07:32 PM

It would help if you told us WHAT the changes are supposed to be in both cases.

min222002 · 02-26-2013, 06:23 PM

Quote:

Originally Posted by Old Pedant

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?

xelawho · 02-26-2013, 06:43 PM

so, you decide which word is going to be changed, and they decide the word to change it to?

Old Pedant · 02-27-2013, 12:00 AM

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.

min222002 · 02-28-2013, 04:51 PM

Quote:

Originally Posted by xelawho

so, you decide which word is going to be changed, and they decide the word to change it to?

Yes that is correct

min222002 · 02-28-2013, 04:57 PM

Quote:

Originally Posted by Old Pedant

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.

xelawho · 02-28-2013, 07:02 PM

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.

Old Pedant · 02-28-2013, 10:12 PM

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>

min222002 · 03-01-2013, 01:04 PM

Quote:

Originally Posted by xelawho

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.

min222002 · 03-01-2013, 01:11 PM

Quote:

Originally Posted by Old Pedant

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.