Solved

createElement, name attribute, and ASP request form field retrieval

Posted on 2007-04-10
7
591 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
Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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

Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

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

Shoutout to Emily Plummer (http://www.experts-exchange.com/members/eplummer26.html) for giving me this article! She did most of it, I just finished it up and posted it for her :)    Introduction In a previous article (http://www.experts-exchang…
Introduction Knockoutjs (Knockout) is a JavaScript framework (Model View ViewModel or MVVM framework).   The main ideology behind Knockout is to control from JavaScript how a page looks whilst creating an engaging user experience in the least …
Viewers will learn about basic arrays, how to declare them, and how to use them. Introduction and definition: Declare an array and cover the syntax of declaring them: Initialize every index in the created array: Example/Features of a basic arr…
Viewers will learn about the regular for loop in Java and how to use it. Definition: Break the for loop down into 3 parts: Syntax when using for loops: Example using a for loop:

739 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