getElementById not working in IE8, Firefox, Safari

I have been trying to get this code to work in IE8, Firefox and Safari without success.

Can someone please point me in the right direction.

I passes the DIV value to a input text feild
<div class="colourNormal" style="background-color:<?php echo $row_rsColours['clr']; ?>; cursor:pointer; float:left; margin:1px;"  title="<?php echo $row_rsColours['colours']; ?>" id="Colour_<?php echo $row_rsColours['idcolour']; ?>" value="<?php echo $row_rsColours['colours']; ?>" onClick="document.getElementById('eCart1_1_Colour_Add').value=document.getElementById('Colour_<?php echo $row_rsColours['idcolour']; ?>').value;"></div>
  </div>
 
End Code
______________________________________________________
 
Form
 
<form name="eCart1_1_ATC_<?php echo $row_rsproduct["id_prd"]; ?>" method="POST" action="<?php echo $_SERVER["PHP_SELF"]; ?><?php echo (isset($_SERVER["QUERY_STRING"]) && $_SERVER["QUERY_STRING"] != "")?"?".$_SERVER["QUERY_STRING"]:""; ?>" id="eCart1_1_ATC_<?php echo $row_rsproduct["id_prd"]; ?>" class="prd">
  <input type="hidden" name="eCart1_1_ID_Add"  id="eCart1_1_ID_Add" value="<?php echo $row_rsproduct["id_prd"]; ?>" >
  <input type="text" name="eCart1_1_Colour_Add" id="eCart1_1_Colour_Add" value="" class="hiddenSubmit">
  <input type="text" name="eCart1_1_Size_Add"  id="eCart1_1_Size_Add" value="" class="hiddenSubmit">
  <input type="image" name="eCart1_1_ATC" onMouseOver="MM_swapImage('eCart1_1_ATC','','../../img/addtoshop_on.gif',1)" onMouseOut="MM_swapImgRestore()" src="../../img/addtoshop_off.gif" alt="Add to shopping bag">
              </form>

Open in new window

Code_Monkey09Asked:
Who is Participating?
 
soul_of_musixCommented:
I know your problem. For DIV element, there is no attribute called "value". You can check here : http://www.w3schools.com/tags/tag_DIV.asp.

This is my suggestion :

<div class="colourNormal" style="background-color:<?php echo $row_rsColours['clr']; ?>; cursor:pointer; float:left; margin:1px;"  title="<?php echo $row_rsColours['colours']; ?>" id="Colour_<?php echo $row_rsColours['idcolour']; ?>" value="<?php echo $row_rsColours['colours']; ?>" onClick="document.getElementById('eCart1_1_Colour_Add').value=document.getElementById('Colour_<?php echo $row_rsColours['idcolour']; ?>').title;"></div>
  </div>

Maybe can help..

0
 
shobinsunCommented:
I have seen two '</div>' tags in :

<div class="colourNormal" style="background-color:<?php echo $row_rsColours['clr']; ?>; cursor:pointer; float:left; margin:1px;"  title="<?php echo $row_rsColours['colours']; ?>" id="Colour_<?php echo $row_rsColours['idcolour']; ?>" value="<?php echo $row_rsColours['colours']; ?>" onClick="document.getElementById('eCart1_1_Colour_Add').value=document.getElementById('Colour_<?php echo $row_rsColours['idcolour']; ?>').value;"></div>
  </div>

I think you need only one.

And use the below code after that:


<form name="eCart1_1_ATC_<?php echo $row_rsproduct['id_prd']; ?>" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?><?php echo (isset($_SERVER['QUERY_STRING']) && $_SERVER['QUERY_STRING'] != '')?'?'.$_SERVER['QUERY_STRING']:''; ?>" id="eCart1_1_ATC_<?php echo $row_rsproduct['id_prd']; ?>" class="prd">
  <input type="hidden" name="eCart1_1_ID_Add"  id="eCart1_1_ID_Add" value="<?php echo $row_rsproduct['id_prd']; ?>" >
  <input type="text" name="eCart1_1_Colour_Add" id="eCart1_1_Colour_Add" value="" class="hiddenSubmit">
  <input type="text" name="eCart1_1_Size_Add"  id="eCart1_1_Size_Add" value="" class="hiddenSubmit">
  <input type="image" name="eCart1_1_ATC" onMouseOver="MM_swapImage('eCart1_1_ATC','','../../img/addtoshop_on.gif',1)" onMouseOut="MM_swapImgRestore()" src="../../img/addtoshop_off.gif" alt="Add to shopping bag">
              </form>

Hope this will help you.

Regards
0
 
Code_Monkey09Author Commented:
Yes sorry I accidently copied over the extra DIV tag.
It is not the issue though

REPOSTED CODE
__________________________________
REPEAT REGION EACH DIV HAS ITS OWN UNIQUE ID
<div class="colourNormal" style="background-color:<?php echo $row_rsColours['clr']; ?>; cursor:pointer; float:left; margin:1px;"  title="<?php echo $row_rsColours['colours']; ?>" id="Colour_<?php echo $row_rsColours['idcolour']; ?>" value="<?php echo $row_rsColours['colours']; ?>" onClick="document.getElementById('eCart1_1_Colour_Add').value=document.getElementById('Colour_<?php echo $row_rsColours['idcolour']; ?>').value;"></div>

END REPEAT REGION
_____________________


0
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
shobinsunCommented:
Hi,

Did you try with this:

