469,277 Members | 2,076 Online
Bytes | Developer Community
New Post

Home Posts Topics Members FAQ

Post your question to a community of 469,277 developers. It's quick & easy.

Using Javascript variable in HTML Form

I'm sure this is a pretty simple question, so would be amazing if anyone could help me! I'm trying to make an HTML search form which can convert a human date into a UNIX timestamp date and include it in the search, alongside other inputs. Here's what I have currently:

Expand|Select|Wrap|Line Numbers
  1. <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
  2.  
  3. <html lang="en">
  4.  
  5. <head>
  6.  
  7. <SCRIPT LANGUAGE="JavaScript">
  8.  
  9. <!-- Begin
  10. <!--
  11.   function Calculate()
  12.   {
  13.     if(document.form1.switcher.value == "=>")
  14.       timeToHuman();
  15.     else if(document.form1.switcher.value == "<=")
  16.       humanToTime();
  17.   }
  18.   function timeToHuman()
  19.   {
  20.     var theDate = new Date(document.form1.timeStamp.value * 1000);
  21.     dateString = theDate.toGMTString();
  22.     arrDateStr = dateString.split(" ");
  23.     document.form1.inMon.value = getMonthNum(arrDateStr[2]);
  24.     document.form1.inDay.value = arrDateStr[1];
  25.     document.form1.inYear.value = arrDateStr[3];
  26.     document.form1.inHr.value = arrDateStr[4].substr(0,2);
  27.     document.form1.inMin.value = arrDateStr[4].substr(3,2);
  28.     document.form1.inSec.value = arrDateStr[4].substr(6,2);
  29.   }
  30.   function humanToTime()
  31.   {
  32.     var humDate = new Date(Date.UTC(document.form1.inYear.value,
  33.           (stripLeadingZeroes(document.form1.inMon.value)-1),
  34.           stripLeadingZeroes(document.form1.inDay.value),
  35.           stripLeadingZeroes(document.form1.inHr.value),
  36.           stripLeadingZeroes(document.form1.inMin.value),
  37.           stripLeadingZeroes(document.form1.inSec.value)));
  38.     document.form1.timeStamp.value = (humDate.getTime()/1000.0);
  39.   }
  40.   function pointRight()
  41.   {
  42.     document.form1.switcher.value="=>";
  43.   }
  44.   function pointLeft()
  45.   {
  46.     document.form1.switcher.value="<=";
  47.   }
  48.   function stripLeadingZeroes(input)
  49.   {
  50.     if((input.length > 1) && (input.substr(0,1) == "0"))
  51.       return input.substr(1);
  52.     else
  53.       return input;
  54.   }
  55.   function getMonthNum(abbMonth)
  56.   {
  57.     var arrMon = new Array("Jan","Feb","Mar","Apr","May","Jun",
  58.           "Jul","Aug","Sep","Oct","Nov","Dec");
  59.     for(i=0; i<arrMon.length; i++)
  60.     {
  61.       if(abbMonth == arrMon[i])
  62.         return i+1;
  63.     }
  64.   }
  65. //  End -->
  66. </script>
  67.  
  68. </head>
  69.  
  70. <body>
  71. Sina Weibo API Search:
  72. <form method="get" target="_blank" action="http://api.t.sina.com.cn/statuses/search.xml">
  73. <input type="hidden"   name="source" size="31"
  74.  maxlength="255" value="0" />
  75. Search by keyword: <input type="text"   name="q" size="31"
  76.  maxlength="255" value="" />
  77. <br>
  78. Search by User ID: <input type="text"   name="fuid" size="31"
  79.  maxlength="255" value="" />
  80. <br>
  81. Start time (UNIX TIMESTAMP): <input type="text"   name="startime" size="31"
  82.  maxlength="255" value="" />
  83. <br>
  84. End time (UNIX TIMESTAMP):<input type="text"   name="endtime" size="31"
  85.  maxlength="255" value="" />
  86. <br>
  87. Count:<input type="text"   name="new Date" size="31"
  88.  maxlength="255" value="" />
  89. <br>
  90. <input type="submit" value="Weibo Search" />
  91.  
  92. </form>
  93.  
  94. <form name=form1>
  95. <table border=0>
  96. <tr>
  97.   <th>Unix timestamp (secs):</th>
  98.   <td valign=bottom rowspan=2>
  99.     <input type=button name=switcher value="=>" onClick="Calculate();"></td>
  100.   <th>Mon:</th>
  101.   <th>*</th>
  102.   <th>Day:</th>
  103.   <th>*</th>
  104.   <th>Year:</th>
  105.   <th>*</th>
  106.   <th>Hr:</th>
  107.   <th>*</th>
  108.   <th>Min:</th>
  109.   <th>*</th>
  110.   <th>Sec:</th>
  111.   <th>*</th>
  112. </tr>
  113. <tr>
  114.   <td align=center><input type=text size=14 maxlength=11 name=timeStamp onKeyUp="pointRight();"></td>
  115.   <td><input type=text size=4 maxlength=2 name=inMon onKeyUp="pointLeft();"></td>
  116.   <th>/</th>
  117.   <td><input type=text size=4 maxlength=2 name=inDay onKeyUp="pointLeft();"></td>
  118.   <th>/</th>
  119.   <td><input type=text size=4 maxlength=4 name=inYear onKeyUp="pointLeft();"></td>
  120.   <th>at</th>
  121.   <td><input type=text size=4 maxlength=2 name=inHr onKeyUp="pointLeft();"></td>
  122.   <th>:</th>
  123.   <td><input type=text size=4 maxlength=2 name=inMin onKeyUp="pointLeft();"></td>
  124.   <th>:</th>
  125.   <td><input type=text size=4 maxlength=2 name=inSec onKeyUp="pointLeft();"></td>
  126.   <th>GMT</th>
  127. </tr>
  128. </table>
  129. </form>
  130.  
  131. </body>
  132.  
  133. </html>
  134.  
