Solved

createElement, name attribute, and ASP request form field retrieval

Posted on 2007-04-10
7
592 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
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 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
PeopleSoft Has Never Been Easier

PeopleSoft Adoption Made Smooth & Simple!

On-The-Job Training Is made Intuitive & Easy With WalkMe's On-Screen Guidance Tool.  Claim Your Free WalkMe Account Now

 
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

Get 15 Days FREE Full-Featured Trial

Benefit from a mission critical IT monitoring with Monitis Premium or get it FREE for your entry level monitoring needs.
-Over 200,000 users
-More than 300,000 websites monitored
-Used in 197 countries
-Recommended by 98% of users

Question has a verified solution.

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

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the benefit of using external CSS files and the relationship between class and ID selectors. Create your external css file by saving it as style.css then set up your style tags: (CODE) Reference the nav tag and set your prop…
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 …
Suggested Courses

632 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