Offline Google Chrome extension/packaged app: Trying to send form data from one local page to another

Question

Okay, so I've read several tutorials, plus a book on HTML5, which talks a lot about form controls and how much they've changed. So, I've tried testing the code out using this example code. What I want to do is send the form data (specifically a text field for the name of an event that someone wants to count down to and a datetime control for the date and time of the event) to the other HTML5 file for the JavaScript in the file to parse. The problem? The data is not being sent to the file that was specified as the form action!

Here is the code from the HTML file with the form in it (countdown_form.html):

<!DOCTYPE html>
<html>
  <head>
    <title>Collecting countdown data</title>
  </head>
  <body>
    <form method="post" action="countdown.html">
      <table border="1" cellpadding="5">
        <tr>
          <td>Name of event to count down to</td>
          <td><input name="event" type="text"></td>
        </tr>
        <tr>
          <td>Date of event to count down to</td>
          <td><input name="date" type="datetime"></td>
        </tr>
      </table>
      <input name="Submit" type="submit">
    </form>
  </body>
</html>

And here is the code from the HTML file that I am trying to send the form data to (countdown.html):

<!DOCTYPE html>
<html>
  <head>
    <title>
      <script type="text/javascript">
      document.write("Countdown to " + input.text);
      </script>
    </title>
  </head>
  <body>
    <table border="1" cellpadding="5">
      <tr>
        <td>
          <script type="text/javascript" language="JavaScript">
            <!--
            document.write("Time left until " + input.text);
            //-->
          </script>
        </td>
      </tr>
      <tr>
        <td>
          <SCRIPT TYPE="text/javascript" LANGUAGE="JavaScript">
          <!--

          dateFuture = new Date(input.date);

          function GetCount(){

             dateNow = new Date();                                                                        //grab current date
             amount = dateFuture.getTime() - dateNow.getTime();                //calc milliseconds between dates
             delete dateNow;

             // time is already past
             if(amount < 0){
                document.getElementById('countbox').innerHTML="Now!";
             }
             // date is still good
             else{
                days=0;hours=0;mins=0;secs=0;out="";

                amount = Math.floor(amount/1000);//kill the "milliseconds" so just secs

                days=Math.floor(amount/86400);//days
                amount=amount%86400;

                hours=Math.floor(amount/3600);//hours
                amount=amount%3600;

                mins=Math.floor(amount/60);//minutes
                amount=amount%60;

                secs=Math.floor(amount);//seconds

                if(days != 0){out += days +" day"+((days!=1)?"s":"")+", ";}
                if(days != 0 || hours != 0){out += hours +" hour"+((hours!=1)?"s":"")+", ";}
                if(days != 0 || hours != 0 || mins != 0){out += mins +" minute"+((mins!=1)?"s":"")+", ";}
                out += secs +" seconds";
                document.getElementById('countbox').innerHTML=out;

                setTimeout("GetCount()", 1000);
             }
          }

          window.onload=function(){ 
             GetCount(); 
          }; //call when everything has loaded
          //-->
          </script>
          <div id="countbox"></div>
        </td>
      </tr>
    </table>
  </body>
</html>

What I want to know is:

Is it legal for one HTML document to send form data directly to another HTML document,
If it is legal, how come the data from the <input> tags isn't being parsed by the input.text and input.datetime JavaScript variables inside the action document?

Also,

Is it legal to have JavaScript code inside <title> tags?
If it is legal, how come Google Chrome isn't parsing the code?

And if neither of these two things are legal, how exactly would you use form data as:

The title of a document.
As data for JavaScript to parse?

score 4 · Answer 1 · answered May 30 '12 at 04:37

4

If you want to do this, I think your best bet is to use method=get instead of method=post. That way Javascript in your target page will be able to see the parameters. JS cannot see post parameters (you'd need a web server running PHP, ASP.NET, etc. to access those).

To answer your questions explicitly:

It's legal to send, but the browser cannot see the parameters on the target page.
No, it's not legal to have Javascript. However, you could set the title from Javascript using this: document.title = "Some text";
Use either a server-side scripting language, or if you must do this on the client side, use method="get" in your form, and parse the parameters on the target page using window.location.search.

answered May 30 '12 at 04:37

McGarnagle

101,349
31
229
260

I am trying to put this app on the Chrome Web Store as a **packaged** app. This means that yes, I would have to do everything on the client side (including testing things out). Anyway, testing out your little tricks to see how they play out... – realkstrawn93 May 30 '12 at 04:58
Window.location.search did the trick with sending the data over to the URL... now the trick is parsing it in the code to allow the countdown to begin. Right now, all I get is a blank table, no matter what shows up in window.location.search. – realkstrawn93 May 30 '12 at 05:22
I must add, even though the date variable specifically mentions datetime specifically as a control, the field I get when I open the file is a text field. Can anybody explain how that could be? – realkstrawn93 May 30 '12 at 06:53
@Kenny_Strawn the "datetime" type input is basically a "text" input. It just suggests to the browser to display a datetime-specific UI. As far as parsing window.location.search, I'd suggest starting as follows. Use *window.location.search.split('&')*, and then iterate over the results. Parse each one by splitting on '='. – McGarnagle May 30 '12 at 08:53
I seemed to find some information on parsing window.location.search in other threads here (i.e. [this one](http://stackoverflow.com/questions/5176115/how-do-i-extract-search-term-from-urls)) and found the function mentioned in that one. It works, and the data is parsed (somewhat), but any spaces in the input become plus signs in the search keys, which screw up the parsing by the code, and the date is what's really messed up, as the slashes become "%2F"'s, which causes the date to come up NaN. Any idea if that function in answer 3 can be modified to remove the pluses and URL character codes? – realkstrawn93 Jun 14 '12 at 03:23
@Kenny_Strawn yes, you just have to run a URL decode. Plusses aren't really URL encoding, so I guess you could use a replace for that. For example, **decodeURIComponent("%2F+").replace("+", " ")** returns "/ ". – McGarnagle Jun 14 '12 at 03:42

Offline Google Chrome extension/packaged app: Trying to send form data from one local page to another

1 Answers1