Pass variable selected from drop down option field to text fields

Collapse
This topic is closed.
X
X
 
  • Time
  • Show
Clear All
new posts
  • Dan

    #1

    Pass variable selected from drop down option field to text fields

    Can anyone offer suggestions on how to do this or if it is possible?

    I have a form that uses a drop down box and 2 text fields.

    What I am trying to do is have the value of each text box set by the
    choice from the drop down box.

    Something like:

    <form name="populatef rm" id="contactfrm " method="post"
    action="results .asp">

    <select name="region" size="10">
    <option value="Choice 1" JavaScript "SET Text Box 1 to 12:00; SET Text
    Box 2 to 5:00">Choice 1</option>
    <option value="Choice 2" JavaScript "SET Text Box 2 to 5:00; SET Text
    Box 1 to 11:00">Choice 2</option>
    </select>
    <P>
    <input type="text" name="text_box_ 1" value="value from drop down box
    script" size="5"><BR>
    <input type="text" name="text_box_ 2" value="value from drop down box
    script" size="5"><BR>

    <input type="submit" value="Submit">
    </form>


    This is related to the time question I asked below. I've searched the
    web and can't find exactly what I am looking for.

    Thanks, Dan
  • Mick White

    #2
    Re: Pass variable selected from drop down option field to text fields

    Dan wrote:
    [color=blue]
    > What I am trying to do is have the value of each text box set by the
    > choice from the drop down box.
    >
    > Something like:
    >
    > <form name="populatef rm" id="contactfrm " method="post"
    > action="results .asp">
    >[/color]
    <form ...>
    <select name="region" onchange
    ="this.form['text_box_'+(th is.selectedInde x+1)].value
    =this[this.selectedIn dex].value">
    <option value="5.00" >Choice 1</option>
    <option value="11.00">C hoice 2</option>
    <input type="text" name="text_box_ 1"size="5">< BR>
    <input type="text" name="text_box_ 2" size="5">
    </select>
    </form>

    Mick

    Comment

    • Dan

      #3
      Re: Pass variable selected from drop down option field to text fields

      Thank you for posting the script, I think my
      question wasn't clear. I tried modifing the posted script but I'm
      missing something.

      What I would like to do is have the drop down
      selection keeps it defined variable that is passed on
      to database. Depending on which value from the drop
      down box is selected, it will populate 2 different
      text boxes with 2 different values.

      Thanks for any help!

      Here is the script:

      <SCRIPT LANGUAGE="JavaS cript">

      var firstArray = new Array("('Select region','',true ,true)",

      //
      Each field below will have 2 different time values
      that will be added to the 2 text boxes.
      //

      "('this value selected and sent to script on submit'
      value_1_for_tex t_box_1=5:00;
      value_2_for_tex t_box_2=12:00;) ",
      "('Highway 1' value_1_for_tex t_box_1=11:00;
      value_2_for_tex t_box_2=1:00;)" ,
      "('Highway 2' value_1_for_tex t_box_1=7:00;
      value_2_for_tex t_box_2=4:00;)" ,
      "('highway 3' value_1_for_tex t_box_1=8:00;
      value_2_for_tex t_box_2=22:00;) ",
      "('etc. for about 6 more locations')");


      var secondArray = new Array("('Select region','',true ,true)",
      "('highway 4' value_1_for_tex t_box_1=3:00;
      value_2_for_tex t_box_2=6:00;)" ,
      "('highway 5'value_1_for_t ext_box_1=5:00;
      value_2_for_tex t_box_2=17:00;) ",
      "('etc. for about 6 more locations')");
      function populateLocatio n(inForm,select ed) {
      var selectedArray = eval(selected + "Array");

      for (var i=0; i < selectedArray.l ength; i++) {
      eval("inForm.lo cation.options[i]=" + "new Option" +
      selectedArray[i]);
      }
      }
      </script>

      <script type="text/javascript">
      function addTimes(a,b,c) {
      if (a.value != '') {
      /* Validate input here to check time entered is
      of correct hh:mm format and within required
      range
      Handle error if is isn't
      */
      }
      var t0 = a.value.split(' :');
      var t1 = b.value.split(' :');
      var t2 = c.value.split(' :');

      var m1 = +t0[1] + +t1[1];
      var h1 = +t0[0] + +t1[0] + Math.floor(m1/60);
      m1 = (m1 % 60);
      b.value = h1 + ':' + m1;

      var m2 = +t0[1] + +t2[1];
      var h2 = +t0[0] + +t2[0] + Math.floor(m2/60);
      m2 = (m2 % 60);
      c.value = h2 + ':' + m2;
      }
      </script>
      </head>

      <body>



      <form method="POST" action="results .asp" name="loc">

      //Below is the value that needs to be passed on to the
      ASP form. The value selected below will load a 2nd
      drop down list that will contain the two variables for
      the text boxes.
      //

      <select name="region"
      onChange="popul ateLocation(doc ument.loc,docum ent.loc.region. options[document.loc.re gion.selectedIn dex].value)">
      <option selected value=''>Select Region</option>
      <option value='Region1' >Region1</option>
      <option value='Region2' >Region2</option>
      </select>

      //The drop down list below is populated by the 1st
      drop down list script and contains 1 variable that is
      passed to the Data Base and contains the two variables
      that need to be added to the 2 text boxes.
      //

      <select name="location" >
      <option value=''>Choose Region 1st</option>
      </select>


      <input type="text" name="location_ 1"
      size="20"></font>


      <label for="inTime">
      <input type="text" name="inTime"
      onblur="addTime s(this,this.for m.time1,
      this.form.time2 )"></label>

      //The time value is inserted below from your script
      using values from the second set of drop down boxes.
      //

      <input type="text" name="time1"
      value="this is the part I am trying to script1"></label>

      //The 2nd time value is inserted below from your
      script using values from the second set of drop down
      boxes.
      //

      <label for="inTime"><i nput type="text"
      name="time2" value="this is the part I am trying to script2"></label>

      <input type="submit" value="Submit" name="B1">
      <input type="reset" value="Reset" name="B2">
      </form>


      Mick White <mwhite13BOGUS@ rochester.rr.co m> wrote in message news:<GeLpd.153 48$Uf.4608@twis ter.nyroc.rr.co m>...[color=blue]
      > Dan wrote:
      >[color=green]
      > > What I am trying to do is have the value of each text box set by the
      > > choice from the drop down box.
      > >
      > > Something like:
      > >
      > > <form name="populatef rm" id="contactfrm " method="post"
      > > action="results .asp">
      > >[/color]
      > <form ...>
      > <select name="region" onchange
      > ="this.form['text_box_'+(th is.selectedInde x+1)].value
      > =this[this.selectedIn dex].value">
      > <option value="5.00" >Choice 1</option>
      > <option value="11.00">C hoice 2</option>
      > <input type="text" name="text_box_ 1"size="5">< BR>
      > <input type="text" name="text_box_ 2" size="5">
      > </select>
      > </form>
      >
      > Mick[/color]

      Comment

      • Dan

        #4
        Re: Pass variable selected from drop down option field to text fields

        I'm making some progress.

        I can't seem to get this to take more than 1 variable. High_Way2 will
        not pass on its time value.

        Anyone see any glaring errors?

        Thanks again for all the help.

        <script language="JavaS cript">
        <!--

        function Trip_Time(Traff ic_Results) {
        if (document.Traff ic_Results.CIP_ Diff.value == "High_Way1" ) {
        document.Traffi c_Results.displ ay_time.value = "2:20";

        if (document.Traff ic_Results.CIP_ Diff.value == "High_Way1" ) {
        document.Traffi c_Results.displ ay_time2.value = "4:30";

        if (document.Traff ic_Results.CIP_ Diff.value == "High_Way2" ) {
        document.Traffi c_Results.displ ay_time.value = "2:20";

        if (document.Traff ic_Results.CIP_ Diff.value == "High_Way2" ) {
        document.Traffi c_Results.displ ay_time2.value = "4:30";

        }

        }
        }

        }
        else {
        document.Traffi c_Results.displ ay_time.value = "0:00";

        document.Traffi c_Results.displ ay_time2.value = "0:00";

        }
        }

        // -->
        </SCRIPT>
        </HEAD>

        <BODY BGCOLOR="white" >

        <form name="Traffic_R esults">


        <select name="CIP_Diff" onChange="Trip_ Time()">
        <option value="choose" selected>Choose </option>
        <option value="High_Way 1">High Way 1</option>
        <option value="High_Way 2">High Way 2</option>

        </select>&nbsp;&n bsp;&nbsp; <font size="-1">Starting Location</font>
        <BR>

        Time at Location <input type=text name="reported_ time" size=5
        value=""><br>
        ETA 1 <input type=text name="display_t ime" size=5 value="0:00"><b r>
        ETA 2 <input type=text name="display_t ime2" size=5 value="0:00">

        </form>

        Comment

        • RobB

          #5
          Re: Pass variable selected from drop down option field to text fields

          docean@rocketma il.com (Dan) wrote in message news:<296dd184. 0411281502.1d8f a71b@posting.go ogle.com>...[color=blue]
          > I'm making some progress.
          >
          > I can't seem to get this to take more than 1 variable. High_Way2 will
          > not pass on its time value.
          >
          > Anyone see any glaring errors?
          >
          > Thanks again for all the help.
          >
          > <script language="JavaS cript">
          > <!--
          >
          > function Trip_Time(Traff ic_Results) {
          > if (document.Traff ic_Results.CIP_ Diff.value == "High_Way1" ) {
          > document.Traffi c_Results.displ ay_time.value = "2:20";
          >
          > if (document.Traff ic_Results.CIP_ Diff.value == "High_Way1" ) {
          > document.Traffi c_Results.displ ay_time2.value = "4:30";
          >
          > if (document.Traff ic_Results.CIP_ Diff.value == "High_Way2" ) {
          > document.Traffi c_Results.displ ay_time.value = "2:20";
          >
          > if (document.Traff ic_Results.CIP_ Diff.value == "High_Way2" ) {
          > document.Traffi c_Results.displ ay_time2.value = "4:30";
          >
          > }
          >
          > }
          > }
          >
          > }
          > else {
          > document.Traffi c_Results.displ ay_time.value = "0:00";
          >
          > document.Traffi c_Results.displ ay_time2.value = "0:00";
          >
          > }
          > }
          >
          > // -->
          > </SCRIPT>
          > </HEAD>
          >
          > <BODY BGCOLOR="white" >
          >
          > <form name="Traffic_R esults">
          >
          >
          > <select name="CIP_Diff" onChange="Trip_ Time()">
          > <option value="choose" selected>Choose </option>
          > <option value="High_Way 1">High Way 1</option>
          > <option value="High_Way 2">High Way 2</option>
          >
          > </select>&nbsp;&n bsp;&nbsp; <font size="-1">Starting Location</font>
          > <BR>
          >
          > Time at Location <input type=text name="reported_ time" size=5
          > value=""><br>
          > ETA 1 <input type=text name="display_t ime" size=5 value="0:00"><b r>
          > ETA 2 <input type=text name="display_t ime2" size=5 value="0:00">
          >
          > </form>[/color]

          You've posted so much conflicting code, hard to even guess at what
          you're doing. In these instances, it's usually best to post some
          (valid) HTML, with a simple description of what needs to happen.

          Store the data in an object/array (same thing, really) and use the
          selected option value as a 'key' to extract & process it.

          <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
          "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dt d">
          <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
          <head>
          <title>untitled </title>
          <script type="text/javascript">
          //<![CDATA[

          var data = new Object;
          data['High_Way1'] = '2:20|4:30';
          data['High_Way2'] = '3:40|5:15';
          data['default'] = '0:00|0:00';

          function trip_time(selOb j)
          {
          var sval = selObj.options[selObj.selected Index].value, //get selected
          value
          els = selObj.form.ele ments, //form elements
          separator = '|', //separates data (above)
          d = data[sval || 'default'].split(separato r); //so, split it into an
          array
          els.display_tim e.value = d[0]; //output 1st element
          els.display_tim e2.value = d[1]; //output 2nd element
          }

          //]]>
          </script>
          </head>
          <body>
          <form name="Traffic_R esults">
          <select name="CIP_Diff" onchange="retur n trip_time(this) ">
          <option value="" selected="selec ted">Choose</option>
          <option value=""></option>
          <option value="High_Way 1">High Way 1</option>
          <option value="High_Way 2">High Way 2</option>
          </select>
          &nbsp;&nbsp;&nb sp; <font size="-1">Starting Location</font>
          <br />
          Time at Location <input type="text" name="reported_ time" value=""
          size="5" />
          <br />
          ETA 1 <input type="text" name="display_t ime" value="0:00" size="5"><br
          />
          ETA 2 <input type="text" name="display_t ime2" value="0:00" size="5" />
          </form>
          </body>
          </html>

          Comment

          Working...