Feb 6 '12 #1

✓ answered by Dormilich

there is no need for doing that in JS. if it is sent to a server script anyways, let the server handle the time conversion (note that this approach also works if JS is disabled).
though if you want you can hook into the form's submit event and do the time conversion there (populating whatever form field you like).

for instance, PHP's strtotime() function is able to convert quite a number of (human readable) time formats.

3 2037
Dormilich
8,651 Expert Mod 8TB
and what therein doesn't work as expected?

some notes though:
- drop lines 9, 10 & 65. they're not needed
- stripLeadingZeroes(value) can be replaced by parseInt(value, 10)
- if you do not need the leading zeroes in the output, you can use Date's get*() methods (getMonth, getYear, getDay, etc.)
Feb 6 '12 #2
Sorry for not making it clearer, currently the script which converts dates to UNIX timestamps and the form which sends a get request to the server are separate.

I was wondering if there was a way to combine the two so that a human date is converted into a unix timestamp and then included in the HTML submit form.

Thanks for you help!
Feb 7 '12 #3
Dormilich
8,651 Expert Mod 8TB
there is no need for doing that in JS. if it is sent to a server script anyways, let the server handle the time conversion (note that this approach also works if JS is disabled).
though if you want you can hook into the form's submit event and do the time conversion there (populating whatever form field you like).

for instance, PHP's strtotime() function is able to convert quite a number of (human readable) time formats.
Feb 7 '12 #4

Post your reply

Sign in to post your reply or Sign up for a free account.

Similar topics

2 posts views Thread by Mike N. | last post: by
2 posts views Thread by Kenneth | last post: by
3 posts views Thread by The Natural Philosopher | last post: by
reply views Thread by suresh191 | last post: by
By using this site, you agree to our Privacy Policy and Terms of Use.