Solved

createElement, name attribute, and ASP request form field retrieval

Posted on 2007-04-10
7
586 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
PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

 
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

Problems using Powershell and Active Directory?

Managing Active Directory does not always have to be complicated.  If you are spending more time trying instead of doing, then it's time to look at something else. For nearly 20 years, AD admins around the world have used one tool for day-to-day AD management: Hyena. Discover why

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Preface This is the third article about the EE Collaborative Login Project. A Better Website Login System (http://www.experts-exchange.com/A_2902.html) introduces the Login System and shows how to implement a login page. The EE Collaborative Logi…
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.
The viewer will receive an overview of the basics of CSS showing inline styles. In the head tags set up your style tags: (CODE) Reference the nav tag and set your properties.: (CODE) Set the reference for the UL element and styles for it to ensu…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …

809 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