Are there caveats to dynamicly creating a form with javascript?

Question

I have to do a cross site POST (with a redirection, so not using a XMLHTTPRequest), and the base platform is ASP.NET. I don't want to POST all of the controls in the ASP.NET FORM to this other site, so I was considering dynamicly creating a new form element using javascript and just posting that.

Has anyone tried this trick? Is there any caveats?

Answer 1

I do this all the time. Works really well. You will have to look through the Request's parameters manually, though, unless you get creative with what you pass as the parameters won't map onto controls on that page. You could also do this in a REST way by passing the parameters in the query string, but I prefer the forms approach to keep my URLs clean. Note that ASP.NET ignores all forms but it's own on postback so I don't bother removing them.

Example from a GridView template field for below code:

   <asp:TemplateField HeaderText="Station" SortExpression="Name">
   <ItemTemplate>
      <a href="javascript:void(0);" onclick='Redirector.redirect_with_id("StationDetail.aspx", <%# Eval("StationID") != null ? Eval("StationID") : "-1" %>);return false;'>
      <asp:Label ID="nameLabel" runat="server" Text='<%# Bind("Name") %>' /></a>
   </ItemTemplate>
   </asp:TemplateField>

Code below -- requires Prototype:

    // JScript File

   var Redirector = Class.create();

   Redirector.prototype = {
       initialize: function(url,target) {
           this.url = url;
           this.parameters = new Hash();
           this.target = target;
       }, 

    addParameter: function(id,value) {
        this.parameters.set(id, value);
    },

    redirect: function() {
        var form = document.createElement('form');
        document.body.appendChild(form);
        form.action = this.url;
        form.method = "post";
        if (this.target) {
            form.target = this.target;
        }
        this.parameters.each( function(pair) {
            var input = document.createElement('input');
            input.id = pair.key;
            input.name = pair.key;
            input.value = pair.value;
            input.style.display = 'none';
            form.appendChild(input);
        });
        form.submit();
    }
};

Redirector.redirect_with_id = function(url,id,target) {
    var redirector = new Redirector( url, target );
    redirector.addParameter( 'ID', id );
    redirector.redirect();
};

Redirector.redirect_with_tag = function(url,tag_name,tag,target) {
    var redirector = new Redirector( url, target );
    redirector.addParameter( tag_name, tag );
    redirector.redirect();
};

Redirector.redirect_with_tags = function(url,tag_names_comma_separated,tag_values_comma_separated,target) {
    var redirector = new Redirector( url, target );
    var tags = tag_names_comma_separated.split( "," );
    var values = tag_values_comma_separated.split( ",");
    for( var i = 0; i< tags.length; i++ )
    {
        redirector.addParameter( tags[i], values[i] );
    }
    redirector.redirect();
};

Answer 2

One caveat: you cannot add a FORM tag to the document using innerHTML. You must add it by creating a new DOM element. You can add fields using innerHTML, but not the form itself.