asked on

javascript select not working

Hi,
I have a script that works perfectly as it inserts the appropriate text into the text box when an image button is selected (see http://prontopage.net/a_parse/ab.htm - Please view source to see the code)

and I have this page (see http://prontopage.net/a_parse/ab3.htm code is attached below.)

For the live of me I can't understand why ab.htm works but ab3.htm does not.

Can someone please take a look at this and tell me what I might be missing.

Thanks very much.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">


<style type="text/css">
body { color: white; background: #52616F; }
a { color: white; }
</style>
<!--code for select radio button-->
<script type="text/javascript">  
  function   selectproduct_idfunc(text) {
  document.getElementById("selectproduct_id" + document.getElementById("selectproduct_id").value).style.border = "2px solid white";
  document.getElementById("selectproduct_id" + text).style.border = "3px dotted #ffcc00";
  document.getElementById("selectproduct_id").value = text;
}
function displayValue(element)
{
        var h2text = element.parentNode.getElementsByTagName('h2')[0].innerHTML;
        document.getElementById('selectproduct_display_dummy').value = h2text.substr(0, h2text.length);
}
</script>
<!--end code for select radio button-->


  <title>frequency decoder ~ table sort (revisited) demo</title>
  <link href="sort3_files/demo.css" rel="stylesheet" type="text/css">

</head>
<br /><br /> <br /><br />
<!--<form name="form1" id="form1" method="get" action=""> 
  <div align="center"> 
    <p>  
      <input name="s" type="text" id="s" size="50" /> 
      <input type="submit" name="Submit" value="Find Related Keywords" /> 
    </p> 
  </div> 
</form>-->
<p><i>Search for </i></p><pre>
<form id="multiForm" name="theForm" method="POST" action="http://www.prontopage.net/member/signup.php" >
<body class=""><h1>Keyword Estimated Monthly Volume in Google</h1><h2>Limited to 100 Results</h2><table id="test1" class="sortable-onload-3-reverse rowstyle-alt no-arrow" border="0" cellpadding="0" cellspacing="0"><caption>Data Courtesy of seoquake (udpated monthly)</caption><thead><tr><th style="-moz-user-select: none;" class="sortable-keep fd-column-0"><a title="Sort on Position" href="#">Number</a></th><th style="-moz-user-select: none;" class="fd-column-1 sortable-text  forwardSort reverseSort"><a title="Sort on Keyword" href="#">Keyword</a></th><th style="-moz-user-select: none;" class="sortable-numeric fd-column-2"><a title="Sort on Monthly Volumek" href="#">Montly Volume</a></th><th style="-moz-user-select: none;" class="sortable-date-dmy fd-column-3"><a title="Sort on Release Date" href="#"></a></th></tr></thead>
<tbody>
<tr><td>1</td><td><div><h2>pizza kent wa</h2></td><td>73</td><td><img src="green.jpg" id="selectproduct_id1 "onClick="selectproduct_idfunc('1')displayValue(this);" /></div></td></tr>
<tr><td>2</td><td><div><h2>order a</h2></td><td>12</td><td><img src="green.jpg" id="selectproduct_id2 "onClick="selectproduct_idfunc('2')displayValue(this);" /></div></td></tr>
<tr><td>3</td><td><div><h2>chicago pizza online</h2></td><td>73</td><td><img src="green.jpg" id="selectproduct_id3 "onClick="selectproduct_idfunc('3')displayValue(this);" /></div></td></tr><tr><td>4</td><td><div><h2>ypsilanti pizza</h2></td><td>36</td><td><img src="green.jpg" id="selectproduct_id4 "onClick="selectproduct_idfunc('4')displayValue(this);" /></div></td></tr>
<tr><td>5</td><td><div><h2>brooklyn pizza on</h2></td><td>0</td><td><img src="green.jpg" id="selectproduct_id5 "onClick="selectproduct_idfunc('5')displayValue(this);" /></div></td></tr>
<tr><td>6</td><td><div><h2>the dominos</h2></td><td>170</td><td><img src="green.jpg" id="selectproduct_id6 "onClick="selectproduct_idfunc('6')displayValue(this);" /></div></td></tr>
<tr><td>7</td><td><div><h2>pizza la habra ca</h2></td><td>12</td><td><img src="green.jpg" id="selectproduct_id7 "onClick="selectproduct_idfunc('7')displayValue(this);" /></div></td></tr>
<tr><td>8</td><td><div><h2>best pizza in ann arbor</h2></td><td>28</td><td><img src="green.jpg" id="selectproduct_id8 "onClick="selectproduct_idfunc('8')displayValue(this);" /></div></td></tr></tbody></table><script type="text/javascript" src="sort3_files/tablesort.js"></script></body></html> <input type="text" class="txtbox" id="selectproduct_display_dummy" value="1" readonly /><br>

 <input type="hidden" class="txtbox" id="selectproduct_id" name="product_id" value="1" readonly /><br>
 <!--<input type="submit" value="Submit" id="submit">-->

Open in new window

chrisj1963

ASKER

here is ab.htm too...

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
  <meta http-equiv="content-type" content="text/html; charset=windows-1250">
  <meta name="generator" content="PSPad editor, www.pspad.com">
  <title></title>
<script type="text/javascript">  
  function selectproduct_idfunc(text) {
  document.getElementById("selectproduct_id" + document.getElementById("selectproduct_id").value).style.border = "2px solid white";
  document.getElementById("selectproduct_id" + text).style.border = "2px dotted #ffcc00";
  document.getElementById("selectproduct_id").value = text;
}
function displayValue(element)
{
        var h2text = element.parentNode.getElementsByTagName('h2')[0].innerHTML;
        document.getElementById('selectproduct_display_dummy').value = h2text.substr(0, h2text.length);
}
</script>
  
  </head>
  <body>

 
  <form id="multiForm" name="theForm" method="POST" action="http://www.prontopage.net/member/signup.php" >
 
                        <div id="allHeadShotsContainer" style="width:450px">
                            <div class="headShotContainer" style="float:left; width:150px; ">
                            <br>
                                <h2>1-FREE</h2>
                                <img src="green.jpg" id="selectproduct_id1" style="border: 2px solid white;" onClick="selectproduct_idfunc('1'); displayValue(this);" />
                            </div>
                            <div class="headShotContainer" style="float:left; width:150px; ">

 
                            <br>
                                <h2>2-$59</h2>
                                <img src="green.jpg" id="selectproduct_id2" style="border: 2px solid white;" onClick="selectproduct_idfunc('2'); displayValue(this);" />
                            </div>
                        </div>
 
 
 
 <input type="text" class="txtbox" id="selectproduct_display_dummy" value="1" readonly /><br>
 <input type="hidden" class="txtbox" id="selectproduct_id" name="product_id" value="1" readonly /><br>
<!-- <input type="submit" value="Submit" id="submit">-->
 
  </body>

</html>

Open in new window

leakim971

Hello chrisj1963,

Your page is malformed (at the end line 49)

</html> <input type="text" class="txtbox" id="selectproduct_display_dummy" value="1" readonly /><br>

<input type="hidden" class="txtbox" id="selectproduct_id" name="product_id" value="1" readonly /><br>

Nithyanandhan_T

onClick="selectproduct_idfunc('1')displayValue(this);"

there is no ";" between these 2 methods..

Nithyanandhan_T

change your image tag like this...

<img src="green.jpg" id="selectproduct_id1 " onClick="selectproduct_idfunc('1');displayValue(this);" />

chrisj1963

ASKER

I applied both suggestions, not I get the border when I select but the text still doesn't display in the text box.

http://www.prontopage.net/ab4.htm

any other thoughts?

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">


<style type="text/css">
body { color: white; background: #52616F; }
a { color: white; }
</style>
<!--code for select radio button-->
<script type="text/javascript">  
  function   selectproduct_idfunc(text) {
  document.getElementById("selectproduct_id" + document.getElementById("selectproduct_id").value).style.border = "2px solid white";
  document.getElementById("selectproduct_id" + text).style.border = "3px dotted #ffcc00";
  document.getElementById("selectproduct_id").value = text;
}
function displayValue(element)
{
        var h2text = element.parentNode.getElementsByTagName('h2')[0].innerHTML;
        document.getElementById('selectproduct_display_dummy').value = h2text.substr(0, h2text.length);
}
</script>
<!--end code for select radio button-->


  <title>frequency decoder ~ table sort (revisited) demo</title>
  <link href="sort3_files/demo.css" rel="stylesheet" type="text/css">

</head>
<br /><br /> <br /><br />
<!--<form name="form1" id="form1" method="get" action=""> 
  <div align="center"> 
    <p>  
      <input name="s" type="text" id="s" size="50" /> 
      <input type="submit" name="Submit" value="Find Related Keywords" /> 
    </p> 
  </div> 
</form>-->
<p><i>Search for </i></p><pre>
<form id="multiForm" name="theForm" method="POST" action="http://www.prontopage.net/member/signup.php" ><body class=""><h1>Keyword Estimated Monthly Volume in Google</h1><h2>Limited to 100 Results</h2><table id="test1" class="sortable-onload-3-reverse rowstyle-alt no-arrow" border="0" cellpadding="0" cellspacing="0"><caption>Data Courtesy of seoquake (udpated monthly)</caption><thead><tr><th style="-moz-user-select: none;" class="sortable-keep fd-column-0"><a title="Sort on Position" href="#">Number</a></th><th style="-moz-user-select: none;" class="fd-column-1 sortable-text  forwardSort reverseSort"><a title="Sort on Keyword" href="#">Keyword</a></th><th style="-moz-user-select: none;" class="sortable-numeric fd-column-2"><a title="Sort on Monthly Volumek" href="#">Montly Volume</a></th><th style="-moz-user-select: none;" class="sortable-date-dmy fd-column-3"><a title="Sort on Release Date" href="#"></a></th></tr></thead><tbody><tr><td>1</td><td><div><h2>pizza kent wa</h2></td><td>73</td><td><img src="green.jpg" id="selectproduct_id1"onClick="selectproduct_idfunc('1');displayValue(this);" /></div></td></tr><tr><td>2</td><td><div><h2>order a</h2></td><td>12</td><td><img src="green.jpg" id="selectproduct_id2"onClick="selectproduct_idfunc('2');displayValue(this);" /></div></td></tr><tr><td>3</td><td><div><h2>chicago pizza online</h2></td><td>73</td><td><img src="green.jpg" id="selectproduct_id3"onClick="selectproduct_idfunc('3');displayValue(this);" /></div></td></tr><tr><td>4</td><td><div><h2>ypsilanti pizza</h2></td><td>36</td><td><img src="green.jpg" id="selectproduct_id4"onClick="selectproduct_idfunc('4');displayValue(this);" /></div></td></tr><tr><td>5</td><td><div><h2>brooklyn pizza on</h2></td><td>0</td><td><img src="green.jpg" id="selectproduct_id5"onClick="selectproduct_idfunc('5');displayValue(this);" /></div></td></tr><tr><td>6</td><td><div><h2>the dominos</h2></td><td>170</td><td><img src="green.jpg" id="selectproduct_id6"onClick="selectproduct_idfunc('6');displayValue(this);" /></div></td></tr><tr><td>7</td><td><div><h2>pizza la habra ca</h2></td><td>12</td><td><img src="green.jpg" id="selectproduct_id7"onClick="selectproduct_idfunc('7');displayValue(this);" /></div></td></tr><tr><td>8</td><td><div><h2>best pizza in ann arbor</h2></td><td>28</td><td><img src="green.jpg" id="selectproduct_id8"onClick="selectproduct_idfunc('8');displayValue(this);" /></div></td></tr></tbody></table><script type="text/javascript" src="sort3_files/tablesort.js"></script> <input type="text" class="txtbox" id="selectproduct_display_dummy" value="1" readonly /><br>

 <input type="hidden" class="txtbox" id="selectproduct_id" name="product_id" value="1" readonly /><br>
 <!--<input type="submit" value="Submit" id="submit">-->
</body></html>

Open in new window

chrisj1963

ASKER

the correct url is http://www.prontopage.net/a_parse/ab4.htm

Nithyanandhan_T

var h2text = element.parentNode.getElementsByTagName('h2')[0].innerHTML

where do you have "h2" tag??

leakim971

Your page is malformed again. </div> after

Try :

Nithyanandhan_T

I'm sorry .. h2 is there.. I missed to c..

Change your script as below

document.getElementsById('myHdr')
and assign "myHdr" to your <h2>'s

or do this

document.getElementsByTagName('h2')

SOLUTION

Nithyanandhan_T

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

leakim971

...Try :

Replace :
displayValue(this);" /></div>

By:

displayValue(this);" />

Open in new window

leakim971

We should'nt start playing with DOM until the page is well formed : element.parentNode.getElementsByTagName("h2")[0] is undefined

chrisj1963

ASKER

Are you saying that I have to fix something that is malformed? If so, is there some other information that you need to be able to help me? Do the same issues exist with the http://www.prontopage.net/a_parse/ab.htm example?

leakim971

http://www.prontopage.net/a_parse/ab.htm is well formed...

I think you made copy/paste to ab4.htm

did you saw my comment ID:26155544 ?

chrisj1963

ASKER

I did. But unfortunately not change in the result.
see http://www.prontopage.net/a_parse/ab5.htm

<!DOCTYPE HTML PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xml:lang="en" xmlns="http://www.w3.org/1999/xhtml" lang="en"><head>
<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">


<style type="text/css">
body { color: white; background: #52616F; }
a { color: white; }
</style>
<!--code for select radio button-->
<script type="text/javascript">  
  function   selectproduct_idfunc(text) {
  document.getElementById("selectproduct_id" + document.getElementById("selectproduct_id").value).style.border = "2px solid white";
  document.getElementById("selectproduct_id" + text).style.border = "3px dotted #ffcc00";
  document.getElementById("selectproduct_id").value = text;
}
function displayValue(element)
{
        var h2text = element.parentNode.getElementsByTagName('h2')[0].innerHTML;
        document.getElementById('selectproduct_display_dummy').value = h2text.substr(0, h2text.length);
}
</script>
<!--end code for select radio button-->


  <title>frequency decoder ~ table sort (revisited) demo</title>
  <link href="sort3_files/demo.css" rel="stylesheet" type="text/css">

</head>
<br /><br /> <br /><br />
<!--<form name="form1" id="form1" method="get" action=""> 
  <div align="center"> 
    <p>  
      <input name="s" type="text" id="s" size="50" /> 
      <input type="submit" name="Submit" value="Find Related Keywords" /> 
    </p> 
  </div> 
</form>-->
<p><i>Search for </i></p><pre>
<form id="multiForm" name="theForm" method="POST" action="http://www.prontopage.net/member/signup.php" ><body class=""><h1>Keyword Estimated Monthly Volume in Google</h1><h2>Limited to 100 Results</h2><table id="test1" class="sortable-onload-3-reverse rowstyle-alt no-arrow" border="0" cellpadding="0" cellspacing="0"><caption>Data Courtesy of seoquake (udpated monthly)</caption><thead><tr><th style="-moz-user-select: none;" class="sortable-keep fd-column-0"><a title="Sort on Position" href="#">Number</a></th><th style="-moz-user-select: none;" class="fd-column-1 sortable-text  forwardSort reverseSort"><a title="Sort on Keyword" href="#">Keyword</a></th><th style="-moz-user-select: none;" class="sortable-numeric fd-column-2"><a title="Sort on Monthly Volumek" href="#">Montly Volume</a></th><th style="-moz-user-select: none;" class="sortable-date-dmy fd-column-3"><a title="Sort on Release Date" href="#"></a></th></tr></thead><tbody><tr><td>1</td><td><div><h2>pizza kent wa</h2></td><td>73</td><td><img src="green.jpg" id="selectproduct_id1"onClick="selectproduct_idfunc('1');displayValue(this);" /></td></tr><tr><td>2</td><td><div><h2>order a</h2></td><td>12</td><td><img src="green.jpg" id="selectproduct_id2"onClick="selectproduct_idfunc('2');displayValue(this);" /></td></tr><tr><td>3</td><td><div><h2>chicago pizza online</h2></td><td>73</td><td><img src="green.jpg" id="selectproduct_id3"onClick="selectproduct_idfunc('3');displayValue(this);" /></td></tr><tr><td>4</td><td><div><h2>ypsilanti pizza</h2></td><td>36</td><td><img src="green.jpg" id="selectproduct_id4"onClick="selectproduct_idfunc('4');displayValue(this);" /></td></tr><tr><td>5</td><td><div><h2>brooklyn pizza on</h2></td><td>0</td><td><img src="green.jpg" id="selectproduct_id5"onClick="selectproduct_idfunc('5');displayValue(this);" /></td></tr><tr><td>6</td><td><div><h2>the dominos</h2></td><td>170</td><td><img src="green.jpg" id="selectproduct_id6"onClick="selectproduct_idfunc('6');displayValue(this);" /></td></tr><tr><td>7</td><td><div><h2>pizza la habra ca</h2></td><td>12</td><td><img src="green.jpg" id="selectproduct_id7"onClick="selectproduct_idfunc('7');displayValue(this);" /></td></tr><tr><td>8</td><td><div><h2>best pizza in ann arbor</h2></td><td>28</td><td><img src="green.jpg" id="selectproduct_id8"onClick="selectproduct_idfunc('8');displayValue(this);" /></td></tr></tbody></table><script type="text/javascript" src="sort3_files/tablesort.js"></script> <input type="text" class="txtbox" id="selectproduct_display_dummy" value="1" readonly /><br>

 <input type="hidden" class="txtbox" id="selectproduct_id" name="product_id" value="1" readonly /><br>
 <!--<input type="submit" value="Submit" id="submit">-->
</body></html>

Open in new window

ASKER CERTIFIED SOLUTION

leakim971

membership

This solution is only available to members.

To access this solution, you must be a member of Experts Exchange.

Start Free Trial

chrisj1963

ASKER

thanks very much!!!!

Nithyanandhan_T

This is what I still see in the given link...which is giving error!!
element.parentNode.getElementsByTagName("h2")[0] is undefined

Can you send the updated link?

leakim971

Thanks for the points! Happy New Year!