Why is this not cross browser compatible?

PHP_Idiot · November 3, 2011

Hi freaks

Bit of background...

I've had the following script in place for sometime, and historically only really used ie7 (I know, I deserve stoning!). Anyway I'm rebuilding the entire site, new template, cross browser compatibile, switched to FF and all its great dev tools. and all is going well. Except this script doesnt function in anything other than IE!

Basically a results form is generated from the previous page, once the form is displayed the user enters a bunch of membership numbers in their finishing positions, what is supposed to happen is that after a mambership number is added the following two columns should populate with the coresponding first and last name of that membership nmber. This is important as a sanity/visual check for the user inputting the results.

But all I get is grey boxes and not the names (except in IE which works fine!).

Now I didn't write this code ( i don't know the first thing about javascript (yet)) but I would appreciate any advice that could help me fix this.

Here is all the code used in the include (both the php and script):

PS I really appreciate the help


<?php

//set variables from form fields

$Day = $_POST['Day'];

$Month = $_POST['Month'];

$Year = $_POST['Year'];

$Venue = $_POST['Venue'];

$PlayerNo = $_POST['PlayerNo'];

$beensubmited = $_POST['beensubmited'];

$table = "Player";

$table2 = "Results";





for ($PN = 1; $PN <= $_POST['PlayerNo']; $PN++) 

{

	${"MembershipNo$PN"} = $_POST["MembershipNo$PN"];

}



/* Data for SQL-server */ 

$host= "localhost";     /* Address of database server */ 

$user= "XXXXX";          /* FTP-username */ 

$password= "XXXXX";         /* FTP-Password */ 

$database= "XXXXX";         /* name of database */ 





/* Accessing SQL-Server and querying table */ 

$con = MYSQL_CONNECT($host, $user, $password) or die ( "<H3>Server unreachable</H3>");

$db = MYSQL_SELECT_DB($database) or die ( "<H3>Database non existent</H3>");



//mySQL queries

$query = MYSQL_QUERY("SELECT * FROM $table"); 





//Javascript stuff

