By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
432,483 Members | 1,052 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 432,483 IT Pros & Developers. It's quick & easy.

Using Javascript variable in HTML Form

P: 2
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.

Share this Question
Share on Google+
3 Replies


Dormilich
Expert Mod 5K+
P: 8,639
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

P: 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
Expert Mod 5K+
P: 8,639
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.