• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 597
  • Last Modified:

createElement, name attribute, and ASP request form field retrieval


I am using document.createElement to create a hidden input element.  All works well except for the fact that I cannot retrieve the value in an ASP page.

var objInputValue = document.createElement('input');
objInputValue.type = 'hidden';
objInputValue.setAttribute("name", arrSels[x].id);
objInputValue.id = arrSels[x].id;

Upon further reading MS says that the name attribute cannot set this way.  I am using FF1.5/2 and IE6/7.

So I tried:

var objInputValue = document.createElement('<input type=\"hidden\" id=\"this\" name=\"this\" ');

This produces a INVALID_STRING client-side error.  I cannot seem to get the syntax right for this line.

How the heck do I create a form field at runtime with JS and retrieve the value with ASP?  Can ASP retrieve based on ID?  I thought not as it uses named key in request collection...??

Thanks, TheFoot
Barry Jones
Barry Jones
  • 4
  • 3
1 Solution
ZvonkoSystems architectCommented:
Set the name attribute the same way as you set the id:

objInputValue.id = arrSels[x].id;
objInputValue.name = arrSels[x].id;

Be aware that name is not accessible on browser side untill the form is submitted.
But on ASP side is the element named correct.

Barry JonesAuthor Commented:
Thanks for your reply Zvonko.  Your code works great.  The problem appears to be the fact that in my original code I append the created object using:

arrSels[x].parentNode.insertBefore(objReplace, arrSels[x]);

which doesn't appear to be attaching the replacement control to the FORM element.  The code below only worked when I attached directly to the FORM element (makes sense):


Do you know how I can find the enclosing FORM tag for any given element?  My script is a generic DHTML replacement for the SELECT element, otherwise I would just use getElementById.

Thanks, TheFoot

Barry JonesAuthor Commented:
Sorry last post was a bit unclear.

My current code uses the DOM hierarchy to attach the newly created element.  This is not the enclosing FORM element, but the (now hidden) SELECT element that the JS Script is replacing.

My test using your code worked but only when attaching the new element to the FORM element.  

So.. I need to find a way of getting a reference to any given elements' parent FORM element, so that I can correctly attach it to the FORM.

Thanks, TheFoot
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

ZvonkoSystems architectCommented:
To get the only or the first form on the page use this:

  var theForm = document.forms[0];

To get the parent form of a form element use this:

  var theForm = objReplace.form;

Barry JonesAuthor Commented:
Thanks.  The code below is what I am testing with.  When I use the first method to get at the form, it works fine, but the second method I cannot get to work.  Any ideas pls?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
    <title>Untitled Page</title>
       response.write request.querystring
<form id="frmTest" action="" method="get">
  <script type="text/javascript">
    var objInput = document.createElement('input');
    objInput.type = 'text';
    objInput.id = 'txtThis';
    objInput.name = 'txtThis';
    // Error: "document.getElementById("cmdSubmit") has no properties"
    //var frm = document.getElementById("cmdSubmit").form;
    // Works but not practical in my req.
    var frm = document.forms[0];
  <input type=submit id="cmdSubmit" value="Go" />
ZvonkoSystems architectCommented:
At the location on the page at the time when the script statement is executed is the form already defined and therefore does document.forms[0] work.
But the submit button is at the time of statement execution is not yet rendered and therefore cannot be accessed.
Move either the the button before statement or put the statement into a body onLoad event handler then is the whole page rendered when you execute the script statements.
Barry JonesAuthor Commented:
Doh!  What a doughnut! lol

Whaddaya know it works great!

Thanks for your help...

Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Free Tool: Site Down Detector

Helpful to verify reports of your own downtime, or to double check a downed website you are trying to access.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now