<form name="eCart1_1_ATC_<?php echo $row_rsproduct['id_prd']; ?>" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?><?php echo (isset($_SERVER['QUERY_STRING']) && $_SERVER['QUERY_STRING'] != '')?'?'.$_SERVER['QUERY_STRING']:''; ?>" id="eCart1_1_ATC_<?php echo $row_rsproduct['id_prd']; ?>" class="prd">
  <input type="hidden" name="eCart1_1_ID_Add"  id="eCart1_1_ID_Add" value="<?php echo $row_rsproduct['id_prd']; ?>" >
  <input type="text" name="eCart1_1_Colour_Add" id="eCart1_1_Colour_Add" value="" class="hiddenSubmit">
  <input type="text" name="eCart1_1_Size_Add"  id="eCart1_1_Size_Add" value="" class="hiddenSubmit">
  <input type="image" name="eCart1_1_ATC" onMouseOver="MM_swapImage('eCart1_1_ATC','','../../img/addtoshop_on.gif',1)" onMouseOut="MM_swapImgRestore()" src="../../img/addtoshop_off.gif" alt="Add to shopping bag">
              </form>
0
 
Code_Monkey09Author Commented:
Is there a difference between the form code you have posted and the form code I originally posted?

The issue does not seem to be the form but more the javascript code with the onclick command in the DIV
0
 
soul_of_musixCommented:
Try this one..



<div class="colourNormal" style="background-color:<?php echo $row_rsColours['clr']; ?>; cursor:pointer; float:left; margin:1px;"  title="<?php echo $row_rsColours['colours']; ?>" id="Colour_<?php echo $row_rsColours['idcolour']; ?>" value="<?php echo $row_rsColours['colours']; ?>" onClick="document.getElementById('eCart1_1_Colour_Add').value=document.getElementById('Colour_<?php echo $row_rsColours['idcolour']; ?>').innerHTML;">
      <? print $_POST['eCart1_1_Colour_Add'] ?> </div>
      
      
End Code
______________________________________________________
 
Form


<form name="eCart1_1_ATC_<?php echo $row_rsproduct['id_prd']; ?>" method="POST" action="<?php echo $_SERVER['PHP_SELF']; ?><?php echo (isset($_SERVER['QUERY_STRING']) && $_SERVER['QUERY_STRING'] != '')?'?'.$_SERVER['QUERY_STRING']:''; ?>" id="eCart1_1_ATC_<?php echo $row_rsproduct['id_prd']; ?>" class="prd">
  <input type="hidden" name="eCart1_1_ID_Add"  id="eCart1_1_ID_Add" value="<?php echo $row_rsproduct['id_prd']; ?>" >
  <input type="text" name="eCart1_1_Colour_Add" id="eCart1_1_Colour_Add" value="" class="hiddenSubmit">
  <input type="text" name="eCart1_1_Size_Add"  id="eCart1_1_Size_Add" value="" class="hiddenSubmit">
  <input type="image" name="eCart1_1_ATC" onMouseOver="MM_swapImage('eCart1_1_ATC','','../../img/addtoshop_on.gif',1)" onMouseOut="MM_swapImgRestore()" src="../../img/addtoshop_off.gif" alt="Add to shopping bag">
              </form>


 
 
 
 
             
0
 
Code_Monkey09Author Commented:
No does not work, has a java error and can not find the object

Webpage error details

User Agent: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; .NET CLR 2.0.50727; .NET CLR 1.1.4322; .NET CLR 3.0.04506.30; .NET CLR 3.0.04506.648; .NET CLR 3.0.4506.2152; .NET CLR 3.5.30729; Zune 3.0)
Timestamp: Mon, 20 Apr 2009 05:59:30 UTC

Message: Object required
Line: 174
Char: 5
Code: 0
URI: http://www.zanepaul.com.au/Woman/Details/?prd=11

0
 
soul_of_musixCommented:
When you submit that form, what should be happen?
What you want is when you click in div area, that value will pass to textfield.. Is it?
0
 
Code_Monkey09Author Commented:
Yes thats correct.

It passes the value to 2 x hidden text fields. (hidden by class not by hidden fields)

1. input type="text" name="eCart1_1_Colour_Add" id="eCart1_1_Colour_Add" value="" class="hiddenSubmit"> (add to cart)

2.  input type="text" name="eCart2_2_Colour_Add" id="eCart2_2_Colour_Add" value="" class="hiddenSubmit"> (add to wishlist)

Hope this helps


0
 
soul_of_musixCommented:
I know what the problem.


<div class="colourNormal" style="background-color:<?php echo $row_rsColours['clr']; ?>; cursor:pointer; float:left; margin:1px;"  title="<?php echo $row_rsColours['colours']; ?>" id="Colour_<?php echo $row_rsColours['idcolour']; ?>" value="<?php echo $row_rsColours['colours']; ?>" onClick="document.getElementById('eCart1_1_Colour_Add').value=document.getElementById('Colour_<?php echo $row_rsColours['idcolour']; ?>').innerHTML;"></div>
  </div>


<div class="colourNormal" style="background-color:<?php echo $row_rsColours['clr']; ?>; cursor:pointer; float:left; margin:1px;"  title="<?php echo $row_rsColours['colours']; ?>" id="Colour_<?php echo $row_rsColours['idcolour']; ?>" value="<?php echo $row_rsColours['colours']; ?>" onClick="document.getElementById('eCart1_1_Colour_Add').value=document.getElementById('Colour_<?php echo $row_rsColours['idcolour']; ?>').value;"></div>
  </div>

Currently, you are using value instead of innerHTML. You can try using "innerHTML"
maybe it can help you.. Good Luck..
0
 
Code_Monkey09Author Commented:
No still not working, returns underdefined or null.
0
 
Code_Monkey09Author Commented:
Great thanks worked for me!!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.