Passing forms between html pages

Question

I've got an assignment to pass data between 2 .htm pages, in a manner which the source gets copied to the destination.

sourcePage.htm contains a form. (it contains more controls this is just a sample)

<form id="myform" action="destPage.htm" method="get" >
    <input type="text" name="user" />        
    <input type="submit" name="submit" value="Submit" />        
</form>

and destPage.htm is blank.

Using JavaScript I am required to parse the data from the url, that part isn't the problem , the problem is that I am also required that destPage would be an exact duplicate of sourcePage.

My question is, if there's a way to pass the form as an object or some way to pass the control types and their properties along side the data.

Answer 1

You specified in the answer of ek_ny, that you want to dynamically build the form, based on it's input.

You can do this, in fact, with the JavaScript DOM :

var i = document.createElement('input');
i.setAttribute('type', "text");
i.setAttribute('name', "user");

var f = document.createElement('form');
f.setAttribute('action', "destpage.html");
// etc.

f.appendChild(i);

document.getElementById('container').appendChild(f);

The form will be added as a child in the <div id="container"> container.

Now you can use hidden input elements, which give, for instance, the specifics of the form:

<form>
    <input type="hidden" name="x_type" value="input-text" />
    <input name="x" type="text" />

    <input type="hidden" name="y_type" value="select:[...]" />
    <select name="y">
        ...
    </select>
</form>

Answer 2

As far as I know, you won't be able to do a post between two pages. At least when I've attempted that you get an error-- it really doesn't make sense to have a post from one static page to the other (right?). What you can do is serialize the data you want to pass, put it on the url string to the next page and then deserialize that data and populate the controls on the destination page. If the html between the two pages is identical, then it should be pretty straightforward, if not it will be a little tricker. If you used jQuery it would be pretty easy, because you could serialize an entire form. If you need to come up with a generic solution (and you should, because it will help you learn) that's one thing, if you need to just get it working for this assignment and there are only a couple of form fields, you'll just need to encode the values you want to pass and pass them on a URL string with a get request.