We help IT Professionals succeed at work.

We've partnered with Certified Experts, Carl Webster and Richard Faulkner, to bring you a podcast all about Citrix Workspace, moving to the cloud, and analytics & intelligence. Episode 2 coming soon!Listen Now

x

make object from name?

scrathcyboy
scrathcyboy asked
on
Medium Priority
311 Views
Last Modified: 2006-11-18
Here is typical FORM tag (note it is in DIV).  When I make or builda  name from the main name, javascript complains that it is not an object.  How do I make a name into an object?

<DIV id="a"> <FORM name="a"> <INPUT type="checkbox" class="input" id="a" value="no" onclick="runFunction('a')"></FORM><SPAN id="a">Show</SPAN> </DIV>

Note, all items are named 'a', but want to make the form a1, checkbox a2 and span a3.  How to do this in javascript, so they become usable objects to javascript functions?  Please be simple and clear.  Thanks.
Comment
Watch Question

Your <inputs> don't even need names, just your form.
a.elements[]
As seen here:
http://www.w3schools.com/htmldom/dom_obj_form.asp

Joe P
How does this look:

<html>
<head>
<script type="text/javascript">
function tellall()
{
  for (var i = 0; i < document.a.elements.length-1; i++)
    alert("Element " + i + " has a value: " + a.elements[i].value);
}

</script>
</head>

<body>
<form name="a" onsubmit="return false;">
  Name: <input type="text"><br>
  Random: <input type="text"><br>
  TextArea: <textarea rows=10 cols=30></textarea><br>
  <input type="button" value="Tell All" onclick="tellall();">
</form>
</body>
</html>

Joe P

Joe P
CERTIFIED EXPERT
Top Expert 2006

Commented:
You can also pass the form object directly:

<INPUT type="checkbox" class="input" id="a" value="no" onclick="runFunction(this.form)">

-r-
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
@BogoJoker The form does not need names  Just the Fields!!! (form names are actually not even allowed in html validators)


<html>
<head>
<script type="text/javascript">
function tellall(theForm) {
  for (var i = 0; i < theForm.elements.length-1; i++)
    alert("Element " + i + " has a value: " + theForm.elements[i].value);
}

</script>
</head>

<body>
<form onsubmit="return false;">
  Name: <input type="text" name="a"><br>
  Random: <input type="text" name="b"><br>
  TextArea: <textarea name="c" rows=10 cols=30></textarea><br>
  <input type="button" value="Tell All" onclick="tellall(this.form);">
</form>
</body>
</html>

Commented:
Hi again scrathcyboy!

In your question, you ask:  "How do I make a name into an object?"  What exactly do you mean?  If you have an object, and reference it in as JavaScript function, you can make its name into a string:

var str = obj.name

If the object is an element within another, you can find what it is an element of:

var str = obj.parent.name    // I think that works?
var str = obj.form.name      // if you know it's an element within a form. (I know this works).

In the example you gave:

<DIV id="a"> <FORM name="a"> <INPUT type="checkbox" class="input" id="a" value="no" onclick="runFunction('a')"></FORM><SPAN id="a">Show</SPAN> </DIV>

You said "Note, all items are named 'a', but want to make the form a1, checkbox a2 and span a3.  How to do this in javascript, so they become usable objects to javascript functions?"

I believe if all of your items are named the same, you could be creating more trouble than it's worth to you.  To reference them from JavaScript, then, you'll be depending on order alone, as Joe and Michel discuss above, indexing through the items one at a time.  If you swapped the span and the checkbox in your example, so that 'Show' came before the checkbox, they'd be in a different order in the element array.  You don't want to do that.  That builds too much dependency on order.

Yes, you could refer to the items by type, and only match the "checkbox" type, but again, that's more work than I think it's worth - unless you can find a reason otherwise.

I believe you should do what it takes to create the html code with the ID labels that you want, such as:
 
<DIV id="a"> <FORM name="a1"> <INPUT type="checkbox" class="input" id="a2" value="no" onclick="runFunction(this)"></FORM><SPAN id="a3">Show</SPAN> </DIV>

Then, in your runFunction:

function runFunction(obj) {
//  computer issues ... I'll complete in a later message
}

Peace and joy.
mvan

Commented:
... continuing ...

I believe you should do what it takes to create the html code in the document with the ID labels that you want, such as:

<DIV id="a"> <FORM name="a1"> <INPUT type="checkbox" class="input" id="a2" value="no" onclick="runFunction(this)"></FORM><SPAN id="a3" style="display:none">Show</SPAN> </DIV>

