Programming Forums - unable to get values using DOM

Programming Forums (http://www.programmingforums.org/forumindex.php)

- JavaScript and Client-Side Browser Scripting (http://www.programmingforums.org/forum23.html)

- - unable to get values using DOM (http://www.programmingforums.org/showthread.php?t=12785)

unable to get values using DOM

below is the conde of my site wot im trying to make.

the problem is the i am not able to access the value of data entered in
<input></input>

document.getElementById('ty4').innerHTML=document.getElementById('ticket').value;

this line retunrs undefined ..

can any one help me out

<html>

<head>

<meta http-equiv="refresh" content="2222"/>

</meta>

</head>

<script = "javascript"> 



function disp()

{

        var s_sev=document.getElementById('sev').value;

        var s_Outage=document.getElementById('Outage').value;

        var s_ticket=document.getElementById('ticket').value;

        var s_area=document.getElementById('area').value;

        var s_area=document.getElementById('status').value;

        var s_area=document.getElementById('Transfer').value;

        var s_area=document.getElementById('Problem').value;

        var s_area=document.getElementById('AHT').value;

        var s_area=document.getElementById('noti').value;

        

        switch(s_sev)

        {

                case 'sev 4':

                document.getElementById('ts1').style.backgroundColor='#FFC1FF';

                break;

                case 'sev 3':

                document.getElementById('ts1').style.backgroundColor='#CFD8F4';

                break;

                case 'sev 2':

                document.getElementById('ts1').style.backgroundColor='#1FD6F8';

                break;

                case 'sev 1':

                document.getElementById('ts1').style.backgroundColor='#FF3300';

                break;

                case 'sev 0':

                document.getElementById('ts1').style.backgroundColor="white";

                break;

        }

                

        if(s_Outage=='Planed')

                document.getElementById('ty2').innerHTML='PLANED';

        else

                document.getElementById('ty2').innerHTML='UNPLANED';



                        document.getElementById('ty1').innerHTML=document.getElementById('sev').value; 

                        document.getElementById('ty4').innerHTML=document.getElementById('ticket').value; 

                        document.getElementById('ty6').innerHTML=document.getElementById('Problem').value; 

                        document.getElementById('ty7').innerHTML=document.getElementById('status').value; 

                        document.getElementById('ty8').innerHTML=document.getElementById('noti').value; 

                        



                        

}

</script>









<body bgcolor="#AFD6F8">



<fieldset>

<legend>

STATUS TOOL:

</legend>

<TABLE align="center">

<FORM name="ticket" >

<tr><td>

<p align="center">SEV<br>

<select id="sev">

<option selected value="sev 4">sev 4</option> 

<option value="sev 3">sev 3</option> 

<option value="sev 2">sev 2</option> 

<option value="sev 1">sev 1</option> 

<option value="sev 0">sev 0</option>

</select>

</td>

&nbsp &nbsp &nbsp

<td>

Outage Type<br>

<select ID="Outage">

<option value="Unplaned" selected>Unplaned</option> 

<option value="Planed">Planed</option> 

</select>

</td>

&nbsp &nbsp &nbsp



<td>

<p align="center">Ticket No <br>

<input size="15" value="TICKET" onclick="this.value=''" name="ticket" rows="1" cols="20"></input></td>

&nbsp &nbsp &nbsp



<td>

<p align="center">Area under effect<br>

<input size="20" id="area"></input></td>

&nbsp &nbsp &nbsp

<td>

<p align="center">Problem Description <br><textarea rows="2" cols="20" id="Problem"></textarea></td>

&nbsp &nbsp &nbsp

<td>Status<br><select ID="status">

<option value="Transfered" selected>Transfered</option> 

<option value="Resolved">Resolved</option> 

<option value="Closed">Closed</option> 

<option value="SLAHOLD">SLAHOLD</option> 

</select>

</td>

<td>

Transferred Q<br>

<input size="10" ID="Transfer"></input>

</td>

<td>

<p align="center">AHT<br>

<input size="10" id="AHT"></input>

</td>

<td>

<p align="center">Notification

<select id="noti">

<option selected value="NO">NO</option>

<option value="YES">YES</option>

</select>

</td>



<tr>

<td>

<p align="center">

<input  type="button"  value="Submit" size="20" onclick=disp()></td><td>

<p align="center"><input type="reset" value="Reset" name="B2"></td>

</tr>



</tr>

</Form>

</TABLE>

</fieldset>

<p dir="ltr">&nbsp;</p>



<table border="1" cellspacing="1" style="border-collapse: collapse" bordercolor="#FFFFFF" width="100%" >

  <tr id="ts1">

    <td id="ty" width="8%" ></td>

    <td id="ty1" width="9%"></td>

    <td id="ty2" width="11%"></td>

    <td id="ty3" width="11%"></td>

    <td id="ty4" width="11%"></td>

    <td id="ty5" width="11%"></td>

    <td id="ty6" width="15%"></td>

    <td id="ty7" width="11%"></td>

    <td id="ty8" width="12%"></td>

  </tr>

</table>



</body>

</html>

Perhaps it's because there's not a element with id="ticket".

according to the the below its is an element....

http://msdn.microsoft.com/library/de...e/elements.asp

now this is working fine .. why...
kindly explain

<html>

<head>

<meta http-equiv="refresh" content="2222"/>

</meta>

</head>

<script = "javascript"> 



function disp()

{

        var s_sev=document.getElementById('sev').value;

        var s_Outage=document.getElementById('Outage').value;

        var s_ticket=document.getElementById('ticket').value;

        var s_area=document.getElementById('area').value;

        var s_area=document.getElementById('status').value;

        var s_area=document.getElementById('Transfer').value;

        var s_area=document.getElementById('Problem').value;

        var s_area=document.getElementById('AHT').value;

        var s_area=document.getElementById('noti').value;

        

        switch(s_sev)

        {

                case 'sev 4':

                document.getElementById('ts1').style.backgroundColor='#FFC1FF';

                break;

                case 'sev 3':

                document.getElementById('ts1').style.backgroundColor='#CFD8F4';

                break;

                case 'sev 2':

                document.getElementById('ts1').style.backgroundColor='#1FD6F8';

                break;

                case 'sev 1':

                document.getElementById('ts1').style.backgroundColor='#FF3300';

                break;

                case 'sev 0':

                document.getElementById('ts1').style.backgroundColor="white";

                break;

        }

                

        if(s_Outage=='Planed')

                document.getElementById('ty1').innerHTML='PLANED';

        else

                document.getElementById('ty1').innerHTML='UNPLANED';



                        document.getElementById('ty').innerHTML=document.getElementById('sev').value; 

                        document.getElementById('ty2').innerHTML=document.getElementById('area0').value; 

                        document.getElementById('ty4').innerHTML=document.getElementById('Problem').value; 

                        document.getElementById('ty5').innerHTML=document.getElementById('status').value; 

                        document.getElementById('ty8').innerHTML=document.getElementById('noti').value; 

                        document.getElementById('ty7').innerHTML=document.getElementById('AHT').value; 

                        document.getElementById('ty3').innerHTML=document.getElementById('area').value; 



                        

}

</script>









<body bgcolor="#AFD6F8">



<fieldset>

<legend>

STATUS TOOL:

</legend>

<TABLE align="center">

<FORM name="ticket" >

<tr><td>

<p align="center">SEV<br>

<select id="sev">

<option selected value="sev 4">sev 4</option> 

<option value="sev 3">sev 3</option> 

<option value="sev 2">sev 2</option> 

<option value="sev 1">sev 1</option> 

<option value="sev 0">sev 0</option>

</select>

</td>

&nbsp &nbsp &nbsp

<td>

Outage Type<br>

<select ID="Outage">

<option value="Unplaned" selected>Unplaned</option> 

<option value="Planed">Planed</option> 

</select>

</td>

&nbsp &nbsp &nbsp



<td>

<a align="center">Ticket No<br>

</input>

</a>

<input size="13" type=text id="area0" name="1"><a align="center">

</a></td>



<td>

<p align="center">Area under effect<br>

<input size="20" type=text id="area"></input></td>

&nbsp &nbsp &nbsp

<td>

<p align="center">Problem Description <br><textarea rows="2" cols="20" id="Problem"></textarea></td>

&nbsp &nbsp &nbsp

<td>Status<br><select ID="status">

<option value="Transfered" selected>Transfered</option> 

<option value="Resolved">Resolved</option> 

<option value="Closed">Closed</option> 

<option value="SLAHOLD">SLAHOLD</option> 

</select>

</td>

<td>

Transferred Q<br>

<input size="10" ID="Transfer"></input>

</td>

<td>

<p align="center">AHT<br>

<input size="10" type=text id="AHT"></input>

</td>

<td>

<p align="center">Notification

<select id="noti">

<option selected value="NO">NO</option>

<option value="YES">YES</option>

</select>

</td>



<tr>

<td>

<p align="center">

<input  type="button"  value="Submit" size="20" onclick=disp()></td><td>

<p align="center"><input type="reset" value="Reset" name="B2"></td>

</tr>



</tr>

</Form>

</TABLE>

</fieldset>

<p dir="ltr">&nbsp;</p>



<table border="3" cellspacing="1" style="border-collapse: collapse" bordercolor="#00CCFF" width="100%" >

  <tr id="ts1">

    <td id="ty" width="8%" ></td>

    <td id="ty1" width="9%"></td>

    <td id="ty2" width="11%"></td>

    <td id="ty3" width="11%"></td>

    <td id="ty4" width="15%"></td>

    <td id="ty5" width="11%"></td>

    <td id="ty6" width="11%"></td>

    <td id="ty7" width="11%"></td>

    <td id="ty8" width="12%"></td>

  </tr>

</table>



</body>

</html>

Quote:

Originally Posted by anant_tickoo (Post 125183)

according to the the below its is an element....

http://msdn.microsoft.com/library/de...e/elements.asp

I check that site and i can't seem to see this ticket element.

document.getElementById does what it says on the tin. It gets elements by their "id" attribute. Your form has a name, but not an id:

<FORM name="ticket" >

Now, certain browsers (*cough*Microsoft Internet Explorer*cough*) implement getElementById to search for name attributes as well as ids in order to support broken legacy behaviour. However, it's not a habit you should get into. Maybe the problem you're facing is because you tested it in a browser other than IE (does IE7 still support this broken behaviour?), and then later on in IE.

Did you read the response? In your first example, there is this block of statements (note the bold):

document.getElementById('ty1').innerHTML=document.getElementById('sev').value; 

document.getElementById('ty4').innerHTML=document.getElementById('ticket').value; 

document.getElementById('ty6').innerHTML=document.getElementById('Problem').value; 

document.getElementById('ty7').innerHTML=document.getElementById('status').value; 

document.getElementById('ty8').innerHTML=document.getElementById('noti').value;

There is no element in the code with id="ticket", so that statement won't work. In the second example, you got rid of that statement. You are still trying it in other statements. Either give an element the "ticket" id, or quit trying to fetch it with getElementById.

thanks guys veys much ..
i did it ..

thanks very much