Using Javascript variable in HTML Form

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • scottmacd
    New Member
    • Feb 2012
    • 2
    #1

    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:

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"

<html lang="en">

<head>

<SCRIPT LANGUAGE="JavaScript">

<!-- Begin
<!--
  function Calculate()
  {
    if(document.form1.switcher.value == "=>")
      timeToHuman();
    else if(document.form1.switcher.value == "<=")
      humanToTime();
  }
  function timeToHuman()
  {
    var theDate = new Date(document.form1.timeStamp.value * 1000);
    dateString = theDate.toGMTString();
    arrDateStr = dateString.split(" ");
    document.form1.inMon.value = getMonthNum(arrDateStr[2]);
    document.form1.inDay.value = arrDateStr[1];
    document.form1.inYear.value = arrDateStr[3];
    document.form1.inHr.value = arrDateStr[4].substr(0,2);
    document.form1.inMin.value = arrDateStr[4].substr(3,2);
    document.form1.inSec.value = arrDateStr[4].substr(6,2);
  }
  function humanToTime()
  {
    var humDate = new Date(Date.UTC(document.form1.inYear.value,
          (stripLeadingZeroes(document.form1.inMon.value)-1),
          stripLeadingZeroes(document.form1.inDay.value),
          stripLeadingZeroes(document.form1.inHr.value),
          stripLeadingZeroes(document.form1.inMin.value),
          stripLeadingZeroes(document.form1.inSec.value)));
    document.form1.timeStamp.value = (humDate.getTime()/1000.0);
  }
  function pointRight()
  {
    document.form1.switcher.value="=>";
  }
  function pointLeft()
  {
    document.form1.switcher.value="<=";
  }
  function stripLeadingZeroes(input)
  {
    if((input.length > 1) && (input.substr(0,1) == "0"))
      return input.substr(1);
    else
      return input;
  }
  function getMonthNum(abbMonth)
  {
    var arrMon = new Array("Jan","Feb","Mar","Apr","May","Jun",
          "Jul","Aug","Sep","Oct","Nov","Dec");
    for(i=0; i<arrMon.length; i++)
    {
      if(abbMonth == arrMon[i])
        return i+1;
    }
  }
//  End -->
</script>

</head>

<body>
Sina Weibo API Search:
<form method="get" target="_blank" action="http://api.t.sina.com.cn/statuses/search.xml">
<input type="hidden"   name="source" size="31"
 maxlength="255" value="0" />
Search by keyword: <input type="text"   name="q" size="31"
 maxlength="255" value="" />
<br>
Search by User ID: <input type="text"   name="fuid" size="31"
 maxlength="255" value="" />
<br>
Start time (UNIX TIMESTAMP): <input type="text"   name="startime" size="31"
 maxlength="255" value="" />
<br>
End time (UNIX TIMESTAMP):<input type="text"   name="endtime" size="31"
 maxlength="255" value="" />
<br>
Count:<input type="text"   name="new Date" size="31"
 maxlength="255" value="" />
<br>
<input type="submit" value="Weibo Search" />

</form>

<form name=form1>
<table border=0>
<tr>
  <th>Unix timestamp (secs):</th>
  <td valign=bottom rowspan=2>
    <input type=button name=switcher value="=>" onClick="Calculate();"></td>
  <th>Mon:</th>
  <th>*</th>
  <th>Day:</th>
  <th>*</th>
  <th>Year:</th>
  <th>*</th>
  <th>Hr:</th>
  <th>*</th>
  <th>Min:</th>
  <th>*</th>
  <th>Sec:</th>
  <th>*</th>
</tr>
<tr>
  <td align=center><input type=text size=14 maxlength=11 name=timeStamp onKeyUp="pointRight();"></td>
  <td><input type=text size=4 maxlength=2 name=inMon onKeyUp="pointLeft();"></td>
  <th>/</th>
  <td><input type=text size=4 maxlength=2 name=inDay onKeyUp="pointLeft();"></td>
  <th>/</th>
  <td><input type=text size=4 maxlength=4 name=inYear onKeyUp="pointLeft();"></td>
  <th>at</th>
  <td><input type=text size=4 maxlength=2 name=inHr onKeyUp="pointLeft();"></td>
  <th>:</th>
  <td><input type=text size=4 maxlength=2 name=inMin onKeyUp="pointLeft();"></td>
  <th>:</th>
  <td><input type=text size=4 maxlength=2 name=inSec onKeyUp="pointLeft();"></td>
  <th>GMT</th>
</tr>
</table>
</form>

</body>

</html>
    Tags: form, html, javascript, unix
    • Dormilich
      Recognized Expert Expert
      • Aug 2008
      • 8694
      #2
      and what therein doesn't work as expected?

      some notes though:
      - drop lines 9, 10 & 65. they're not needed
      - stripLeadingZer oes(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.)

        Comment

        • scottmacd
          New Member
          • Feb 2012
          • 2
          #3
          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!

            Comment

            • Dormilich
              Recognized Expert Expert
              • Aug 2008
              • 8694
              #4
              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.

                Comment

                Previous template Next
                Working...