Then objects (or elements) named "a1" and with ID's "a", "a2", and "a3" exist in the document.

In your function, here are some things you can do, because you passed (this), meaning this checkbox element:

<script>

function runFunction(obj) {
  var eleID = obj.id    // returns: 'a2' the string value of the checkbox id that launched this function
    alert('eleID = '+eleID);
  var frmName = obj.form.name  // returns: 'a1' the string value of the form name - in which this function exists
    alert('frmName = '+frmName);
 
  // if your document elements have IDs based off of the form name, let's say, then you can generate the ID of another element:
  var nxtID = frmName.replace(/1/,'3');  // replaces substring '1' in frmName with '3' resulting in 'a3', in this case
    alert('nxtID = "'+nxtID+'"');
  // note: it would have been simpler to use form name="a"
  //       then, to refer to its elements by ID, you could just add the number, as in: var nxtID=frmName+'3';
  // How to use this text string 'a3' to reference an element in the document?
  var nxtEl = document.getElementById(nxtID);  // nxtEl is the object, tied to the element in the document named 'a3' (in this case)
    alert('nxtEl = '+nxtEl);
  // Notice that the <SPAN id='a3' ... is ouside of the form.  In your example, its only reliable tie to the form is by its similar name.
  // It just happens to be the next element in the form, but ... what if you rearrange your document?  You may lose order.

  // You can query and set properties of nxtEl, and you are actually querying and setting properties of the actual object in the document
  // This object, called nxtEl here, only exists while this routine is running, and exchanges values with whatever you pointed it to in the document
  // That's what I meant by 'tied to' above.
  // Now you use nxtEl like an object, and you can query and set properties, and they change in the document
  nxtEl.style.display = "none";  // hide the span, for example

  // Going back to the form, if you want to convert that form name into use here, you can:
  var theForm = document.forms[frmName];
    alert('theForm = '+theForm);    // yes, it's an object
  // Showing how to query a property of the form, how many elements are in theForm?
  var numElements = theForm.elements.length
    alert('numElements = '+numElements);
  // If you need info from the form, Roonan is right, you could have passed the whole form object in your onClick call
}

</script>


Summing it up, your question was, "When I build a name ... how do I make it into an object?"  First, the object must already exist in the document, or frame, or window, or ... etc.  

Technically speaking, you can create objects in the document by using:
  var d = 'c';
  var dF = d+'1';
  var dI = d+'2';
  document.write('<form name="'+dF+'"><input type="text" id="'+dF+'"></form>');    // creates form name="c1" and input id="c2"

and they'll have the IDs or names you built, but I believe that's not what you asked for.

Also, technically speaking, you can rename an object which already exists, in the above JavaScript function you could have done this:
  obj.form.name = 'testing';

would rename form name='a1' to form name='testing'.  Maybe useful somehow, but that could be very confusing!

I think your question is asking "How do I refer to an object, if I have its name in a string?"  I think I've shown a few ways.

Peace and joy to you.
mvan

Commented:
oops!

I said:
It just happens to be the next element in the form, but ... what if you rearrange your document?

I should have said:
It just happens to be the next element after the form in the document, but ... what if you rearrange your document?

Peace and joy.
mvan

Author

Commented:
thank you mvan for this detail, you explain it is better to name form elements directly than concoct names in JS and put back into form.  That part you solved.  What is not clear is the passing of a text name and then in JS using it as an object.  I know I can say 'this', or this.form.name, but I dont want to do that in all cases, some function might need to just pass - function('a1','a2','a3') - and when you get these in the JS, they are only text labels, not parts of form, nor other page elements for JS to manipulate.  These need to be made into elements like DIV, SPAN, TD, or TR .. etc...  addressable elements, hope this clearer?
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009
Commented:
forms:
var fieldNameVariable='myFieldname'
var elem = document.forms[0].elements[fieldNameVariable]
or
var fieldIdVariable='myFieldId'
var elem = document.getElementById(fieldIdVariable)
divs, spans and others:
var elemIdVariable='myDiv'
var elem = document.getElementById(elemIdVariable)

var elemIdVariable='mySpan'
var elem = document.getElementById(elemIdVariable)

Not the solution you were looking for? Getting a personalized solution is easy.

Ask the Experts
Commented:
Does mplungjan's answer do it for you, or are you acutally asking to create new html content, such that a call is made with some labels in it, and you get the corresponding info on the screen, with proper IDs, checkboxes, etc.?  For this simple example, it's only a little bit of extra work, but to add meaningful content ... well, you be the judge.

