How can I generate a value from a drop down and pass it to a text box

Hi,

Below is some html which has a popup calendar to select a date and time format and assign it to a text box.

How can I also generate a date time value using the predefinded values from the drop down and assign that value to the same text box.

I must be in this format : dd-mm-yyyy hh:mm:ss.

<form id="form1" name="form1" method="post" action="savenote.asp">
<table width="920" border="0">
  <tr>
    <td colspan="3">Add Customer Call Note </td>
    </tr>
  <tr>
    <td width="339">Call Back Status </td>
    <td width="414">Call Note 
      <input name="frmCURN" type="hidden" id="frmCURN" value="329376" />
      <input name="frmSID" type="hidden" id="frmSID" value="1" /></td>
    <td width="153">Call Back Date / Time </td>
  </tr>
  <tr>
    <td><select name="frmCallBack" size="1" id="frmCallBack">
                  <option value="0">-- select --
                    
                  </option>
                  <option value="1">Not In | 
                  </option>
                  <option value="2">Call Back Later | 
                  </option>
                  <option value="3">Call Back Tomorrow | DateAdd("d",1,Date)
                  </option>
                  <option value="4">Call Back Next Week | DateAdd("d",7,Date)
                  </option>
                  <option value="5">Call Back In A Month | DateAdd("m",1,Date)
                  </option>
                  <option value="6">Call Back In Two Months | DateAdd("m",2,Date)
                  </option>
                  <option value="7">Dont Call Me Again | 
                  </option>
                </select>    </td>
    <td><input name="frmCallNote" type="text" id="frmCallNote" size="60" maxlength="60" /></td>
    <td><input name="frmCallBackDate" type="Text" id="frmCallBackDate" value="" size="16" readonly="">
	  <a href="javascript:cal3.popup();"><img src="img/cal.gif" width="16" height="16" border="0" alt="Click Here to Pick up the date"></a></td>
  </tr>
  <tr>
    <td colspan="3"><hr size="1" /></td>
    </tr>
  <tr>
    <td colspan="3"><table width="100%" border="0">
      <tr>
        <td width="83%">Customer not in when you called, set call back status to Not In, set a time for retry in Call Back Date / Time.</td>
        <td width="17%" align="right"><input type="submit" name="Submit" value="Save" /></td>
      </tr>
    </table></td>
    </tr>
  <tr>
    <td colspan="3">	</td>
  </tr>
</table>
</form>
 
			<script language="JavaScript">
			<!-- // create calendar object(s) just after form tag closed
				 // specify form element as the only parameter (document.forms['formname'].elements['inputname']);
				 // note: you can have as many calendar objects as you need for your application
				var cal3 = new calendar1(document.forms['form1'].elements['frmCallBackDate']);
				cal3.year_scroll = true;
				cal3.time_comp = true;
			//-->
			</script>

Open in new window

BenthamLtdAsked:
Who is Participating?
 
rallsaldoConnect With a Mentor Commented:
Hi,

Add in the following JavaScript function:

function newDate(dateOption)
 {
  var myDate=new Date();
  var myVal;

  switch (dateOption)
   {
   //Tomorrow
   case 3:
    myDate.setDate(myDate.getDate()+1);
    break;

   //Next Week
   case 4:
    myDate.setDate(myDate.getDate()+7);
    break;

   //In one month
   case 5:
      myDate.setDate(myDate.getDate()+30);
    break;

   //In two months
   case 6:
    myDate.setDate(myDate.getDate()+60);
    break;

   default:
    myVal = "none";
    break;
   }

   if (myVal=="none")
    {
     myVal ="";
    }
   else
    {
         //dd-mm-yyyy hh:mm:ss
         //broken down for simplicity
         var myDay = myDate.getDate();
         var myMonth = myDate.getMonth() + 1;
         var myYear = myDate.getYear();

         var myHour = myDate.getHours();
         var myMin = myDate.getMinutes();
         var mySecond = myDate.getSeconds();

         myVal = myDay + "-" + myMonth + "-" + myYear + " " + myHour + ":" + myMin + ":" + mySecond;
      }
   document.getElementById("frmCallNote").value = myVal;

 }

and add in to the Select object a call to the JavaScript function:
<select name="frmCallBack" size="1" id="frmCallBack" onchange="newDate(this.selectedIndex)">

The options are very basic, I have only added 30 days (for 1 month) and 60 days (for 2 months) but this should start you off...

Hope that helps,
R
0
 
BenthamLtdAuthor Commented:
Thanks rallsaldo,

That was spot on.

I have made part of the javascript routine dynamic, and it works a treat.

Many thanks
<script language="JavaScript">
function newDate(dateOption)
 {
  var myDate=new Date();
  var myVal;
 
  switch (dateOption)
   {
   <%do until rsCallBackStatusJava.eof%>   
   //<%=rsCallBackStatusJava("CallBackStatus")%>
   case <%=rsCallBackStatusJava("CallBackID")%>:
    <%=rsCallBackStatusJava("DateCode")%>
    break;
<%rsCallBackStatusJava.movenext
		loop%>
  
 
   default:
    myVal = "none";
    break;
   }
 
   if (myVal=="none")
    {
     myVal ="";
    }
   else
    {
         //dd-mm-yyyy hh:mm:ss
         //broken down for simplicity
         var myDay = myDate.getDate();
         var myMonth = myDate.getMonth() + 1;
         var myYear = myDate.getYear();
 
         var myHour = myDate.getHours();
         var myMin = myDate.getMinutes();
         var mySecond = myDate.getSeconds();
 
         myVal = myDay + "-" + myMonth + "-" + myYear + " " + myHour + ":" + myMin + ":" + mySecond;
      }
   document.getElementById("frmCallBackDate").value = myVal;
 
 }
</script>

Open in new window

0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.