Using nested element selection with javascript

**RadGH** · 04-23-2008, 06:32 PM

I wonder if this is possible. I can't find anything on google and it doesn't seem to be working through trial and error. I really don't know what I would search for either.

Lets say I have two forms, form one is id "form1", and the first input is "input1"

Would I be able to do something similar to (in CSS) #form1 #input1 { display: none; } with javascript?

What I mean is, use the form ID to select the correct input.

Heres what I'm trying right now but it doesn't seem to work:

form = document.getElementById('form1');
field = document.getElementById('input1');
form.field.value = 'test';

**tripy** · 07:45 PM

Well, you can do it:

Code:

document.getElementById('form1').input1.value="test";

It depends if you want to use pure DOM functions, or if using the browsers object models is ok.

But the cleanest method would be to create a simple function to get the DOM reference to the element node:

Code:

/**
 * Returns a Json object with the result of the search, as specified by the user, of the field _field into the form _frm
 * @param String  _frm      The id of the form to look into
 * @param String  _field    The id of the field, contained in the previous form, to find
 * @return JSON             A Json object containing the following structure is returned:
 *                            root['status']: Boolean     Indicate if the field was found or not
 *                            root['elm']   : DomElement  The DOM element reference to the field
 *                            root['msg']   : String      A short description of the cause if the status is false
 */
function getRet(_frm, _field){
  var _trg=document.getElementById(_frm);
  var ret={'status':false,'elm':null,'msg':'Form '+_frm+' not found'};
  if(!_trg || _trg===null){
    ret.msg="The form \""+_frm+"\" was not found";
    return ret;
  }
  else{
    var _f=null;
    for(cptChld=0; cptChld<_trg.childNodes.length;cptChld++){
      _f=_trg.childNodes[cptChld];
      if(_f.id && _f.id.toLowerCase()==_field.toLowerCase()){
        //The field is found, we exit here
        ret.status=true;
        ret.elm=_f;
        ret.msg="Field "+_field+" was found at pos "+cptChld;
        return ret;
      }
    }
    //The field was not found
    ret.msg="Field \""+_field+"\" was not found in form \""+_frm+"\".";
    return ret;
  }
}

And simply use it like this:

HTML Code:

<html>
  <body>
    <form id="frm1">
      <input id="one">
      <input id="two">
      <input id="three">
      <input id="four">
      <input id="five">
    </form>
    <form id="frm2">
      <input id="one">
      <input id="two">
      <input id="three">
      <input id="four">
      <input id="five">
    </form>
    <script type="text/javascript">
function getRet(_frm, _field){
  var _trg=document.getElementById(_frm);
  var ret={'status':false,'elm':null,'msg':'Form '+_frm+' not found'};
  if(!_trg || _trg===null){
    ret.msg="The form \""+_frm+"\" was not found";
    return ret;
  }
  else{
    var _f=null;
    for(cptChld=0; cptChld<_trg.childNodes.length;cptChld++){
      _f=_trg.childNodes[cptChld];
      if(_f.id && _f.id.toLowerCase()==_field.toLowerCase()){
        //The field is found, we exit here
        ret.status=true;
        ret.elm=_f;
        ret.msg="Field "+_field+" was found at pos "+cptChld;
        return ret;
      }
    }
    //The field was not found
    ret.msg="Field \""+_field+"\" was not found in form \""+_frm+"\".";
    return ret;
  }
}
r=getRet('frm2','two');
alert(r.msg);

r=getRet('frm2a','twso');
alert(r.msg);
    </script>
  </body>
</html>

**ooyes** · 04-24-2008, 04:13 AM

thanks man its even easier when you use jQuery library

with this plug in http://www.pengoworks.com/workshop/j...eld.plugin.htm

and there you go

HTML Code:

$("input[@name='users']").setValue("test");

**tripy** · 04-24-2008, 06:17 AM

Well, I admit I'm not a big fan of framework I cannot understand.
I prefer to develop my own little function using pure DOM, than including an 80Ko library for just shortening my code.

Call me grumpy, but I used to have prototype on every site I did, but I dropped this.