parsing the web document for id's

JavaScript and client side scripting.

Moderator: General Moderators

Post Reply
krraleigh
Forum Commoner
Posts: 86
Joined: Tue Jul 17, 2007 2:52 pm

parsing the web document for id's

Post by krraleigh »

I have a block of code and I would like to know what the id for the child element for a given block of code is.
Can I get this information programmatically?

my code:

Code: Select all

<div class="formParent">
                    <form id="form1" name="form1" method="post" 
                    action="<?php echo $_SERVER['PHP_SELF']; ?>" 
                    onsubmit="return myObj.formCheck(this, 'editRegPatient')">
                    
                    <div class="formRow">
                    <!-- holds data and field cell -->
                        <div class="cellContainerLeft">
                            <div class="inputTitle">First Name:</div>
                            <div class="inputField">    
                                <input name="fName" type="text" id="fName" 
                                maxlength="25" value="<?php  echo $_SESSION['SES_fName']; ?>"
                                onblur="myObj.setValues('f1', this.value, name);"/>                             
                            </div>
                        </div>
                        <div class="cellContainerRight">
                            <div class="inputFieldErrors" id="f1">         
                                 <?php if(isset($_SESSION['SES_nameErr'])) { $name = $_SESSION['SES_nameErr'];  echo $name;} ?>
                            </div>
                        </div>
                    </div><!-- end row -->
</div><!-- end parent -->
The item I want is the div id for class=inputFieldErrors id='f1'

any insight appreciated
thank you
Kevin
User avatar
novice4eva
Forum Contributor
Posts: 327
Joined: Thu Mar 29, 2007 3:48 am
Location: Nepal

Re: parsing the web document for id's

Post by novice4eva »

in javascript there is this "getElementsByTagName", you could use this. I know for sure that using jquery it will be even more easier but i don;t know the exact code format!!
A little example would be

Code: Select all

 
    var e=document.getElementById('parent_element_id').getElementsByTagName("div");//OR var e=document.getElementsByTagName("div");
    for(var i=0;i<e.length;i++)
    {
        //e[i].class or e[i].name  matches the required value do something
        
    }
 
 
Hope this helps
Last edited by novice4eva on Sun Nov 22, 2009 12:23 am, edited 1 time in total.
krraleigh
Forum Commoner
Posts: 86
Joined: Tue Jul 17, 2007 2:52 pm

Re: parsing the web document for id's

Post by krraleigh »

I appreciate the insight

thanx
Kevin
krraleigh
Forum Commoner
Posts: 86
Joined: Tue Jul 17, 2007 2:52 pm

Re: parsing the web document for id's

Post by krraleigh »

Hi all

I have been trying to set the event onblur on a form field so that when the user leaves I can access the changed data
I am trying to do this without setting an in line onblur() event handler
What I have is:

Code: Select all

<html><body><script type="text/javascript">
onload = getValue;
var element;
 
function getValue()
{
element=document.getElementsByTagName("input");//OR 
for(i=0;i<element.length;i++)
{
    var z = element[i].id;
    element[z].onblur = mystuff;
}
}
function mystuff(){alert(element.value);}
 
</script>
<p id="para1">Some text here</p>
<div id='formParent'>parent
<form>
<input type='text' id='fName' value='myname' name='fname'/><span id='fNameErr'></span>
<input type='text' id='lName' value='myLname' name='lName'/>
</form>
</div>
 
</body>
</html>
I can set the event handler onblur to each input field, but I can't seem to access any of the values for the element in question.

I looked into using addEventListener() but it is not supported for most browsers.

I tried coming from it an another angle before the attempt you see above you using:

Code: Select all

 
onload = getEvent;
 
var targ;
funtion getEvent(){
var e;
    if (window.event)
    {
        e=window.event; 
    }
    
    if (e.target)
    {
        alert('target');
        targ=e.target;      
    }
    else if (e.srcElement)
    {
        alert('srcElement');
        targ=e.srcElement;      
    }
    if (targ.nodeType==3) // defeat Safari bug
    {
        targ = targ.parentNode;
    }
var tnameId = targ.id; 
 
var myNode = document.getElementById(tnameId); 
try{
    if(myNode.addEventListener){
        alert('myNode');
        myNode.addEventListener('onblur', function () { 
            innerObj.setDivId(this.id + "Err");
            innerObj.setTypeInfo(this.id);
        }, false)
    }
    else if(window.captureEvents)
    {   
        alert('window.captureEvents');
        window.captureEvents(Event.CLICK);
        var el=event.srcElement;
        alert(el.id);
    }
    else
        throw "help";
}
        
 
Now window.event is supported in IE but not in firefox
A couple problems occur immediately.
First neither e.target nor e.srcElement will work unless they are attached directly
"inline" to an element. <a href=stuff.html onclick="do this">stuff</a>
This will fire the event handler and I will have all properties I need to get the job done. But the tutorial at quirksmode.org/events tells a story that placing inline
event handlers in an HTML page should be avoided. They say that I should also use
an onload event handler in my external JS file to catch the events as they happen.

The problem with this is that e.target and e.srcElement fail when they are configured
in this fashion. I can only get them to register any info when they are inline.

The other problem is that targ.nodeType throws an error in IE. I didn't test FF

What gets me is I see this config of code all over the net. It is pretty much standard stuff.

Moving on

If you look over at addEventListener you will note that it will only work in non IE
browsers. Having trouble with this one too.

I tried window.captureEvents and the only event that I was able to capture was CLICK
now I read that onblur won't bubble. Is this the reason that captureEvent fails?

I have been working at this for several days now and still haven't made any progress.


Does anyone have any idea how to set an event from in external JS file using
element.event = do something;

If so have you successfully found a way to get at the properties of the element that fired the event in a cross browser compatible way?
id = ?
value = ?

sorry about writing a book here, but this one has me stymied...
NOTE: the quirksmode.org/events tutorial is really "GOOD" but it stopped short
of showing me how to get the problem solved. either that or I missed something...
thanx
Kevin
Post Reply