Jump to content

Why is this not cross browser compatible?


PHP_Idiot

Recommended Posts

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 />";



}

}





?>

Link to comment
Share on other sites

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!

 

Link to comment
Share on other sites

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]

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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?

Link to comment
Share on other sites

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>");

 

Link to comment
Share on other sites

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>");

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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>

Link to comment
Share on other sites

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.

Link to comment
Share on other sites

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]

Link to comment
Share on other sites

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 :)

Link to comment
Share on other sites

This thread is more than a year old. Please don't revive it unless you have something important to add.

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.