Solved

createElement, name attribute, and ASP request form field retrieval

Posted on 2007-04-10
7
584 Views
Last Modified: 2013-11-19
Hi.

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
0
Comment
Question by:Barry Jones
  • 4
  • 3
7 Comments
 
LVL 63

Accepted Solution

by:
Zvonko earned 500 total points
ID: 18884393
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.

0
 
LVL 12

Author Comment

by:Barry Jones
ID: 18884548
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):

document.getElementById("frmTest").appendChild(objInput);

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

0
 
LVL 12

Author Comment

by:Barry Jones
ID: 18885157
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
0
How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

 
LVL 63

Expert Comment

by:Zvonko
ID: 18888056
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;




0
 
LVL 12

Author Comment

by:Barry Jones
ID: 18888963
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" >
<head>
    <title>Untitled Page</title>
    <%
       response.write request.querystring
    %>
</head>
<body>
<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];
   
    frm.appendChild(objInput);
  </script>
  <input type=submit id="cmdSubmit" value="Go" />
</form>
</body>
</html>
0
 
LVL 63

Expert Comment

by:Zvonko
ID: 18892423
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.
0
 
LVL 12

Author Comment

by:Barry Jones
ID: 18895015
Doh!  What a doughnut! lol

Whaddaya know it works great!

Thanks for your help...

TheFoot
0

Featured Post

Maximize Your Threat Intelligence Reporting

Reporting is one of the most important and least talked about aspects of a world-class threat intelligence program. Here’s how to do it right.

Join & Write a Comment

What is Node.js? Node.js is a server side scripting language much like PHP or ASP but is used to implement the complete package of HTTP webserver and application framework. The difference is that Node.js’s execution engine is asynchronous and event…
Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
Viewers will learn about the different types of variables in Java and how to declare them. Decide the type of variable desired: Put the keyword corresponding to the type of variable in front of the variable name: Use the equal sign to assign a v…
Viewers will learn about arithmetic and Boolean expressions in Java and the logical operators used to create Boolean expressions. We will cover the symbols used for arithmetic expressions and define each logical operator and how to use them in Boole…

744 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

13 Experts available now in Live!

Get 1:1 Help Now