print("<SCRIPT type=\"text/javascript\">

function showFN(ID, FNnum, LNnum) {      ");



while($row  =  mysql_fetch_row($query))  {

											$row[1] = addslashes($row[1]);   //adds slashes for jave code

											$row[2] = addslashes($row[2]);





print("

	if (ID =='$row[0]') {document.getElementById(FNnum).value='$row[1]';	document.getElementById(LNnum).value='$row[2]'; }

	else		"); //php end print	

}   //php end while



print("{document.getElementById(FNnum).value='ID Not In Database';}				");





											$row[1] = stripslashes($row[1]);  //removes slashes so if used later in page 

											$row[2] = stripslashes($row[2]);  //it print out name with a slash in it (you may not need this bit)





print("}</SCRIPT>");

?>






  <?php

//top form copies over venue details BEFORE SUBMITTING

if($beensubmited ==""){

echo '<table border="1" width="100%" cellspacing="0" bgcolor="lightgrey" bordercolor="darkgrey">';

echo '<caption align="top"><h3>Venue Details</h3></caption>';

echo "<tr><th>Venue</th><th>Date</th><th>Number of Players</th></tr>";

echo "<tr><td align='center' valign='center'>";

  echo "$Venue";

  echo "</td><td align='center' valign='center'>";

  echo "$Day / $Month / $Year";

  echo "</td><td align='center' valign='center'>";

  echo "$PlayerNo";

  echo "</td></tr></table>";

  echo '<br>';



//create Points array per player

$pointsArray = array( 

   1 => 1000, 

   2 => 800, 

   3 => 600,

   4 => 500,

   5 => 400,

   6 => 300,

   7 => 200,

   8 => 100,

  ); 



//creates hidden form!

print("<form name=\"userform\" method=\"POST\" action=\"createform.php\">

<table border=\"1\" width=\"100%\" cellspacing=\"0\" bgcolor=\"lightgrey\" bordercolor=\"darkgrey\" align=\"left\">

<caption align=\"top\"><h3>Venue Results</h3></caption>

<tr><th>Position</th>

<th>Points</th><th>Mem. Card</th><th>Early Reg</th><th>Membership Number</th><th>First Name</th><th>Last Name</th></tr>

<input name=\"Venue\" type=\"hidden\" value=\"$Venue\">

<input name=\"Date\" type=\"hidden\" value=\"$Year-$Month-$Day\">

<input name=\"PlayerNo\" type=\"hidden\" value=\"$PlayerNo\">

<input name=\"beensubmited\" type=\"hidden\" value=\"Y\">");



//Creates counter to name individual cells

for ( $counter = 1; $counter <= $PlayerNo; $counter += 1) {

$points = isset($pointsArray[$counter]) ? $pointsArray[$counter] : 50; ;



//produces querys form

print("<tr><td align=\"center\" valign=\"center\"> $counter</td>
  <td align=\"center\" valign=\"center\">$points</td>
  
	<td align=\"center\" valign=\"center\"><input name=\"MemCard$counter\" value=\"25\" type=\"checkbox\"  tabindex=\"$counter\"></td>
  <td align=\"center\" valign=\"center\"><input name=\"EarlyReg$counter\" value=\"25\" type=\"checkbox\"   tabindex=\"$counter\"></td>


  <td align=\"center\" valign=\"center\"><input name=\"Position$counter\" value=\"$counter\" type=\"hidden\">
	<input name=\"MembershipNo$counter\" type=\"text\" size=\"7\" maxlength=\"7\" tabindex=\"$counter\"onChange=\"showFN(this.value,'FirstName$counter', 'LastName$counter');\"></td>
	<td align=\"center\" valign=\"center\"><input name=\"FirstName$counter\" type=\"text\" size=\"15\" maxlength=\"7\" READONLY=\"READONLY\"></td>
	<td align=\"center\" valign=\"center\"><input name=\"LastName$counter\" type=\"text\" size=\"15\" maxlength=\"7\" READONLY=\"READONLY\"></td>
</tr>");

}

//submit Button

print("</table><br>

<input type=SUBMIT name=action value=\"Done!\">

</form>");



} // end beensubmited blank



// Adds form data to DB AFTER SUBMITTING



if($beensubmited =="Y"){

$Venue = $_POST['Venue'];

$Date = $_POST['Date'];

$PlayerNo = $_POST['PlayerNo'];

$PlayerNo = $_POST['PlayerNo'];



//MYSQL_CONNECT($server, $user, $password) or die ( "<H3>Server unreachable</H3>");

//MYSQL_SELECT_DB($database) or die ( "<H3>Database non existent</H3>");

//MYSQL_CONNECT($server, $user, $password) or die ( "<H3>Server unreachable</H3>");

//MYSQL_SELECT_DB($database) or die ( "<H3>Database non existent</H3>");



// Make a MySQL Connection

$link = mysql_connect("XXXXX", "XXXXX", "XXXXX") or die(mysql_error());

mysql_select_db("XXXXX") or die(mysql_error());



// Insert a row of information into the table "example"



echo "Data Inserted!<br />";

mysql_close($link);





foreach($_POST as $k=>$v) $$k=$v;





for ($PN = 1; $PN <= $_POST['PlayerNo']; $PN++) 

{

 ${"MembershipNo$PN"} = $_POST["MembershipNo$PN"];

 ${"Position$PN"} = $_POST["Position$PN"];

  ${"MemCard$PN"} = $_POST["MemCard$PN"];
  
   ${"EarlyReg$PN"} = $_POST["EarlyReg$PN"];



// Make a MySQL Connection

mysql_connect("XXXXX", "XXXXX", "XXXXX") or die(mysql_error());

mysql_select_db("XXXXX") or die(mysql_error());



// Insert a row of information into the table "example"

mysql_query("INSERT INTO Results (Date, ResultID, VenueID, MembershipNo, Position, MemCard, EarlyReg) VALUES('$Date', NULL, '$Venue', '${"MembershipNo$PN"}', '${"Position$PN"}', '${"MemCard$PN"}', '${"EarlyReg$PN"}') ") 

or die(mysql_error());  




echo "Data Inserted!<br />";



}

}





?>

Adam · November 4, 2011

Can you show us the outputted mark-up? No need to pick through the PHP if it's a JS issue.

PHP_Idiot · November 4, 2011

Hi Adam

Sorry not entirely sure what you mean but outputted markup!

This code is the first part of the process, this allows the user to choose the venue, date and number of players:

<form name="form1" method="POST" action="createform.php">
<p>Venue Name
  <?


$query="SELECT VenueName, VenueID FROM Venue ORDER BY VenueName";

/* You can add order by clause to the sql statement if the names are to be displayed in alphabetical order */

$result = mysql_query ($query);
echo "<select name='Venue' id='Venue' value=''>Venue Name</option>";
// printing the list box select command

while($nt=mysql_fetch_array($result))
{//Array or records stored in $nt
	echo "<option value=\"$nt[VenueID]\">$nt[VenueName] ($nt[VenueID])</option>";
	/* Option values are added by looping through the array */
}
echo "</select>";// Closing of list box 

?>
</p>

<?php
$monthName = array(1=> "January", "February", "March",
                        "April", "May", "June", "July",
                        "August", "September", "October",
                        "November", "December");

$today = time();                   //stores today's date
$f_today = date("Y-M-d",$today);   //formats today's date

/* build selection list for the year */
$startYr = date("Y", $today);  //get the year from $today
echo "<select name='Year'>\n";
for ($n=$startYr;$n<=$startYr+3;$n++)
{
   echo " <option value=$n";
   if ($startYr == $n )
   {
     echo " selected";
   }
   echo "> $n\n";
}
echo "</select>\n";

/* build selection list for the month */
$todayMO = date("n",$today);  //get the month from $today
echo "<select name='Month'>\n";
for ($n=1;$n<=12;$n++) 
{
   echo "<option value=$n\n";
   if ($todayMO == $n)
   {
     echo " selected";
   }
   echo "> $monthName[$n]\n";
}
echo "</select>";

/* build selection list for the day */
$todayDay= date("d",$today);    //get the day from $today
echo "<select name='Day'>\n";
for ($n=1;$n<=31;$n++)  
{
   echo " <option value=$n";
   if ($todayDay == $n ) 
   {
     echo " selected";
   }
   echo "> $n\n";
}
echo "</select>\n";

?>
  <label> Date Played:<br>
  </label>
  <br><br>
  <label>How Many Players
  <input name="PlayerNo" type="text" id="PlayerNo" size="2" maxlength="2"><br><br>
  
<input name="Create Form" type="submit" value="Create Results Form">
  </label>
  <P>
</form>

Once that small form has been submitted you are take to creatform.php, within which is <?php include 'admin/createform4.php'; ?> which holds the code initially posted. This should check to see if the form has been submitted, if not it displays the form if it has it connects to the db to insert the results in the relevant tables.

From what I've managed to find so far it seem the culprit is the javascript document.getElementById but I still don't understand whats acctually going wrong with it. So far as I understand IE interprets it incorrectly which (bizarrely) makes it work, whereas other browsers interpret it correctly and it doesn't work!

Hope that makes some sense!

Adam · November 4, 2011

The PHP you've posted heavily obfuscates the JavaScript. Can you show us the mark-up produced from the PHP (the source of the web page after it's rendered)?

PHP_Idiot · November 4, 2011

Hi Adam

I cant paste the code here because it's over the char limit, but I've attached both FF7 and IE8 (compatibility mode) source codes for you.

I hope this is what your meant,

thanks for all the help by the way, it's really appreciated

Cheers

[attachment deleted by admin]

Adam · November 4, 2011

No where in the code you sent is "showFN()" called..?

PHP_Idiot · November 4, 2011

Umm ok.

So presumably that is required for it to work in all browsers except ie7 (ie8 compat).

How and where should I call that then?

Adam · November 4, 2011

showFN() is the 1,500 or so line JS function (and only JS) in the source you just posted:

function showFN(ID, FNnum, LNnum) {      

	if (ID =='0101006') {document.getElementById(FNnum).value='Steve';	document.getElementById(LNnum).value='..'; }

	else		

	if (ID =='0101007') {document.getElementById(FNnum).value='Damien';	document.getElementById(LNnum).value='..'; }

	else

// etc

I'm assuming this is where the problem is?

PHP_Idiot · November 4, 2011

Actually in the script below there is ShowFN:

print("<tr><td align=\"center\" valign=\"center\"> $counter</td>
  <td align=\"center\" valign=\"center\">$points</td>
  
	<td align=\"center\" valign=\"center\"><input name=\"MemCard$counter\" value=\"25\" type=\"checkbox\"  tabindex=\"$counter\"></td>
  <td align=\"center\" valign=\"center\"><input name=\"EarlyReg$counter\" value=\"25\" type=\"checkbox\"   tabindex=\"$counter\"></td>


  <td align=\"center\" valign=\"center\"><input name=\"Position$counter\" value=\"$counter\" type=\"hidden\">
	<input name=\"MembershipNo$counter\" type=\"text\" size=\"7\" maxlength=\"7\" tabindex=\"$counter\"onChange=\"showFN(this.value,'FirstName$counter', 'LastName$counter');\"></td>
	<td align=\"center\" valign=\"center\"><input name=\"FirstName$counter\" type=\"text\" size=\"15\" maxlength=\"7\" READONLY=\"READONLY\"></td>
	<td align=\"center\" valign=\"center\"><input name=\"LastName$counter\" type=\"text\" size=\"15\" maxlength=\"7\" READONLY=\"READONLY\"></td>
</tr>");

Is this in some way incorrect?

Adam · November 4, 2011

Yeah that's what I'm referring to. There doesn't appear to be anything wrong with it, but the code you posted doesn't call it. Have you sent the source from an earlier/later page?

PHP_Idiot · November 4, 2011

No I dont think so!

the initial page is addvenueresults.php this is the small form that lets the user select the venue and date and number of players. on submitting that you get taken to createform.php which has the include createform4.php pulled into it, it is createform4.php that has the script thats meant to make it all work.

The source i included was from createform.php page.

in the createform4.php page script is the following piece of js (at least i think thats what it is :-\

//Javascript stuff

print("<SCRIPT type=\"text/javascript\">

function showFN(ID, FNnum, LNnum) {      ");



while($row  =  mysql_fetch_row($query))  {

											$row[1] = addslashes($row[1]);   //adds slashes for jave code

											$row[2] = addslashes($row[2]);





print("

	if (ID =='$row[0]') {document.getElementById(FNnum).value='$row[1]';	document.getElementById(LNnum).value='$row[2]'; }

	else		"); //php end print	

}   //php end while



print("{document.getElementById(FNnum).value='ID Not In Database';}				");





											$row[1] = stripslashes($row[1]);  //removes slashes so if used later in page 

											$row[2] = stripslashes($row[2]);  //it print out name with a slash in it (you may not need this bit)





print("}</SCRIPT>");

PHP_Idiot · November 4, 2011

this might be easier to read,took out the spacing

//Javascript stuff

print("<SCRIPT type=\"text/javascript\">
function showFN(ID, FNnum, LNnum) {      ");

while($row  =  mysql_fetch_row($query))  {
			$row[1] = addslashes($row[1]);   //adds slashes for jave code
			$row[2] = addslashes($row[2]);
print("
	if (ID =='$row[0]') {document.getElementById(FNnum).value='$row[1]';	document.getElementById(LNnum).value='$row[2]'; }
	else		"); //php end print	
}   //php end while
print("{document.getElementById(FNnum).value='ID Not In Database';}				");
			$row[1] = stripslashes($row[1]);  //removes slashes so if used later in page 
			$row[2] = stripslashes($row[2]);  //it print out name with a slash in it (you may not need this bit)
print("}</SCRIPT>");

Adam · November 4, 2011

Yeah I've seen the function. Where is it called?

PHP_Idiot · November 4, 2011

Yeah I've seen the function. Where is it called?

I thought this was the call:

onChange=\"showFN(this.value,'FirstName$counter', 'LastName$counter');

Adam · November 4, 2011

That certainly looks like a call to it, but where in the page source is that?

PHP_Idiot · November 4, 2011

In the source the script gets all the membership details

<script type="text/javascript">

function showFN(ID, FNnum, LNnum) {      

	if (ID =='0101006') {document.getElementById(FNnum).value='Steve';	document.getElementById(LNnum).value='..'; }

	else		

	if (ID =='0101007') {document.getElementById(FNnum).value='Damien';	document.getElementById(LNnum).value='..'; }

	else		

	if (ID =='0101005') {document.getElementById(FNnum).value='Henry';	document.getElementById(LNnum).value='Steele'; }

	else		
//etc etc....

And at the bottom of the page it calls it:

 <td align="center" valign="center"><input name="Position1" value="1" type="hidden">

	<input name="MembershipNo1" size="7" maxlength="7" tabindex="1" onchange="showFN(this.value,'FirstName1', 'LastName1');" type="text"></td>
	<td align="center" valign="center"><input name="FirstName1" size="15" maxlength="7" readonly="READONLY" type="text"></td>
	<td align="center" valign="center"><input name="LastName1" size="15" maxlength="7" readonly="READONLY" type="text"></td>

PHP_Idiot · November 4, 2011

In the source the script gets all the membership details

<script type="text/javascript">

function showFN(ID, FNnum, LNnum) {      

	if (ID =='0101006') {document.getElementById(FNnum).value='Steve';	document.getElementById(LNnum).value='..'; }

	else		

	if (ID =='0101007') {document.getElementById(FNnum).value='Damien';	document.getElementById(LNnum).value='..'; }

	else		

	if (ID =='0101005') {document.getElementById(FNnum).value='Henry';	document.getElementById(LNnum).value='Steele'; }

	else		
//etc etc....

And at the bottom of the page it calls it:

 <td align="center" valign="center"><input name="Position1" value="1" type="hidden">

	<input name="MembershipNo1" size="7" maxlength="7" tabindex="1" onchange="showFN(this.value,'FirstName1', 'LastName1');" type="text"></td>
	<td align="center" valign="center"><input name="FirstName1" size="15" maxlength="7" readonly="READONLY" type="text"></td>
	<td align="center" valign="center"><input name="LastName1" size="15" maxlength="7" readonly="READONLY" type="text"></td>

PHP_Idiot · November 5, 2011

Does anyone else have any ideas on this?

I'm really stumped here!

Cheers

Adam · November 7, 2011

The two source codes you attached are not the same.. which explains the confusion!

The problem is that you're trying to get the input by an ID it doesn't have. IE is letting you off with it and checking the name attribute instead, but every other browser is giving you an error.

PHP_Idiot · November 7, 2011

Hi Adam

Sorry I still don't get it!

I've tested the code again, same resuils as previously, I've also re-attached the browser source code from FF and IE, and having been through it line byline, I still can't see any differences.

If you have spotted something can you let me know please, this is really starting to bug me now!

Thanks a lot

[attachment deleted by admin]

PHP_Idiot · November 8, 2011

Solved it.

I was looking for an incorrect id and not finding one, thats because there was no id in the first place!

simply added

id=\"FirstName$counter\"

id=\"LastName$counter\"

to the <td> rows and all my troubles are solved.

Thanks for the advice along the way

Adam · November 8, 2011

The problem is that you're trying to get the input by an ID it doesn't have.

Told you that yesterday.

Sign In

Why is this not cross browser compatible?

Recommended Posts

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Link to comment

Share on other sites

Join the conversation

Important Information