Jump to content

Forms table

tour93

By tour93,
in JavaScript

 Share

Recommended Posts

tour93 Newbie

tour93

Posted
Posted

Hi, I tried different system to insert data into my database.Using forms with Ajax from tizag.com(http://www.tizag.com/ajaxTutorial/ajax-javascript.php) or using Prototype.js, both worked great of course.My problem is that I have a table built automatically from a db query and each row has a form with hidden elements and a submit button.When I click on one of the buttons it's always the data from the first row that is inserted into the db.How can I fix that?Thanks Alain

Link to comment
Share on other sites
tour93 Newbie

tour93

Posted
  • Author
Posted

Here I show the page using Prototype.js

<?...?><html><HEAD><link href="style3.css" rel="stylesheet" type="text/css"/><link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" /><script type="text/javascript" src="tablecloth/tablecloth.js"></script><script src="prototype.js" type="text/javascript"></script></HEAD><BODY><div id="wrapper">	<div id="header">			</div>	<div id="container">		<div id="reg_content">			<div id="regco_content"><table cellspacing="0" cellpadding="0">	<tr>						<th>Name</th>		<th>Photo</th>		<th>Email</th>	</tr><?......Mysql query stuff?><script language="javascript" type="text/javascript"><!-- function sendRequest() {				new Ajax.Request("submit.php", 					{ 					method: 'post', 					postBody: 'user='+ $F('user'),					postBody: 'email='+ $F('email'),					postBody: 'wuser='+ $F('wuser'),					onComplete: showResponse 					});				}			function showResponse(req){				$('show').innerHTML= req.responseText;			}//--></script>	<tr>		<td><? echo ($un1) ?></td>		<td><img src="images/thumbs/<? echo ($pic3); ?>"></td>		<td>			<form id="myForm" onsubmit="return false;">			<input type="hidden" name="user" id="user" value="<? echo ($un1); ?>" />			<input type="hidden" name="email" id="email" value="<? echo ($email3); ?>" />			<input type="hidden" name="wuser" id="wuser" value="<? echo ($user); ?>" />			<input type="button" onclick="sendRequest()" value="Submit!" />			</form>			<div id="show"></div>		</td>	</tr><?		}?><br /><?	}}?></table>			</div>			</div>	</div></div></body></html>

Link to comment
Share on other sites
tour93 Newbie

tour93

Posted
  • Author
Posted

Here, the page with the script from Tizag:

<?...?><html><HEAD><link href="style3.css" rel="stylesheet" type="text/css"/><link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" /><script type="text/javascript" src="tablecloth/tablecloth.js"></script><script src="prototype.js" type="text/javascript"></script></HEAD><BODY><div id="wrapper">	<div id="header">			</div>	<div id="container">		<div id="reg_content">			<div id="regco_content"><table cellspacing="0" cellpadding="0">	<tr>						<th>Name</th>		<th>Photo</th>		<th>Email</th>	</tr><?......Mysql query stuff?><script language="javascript" type="text/javascript"><!-- //Browser Support Codefunction ajaxFunction(){	var ajaxRequest;  // The variable that makes Ajax possible!		try{		// Opera 8.0+, Firefox, Safari		ajaxRequest = new XMLHttpRequest();	} catch (e){		// Internet Explorer Browsers		try{			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");		} catch (e) {			try{				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");			} catch (e){				// Something went wrong				alert("Your browser broke!");				return false;			}		}	}	// Create a function that will receive data sent from the server	ajaxRequest.onreadystatechange = function(){		if(ajaxRequest.readyState == 4){			var ajaxDisplay = document.getElementById('ajaxDiv');			ajaxDisplay.innerHTML = ajaxRequest.responseText;		}	}	var user = document.getElementById('user').value;	var email = document.getElementById('email').value;	var wuser = document.getElementById('wuser').value;	var queryString = "?user=" + user + "&email=" + email + "&wuser=" + wuser;	ajaxRequest.open("GET", "ajax-example.php" + queryString, true);	ajaxRequest.send(null); }//--></script>	<tr>		<td><? echo ($un1) ?></td>		<td><img src="images/thumbs/<? echo ($pic3); ?>"></td>		<td>			<form id="myForm" onsubmit="return false;">			<input type="hidden" name="user" id="user" value="<? echo ($un1); ?>" />			<input type="hidden" name="email" id="email" value="<? echo ($email3); ?>" />			<input type="hidden" name="wuser" id="wuser" value="<? echo ($user); ?>" />			<input type="button" onclick="sendRequest()" value="Submit!" />			</form>			<div id="show"></div>		</td>	</tr><?		}?><br /><?	}}?></table>			</div>			</div>	</div></div></body></html>

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

Without some of the PHP code I can't tell exactly what that's doing, if that HTML code is being written once then it's fine, if it's inside a loop that gets written out several times it's not going to work because every element has the same ID. You need to give each element a unique ID in places like this: <input type="hidden" name="user" id="user" value="<? echo ($un1); ?>" /> <input type="hidden" name="email" id="email" value="<? echo ($email3); ?>" /> <input type="hidden" name="wuser" id="wuser" value="<? echo ($user); ?>" />And refer to the unique IDs in places like this: var user = document.getElementById('user').value; var email = document.getElementById('email').value; var wuser = document.getElementById('wuser').value;But if you have 100 elements all called "user" the browser will only find either the first or last one (apparently the first).You might also be able to get the Javascript to look up the inputs only in the form where the submit button was pressed, but right now it's using document.getElementById which checks everything. Regardless though, you still need each element to have a unique ID, it's not valid if more then one element has the same ID.

Link to comment
Share on other sites
tour93 Newbie

tour93

Posted
  • Author
Posted

Thanks.I tried to follow your advice but now it only record the last one.

<?include("include/session.php");require('_config-rating2.php');?><html><HEAD><link href="style3.css" rel="stylesheet" type="text/css"/><link href="tablecloth/tablecloth.css" rel="stylesheet" type="text/css" media="screen" /><script type="text/javascript" src="tablecloth/tablecloth.js"></script></HEAD><BODY><div id="wrapper">	<div id="header">			</div>	<div id="container">		<br><a style="margin: 30px" href="login.php">Home</a><a href="process.php">Logout</a>		<div id="reg_content">			<div id="regco_content"><?$result1 = mysql_query("SELECT rating FROM ratings WHERE username='$user'");while ($row = mysql_fetch_array($result1)) {$total1 = $row[rating]*$row[rating];$total2 = $total2 + $total1;}$total = round(10*sqrt($total2),3);<table cellspacing="0" cellpadding="0">	<tr>						<th>Name</th>		<th>Photo</th>		<th>Email</th>	</tr><?$rows = mysql_query("SELECT valu FROM resus WHERE username = '$user'") or die(mysql_error());if (mysql_num_rows($rows) == 0) {$sql = "INSERT INTO resus (`username`,`valu`) VALUES ('$user', '$total')";$result = mysql_query($sql);}	$query1 = mysql_query("SELECT valu FROM resus WHERE username = '$user'");	$row1 = mysql_fetch_array( $query1 );	$value1= $row1['valu'];	$a=1;	$query2 = mysql_query( "SELECT * FROM resus");		while($row2 = mysql_fetch_array( $query2 )) { 		$un1=$row2['username'];		$value2=$row2['valu'];	$query3 = mysql_query( "SELECT pic, email FROM users WHERE username='$un1'");	$row3 = mysql_fetch_array( $query3 );	$pic3=$row3['pic'];		if ($pic3==0){			$pic3="no_pic.gif";		}	$email3=$row3['email'];		$minus1=$value1-($value1*.05);		$plus1=$value1+($value1*.05);			if ($value2>=$minus1 AND $value2<=$plus1) {				  if ($un1!=$user) {?><script language="javascript" type="text/javascript"><!-- //Browser Support Codefunction ajaxFunction(){	var ajaxRequest;  // The variable that makes Ajax possible!		try{		// Opera 8.0+, Firefox, Safari		ajaxRequest = new XMLHttpRequest();	} catch (e){		// Internet Explorer Browsers		try{			ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");		} catch (e) {			try{				ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");			} catch (e){				// Something went wrong				alert("Your browser broke!");				return false;			}		}	}	// Create a function that will receive data sent from the server	ajaxRequest.onreadystatechange = function(){		if(ajaxRequest.readyState == 4){		var ajaxDisplay = document.getElementById('ajaxDiv<? echo ($a); ?>');				ajaxDisplay.innerHTML = ajaxRequest.responseText;		}	}var user<? echo ($a); ?> = document.getElementById('user<? echo ($a); ?>').value;var email<? echo ($a); ?> = document.getElementById('email<? echo ($a); ?>').value;var wuser<? echo ($a); ?> = document.getElementById('wuser<? echo ($a); ?>').value;	var queryString = "?user=" + user<? echo ($a); ?> + "&email=" + email<? echo ($a); ?> + "&wuser=" + wuser<? echo ($a); ?>;	ajaxRequest.open("GET", "wink.php" + queryString, true);	ajaxRequest.send(null); }//--></script>	<tr>		<td><? echo ($un1) ?></td>		<td><img src="images/thumbs/<? echo ($pic3); ?>"></td>		<td>			<form name='myForm'>			<input type='hidden' id='user<? echo ($a); ?>' value='<? echo ($un1); ?>' />			<input type='hidden' id='email<? echo ($a); ?>' value='<? echo ($email3); ?>' />			<input type='hidden' id='wuser<? echo ($a); ?>' value='<? echo ($user); ?>' />			<input type='button' onclick='ajaxFunction()' value='Wink!' />			</form>			<div id='ajaxDiv<? echo ($a); ?>'>Your result will display here</div>		</td>	</tr><?	$a=$a+1;					}?><br /><?			}}?></table>			</div>			</div>			</div></div></body></html>

Link to comment
Share on other sites
justsomeguy w3schools Guru

justsomeguy

Posted
Posted

Since the AJAX function is inside the loop you keep redefining it to use the most recent row. You should only define the function once, remove it from the loop, and have a parameter to tell it what to use.

function ajaxFunction(num){  var ajaxRequest;  // The variable that makes Ajax possible!    try  {	// Opera 8.0+, Firefox, Safari	ajaxRequest = new XMLHttpRequest();  }  catch (e)  {	// Internet Explorer Browsers	try	{	  ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");	}	catch (e)	{	  try	  {		ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");	  }	  catch (e)	  {		// Something went wrong		alert("Your browser broke!");		return false;	  }	}  }  // Create a function that will receive data sent from the server  ajaxRequest.onreadystatechange = function()  {	if(ajaxRequest.readyState == 4)	{	  var ajaxDisplay = document.getElementById('ajaxDiv' + num);	  ajaxDisplay.innerHTML = ajaxRequest.responseText;	}  }  var user = document.getElementById('user' + num).value;  var email = document.getElementById('email' + num).value;  var wuser = document.getElementById('wuser' + num).value;  var queryString = "?user=" + user + "&email=" + email + "&wuser=" + wuser;  ajaxRequest.open("GET", "wink.php" + queryString, true);  ajaxRequest.send(null);}

Then instead of this:<input type='button' onclick='ajaxFunction()' value='Wink!' />You would send the value to check:<input type='button' onclick='ajaxFunction(<?php echo $a; ?>)' value='Wink!' />

Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share
Go to topic listing
×
×
  • Create New...