I've included the same function as above, to give the page something to do when you click the boxes, once rendered.  Use it to see the forms & id's created when you click the boxes.
My version of <DIV id="a"><FORM name="a1" ... > is included in the body, along with a place to add text.
onLoad calls makeTags(5) to
     repeat 5 times: create the labels and call myFunc() which
          creates the additional DIV, FORM, CHECKBOX SPAN line which
               are actually written to the document by writeOnPage()

You could use this method to add lines, ad nausem, if you just added a bit of code and a call to makeTags(1) to the end of runFunction().  The bit of code to add should check if you've clicked the last existing checkbox ...

Peace and joy.
mvan

<html>
<head>
<title>mvan - Q_21791186 solution</title>

<script language="JavaScript">

function runFunction(obj) {
  var eleID = obj.id  // returns: 'a2' the string value of the checkbox id - that launched this function
 alert('eleID = '+eleID);
  var frmName = obj.form.name  // returns: 'a1' the string value of the form name - in which this function exists
 alert('frmName = '+frmName);
  var nxtID = frmName.replace(/1/,'3');  // replaces substring '1' in frmName with '3' resulting in 'a3', in this case
 alert('nxtID = "'+nxtID+'"');
  var nxtEl = document.getElementById(nxtID);  // nxtEl is the object, tied to the element in the document named 'a3' (in this case)
 alert('nxtEl = '+nxtEl);
  var theForm = document.forms[frmName];
 alert('theForm = '+theForm);
  var numElements = theForm.elements.length
 alert('numElements = '+numElements);
//  obj.form.name = 'testing';
}

 var count = 1;    // initialize at 'a' so first written will be 'b'
 function makeTags(n) {
   for (var i=0;i<n;i++) {
     count++;                   // use external counter to allow repeated, individual calls
     var lab=String.fromCharCode(count+96);    // +96 adjustment makes 1='a', 2='b', 3='c', etc.
     var la1=lab+'1';
     var la2=lab+'2';
     var la3=lab+'3';
     myFunc(la1, la2, la3);
   }
 }

 function myFunc(s1,s2,s3) {
   var t = '<DIV id="a">';
   t +='<FORM name="'+s1+'">';
   t +='<INPUT type="checkbox" class="input" id="'+s2+'" value="no" onClick="runFunction(this)">';
   t +=' Added at runtime '+s1;
   t +='<'+'/FORM>';
   t +='<SPAN id="'+s3+'" style="display:none">';
   t +='Show';
   t +='<'+'/SPAN><'+'/DIV>';
   // document.write(t+'\n');   // can't do this, it writes over the existing page
   writeOnPage(t+'\n');
 }

 function writeOnPage(s) {
   document.getElementById('addedText').innerHTML += s;  // maybe += s + '<br>';
 }
   
</script>

</head>
<body onLoad="makeTags(5)">
<DIV id="a"> <FORM name="a1"> <INPUT type="checkbox" class="input" id="a2" value="no" onclick="runFunction(this)"> from example</FORM><SPAN id="a3" style="display:none">Show</SPAN> </DIV>
<hr>The following are written dynamically:
<div id="addedText"></div>

</body>
</html>

Author

Commented:
Actually, both these last posts are SUPER great summaries of a lot of what people struggle with in JS programming.  mplungjan, thanks for super condensed summary of key addressing methods, and yes, Mvan, what you provided was terrific examples of exactly what I was getting at.  Had to up points for 2 great solutions, hope you dont mind, some of best feedback I have got.  Thanks again.

Commented:
You are welcome.  It's fun, and I'm learning a lot too.  :-)

Peace and joy.  mvan

Author

Commented:
actually, if you both still there, there is still one nagging issue on 'name' addressing.  Take mplungjans first example -

var elem = document.forms[0].elements[fieldNameVariable]

the [0] addressing ALWAYS work, because it get first element in form.  But that goes against dependence on order mvan talked about, which I agree with.  So assuming JS gets name of element and form, most or even all of these do/do not work, depending on exactly how you phrase it -

var x=form.name
var y=checkbox.name

var elem = document.forms['a1'].elements['a2']
var elem = this.forms[x].elements[y]
var elem = document.forms.x.elements.y
var elem = forms['x'].elements['y']

Realize some of these are deliberately wrong, like last, but it prove point, correct addressing of forms and elements has so many different possibilities, it is very confusing, and most dont work at all.

Also, mvan, please be "less local" when you give examples.  Too many people assume JS spawns from within form, but many cases not true (you will see in my next question) -- so "this" or this.form.name is not usable.  If you always assume the passing and receiving of JS variables is always "remote", you give much better examples.  Not criticism, just ways to improve.  ALSO, too many people give "alert" examples, which are fairly useless.  Assume what you want to do is change a span tag color or name, or text, with the variable for the span only passed as a "text name", then the examples more useful.

My next question requires sync of data in main window to a popup it spawn, so popup must check status of parent opener before it completes page.  This is very tough, haven't got it to work yet, so you see, examples ALWAYS with "virtual" or "remote" addressing -- never the "this" are always best.

Thank you again, mplungjan or mvan, any "rule" to avoid my example pitfalls above with names?

Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
<form id="form1" onSubmit="return validate(this)"><!-- validate this form -->

<input type="checkbox" onClick="calc(this.form)"><!-- calculate values inside this button's form -->

Using forms[someNumber] is to avoid the name="..." which will not validate (http://www.codehelp.co.uk/code/validation.html)

<a href="sorrynojs.html"
onClick="frm = document.forms[1];
if (validate(frm)) {
  frm.submit();
  return false; // cancel the href
}
else {
  this.href='pleasedosomething.html';
  return true; // do NOT cancel the href
}
">Submit the second form on the page if it is ok and cancel the href,
else show page pleasedosomething.html by changing this link's href
If js is not enabled, show sorrynojs.html instead

Alternative for newer browsers:
onClick="frm = document.getElementById('form1');...

So the syntax is not that difficult:

Each form element has a form object
this.form

Each page has  a forms array if you use the forms tag
document.forms[indexOfForm]
or
document.forms[NAMEOfForm]; // name of form is not valid html but understood by all browsers

Also giving the form a name will add the name to the document attributes:
document.NAMEOfForm is the same as document.forms[NAMEOfForm]

So to take yoru syntax:

var x="myFormName"
var y="myCheckboxName"

var elem = document.forms[x].elements[y] is the same as
var elem = document.forms["myFormName"].elements["myCheckboxName"]

var elem = this.forms[x].elements[y] <<<<<<< not valid - there is no this that has a forms array unless you add the forms array to an element yourself

var elem = document.forms.x.elements.y wrong, should be: document.myFormName.myCheckboxName or
document.myFormName.elements["myCheckboxName"]

So to sum up.
1. I ALWAYS pass the form object from inside the form
2. I ALWAYS use document.forms[0] since it is understood by ALL browsers since NS2 and IE3 and it passes the validators
(see http://www.codehelp.co.uk/code/validation.html how to use name="..." anyway)
3. I ALWAYS use document.getElementById('someId') or document.getElementById(variableContainingSomeId)
when I want to show or hide something or change the innerHTML - I NEVER use innerText since it is IE only


Michel

Author

Commented:
Thank you Michel, that is SO clear, I think its the first time Ive really understood this addressing properly, most important is to know what is not valid, that helps immensely - is the best description of this problem I have seen anywhere (other sites all use the ['formname'], hardly anyone realize it is not valid), but thats what I have always had trouble with, it often doesnt work and I didnt know why.

Your reply deserves another 500 point just for this last comment alone, but I suppose everyone would object.  Well, it is BEST description of this problem anywhere on internet, as far as I can discover.
Michel PlungjanIT Expert
CERTIFIED EXPERT
Top Expert 2009

Commented:
If you reload you will see a link to how to validate using form name.
All browsers understand document.forms['formName'] and document.formName - I am not sure when you had problems with that...
perhaps what you have problems with is

<form ID="myFormId">

document.forms["myFormId"] or

<form NAME="myForm">
document.getElementByID('myFormName') << works in IE but not in FF because getElementById is rightly looking for an ID

and lastly document.formName will fail in NS4 when you have your form inside an absolutely positioned DIV (which is considered a layer in NS4)

Michel

Commented:
Hi Michel,

... and I thank you as well.

Peace and joy.  mvan

Author

Commented:
Michel, please look in on this new question, same issue, remote addressing with only name.  help please?
http://www.experts-exchange.com/Web/Web_Languages/JavaScript/Q_21794385.html
Access more of Experts Exchange with a free account
Thanks for using Experts Exchange.

Create a free account to continue.

Limited access with a free account allows you to:

  • View three pieces of content (articles, solutions, posts, and videos)
  • Ask the experts questions (counted toward content limit)
  • Customize your dashboard and profile

*This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.

OR

Please enter a first name

Please enter a last name

8+ characters (letters, numbers, and a symbol)

By clicking, you agree to the Terms of Use and Privacy Policy.