I am looking to setup a system which will allow me to enter data in a large table.
The data is really simple: Name, Address & Email.
I want the system to work a bit like a spreadsheet, where I am looking at a a screen which is basically a big table where each row in my table on-screen represents a new row in my mysql table. I want the system to autosave as I go along.
I have found an autosave script which I can get to work on a single set of data but I don’t know how to go about getting this to work on a larger number of rows. Can anyone point me in the right direction with this please?
If I haven’t explained myself clearly please let me know.
Any help much appreciated.
Thanks for the replies on this but I’m confused. I looked for an autosave function and found sychronize but I don’t know how to implement it into what I already have. Can anyone point me in the right direction based on the script I have below please?
<?php
$host=""; // Host name
$username=""; // Mysql username
$password=""; // Mysql password
$db_name=""; // Database name
$tbl_name=""; // Table name
// Connect to server and select databse.
mysql_connect("$host", "$username", "$password")or die("cannot connect");
mysql_select_db("$db_name")or die("cannot select DB");
$sql="SELECT * FROM $tbl_name";
$result=mysql_query($sql);
// Count table rows
$count=mysql_num_rows($result);
?>
<div class="global">
<div class="formholder">
<form name="form1" method="post" action="<?php echo $_SERVER['PHP_SELF']; ?>" enctype="multipart/form-data">
<tr>
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="3">
<tr>
<td>Make</td>
<td align="center">Cap/GG</td>
<td align="center">Coupe</td>
<td align="center">Saloon</td>
<td align="center">Estate</td>
<td align="center">Conv</td>
<td align="center">4x4</td>
<td align="center">Petrol</td>
<td align="center">Diesel</td>
<td align="center">Hybrid</td>
<td align="center">Man</td>
<td align="center">Auto</td>
<td align="center">Tyres</td>
<td align="center">Lights</td>
<td align="center">Panels</td>
<td align="center">Service History</td>
<td align="center">Mech.</td>
<td align="center">Owners</td>
<td align="center">Wheels</td>
<td align="center">Interior</td>
<td align="center">W/Screen</td>
<td align="center">Keys</td>
<td align="center">MOT</td>
</tr>
<?php
while($rows=mysql_fetch_array($result)){
?>
<tr>
<td><? $Id[]=$rows['Id']; ?><? echo $rows['Make']; ?></td>
<td><input name="CAP_v_GG[]" type="text" id="CAP_v_GG" value="<? echo $rows['CAP_v_GG']; ?>"></td>
<td><input name="Coupe[]" type="text" id="Coupe" value="<? echo $rows['Coupe']; ?>"></td>
<td><input name="Saloon[]" type="text" id="Saloon" value="<? echo $rows['Saloon']; ?>" maxlength="3"></td>
<td><input name="Estate[]" type="text" id="Estate" value="<? echo $rows['Estate']; ?>" maxlength="3"></td>
<td><input name="Convertible[]" type="text" id="Convertible" value="<? echo $rows['Convertible']; ?>" maxlength="3"></td>
<td><input name="Fourwheeldrive[]" type="text" id="Fourwheeldrive" value="<? echo $rows['Fourwheeldrive']; ?>" maxlength="3"></td>
<td><input name="Petrol[]" type="text" id="Petrol" value="<? echo $rows['Petrol']; ?>" maxlength="3"></td>
<td><input name="Diesel[]" type="text" id="Diesel" value="<? echo $rows['Diesel']; ?>" maxlength="3"></td>
<td><input name="Hybrid[]" type="text" id="Hybrid" value="<? echo $rows['Hybrid']; ?>" maxlength="3"></td>
<td><input name="Manual[]" type="text" id="Manual" value="<? echo $rows['Manual']; ?>" maxlength="3"></td>
<td><input name="Automatic[]" type="text" id="Automatic" value="<? echo $rows['Automatic']; ?>" maxlength="3"></td>
<td><input name="Tyres[]" type="text" id="Tyres" value="<? echo $rows['Tyres']; ?>" maxlength="3"></td>
<td><input name="Lights[]" type="text" id="Lights" value="<? echo $rows['Lights']; ?>" maxlength="3"></td>
<td><input name="Paint_Panel[]" type="text" id="Paint_Panel" value="<? echo $rows['Paint_Panel']; ?>" maxlength="3"></td>
<td><input name="Service_History[]" type="text" id="Service_History" value="<? echo $rows['Service_History']; ?>" maxlength="3"></td>
<td><input name="Mechanical[]" type="text" id="Mechanical" value="<? echo $rows['Mechanical']; ?>" maxlength="3"></td>
<td><input name="Owners[]" type="text" id="Owners" value="<? echo $rows['Owners']; ?>" maxlength="3"></td>
<td><input name="Wheels[]" type="text" id="Wheels" value="<? echo $rows['Wheels']; ?>" maxlength="3"></td>
<td><input name="Interior[]" type="text" id="Interior" value="<? echo $rows['Interior']; ?>" maxlength="3"></td>
<td><input name="Windscreen[]" type="text" id="Windscreen" value="<? echo $rows['Windscreen']; ?>" maxlength="3"></td>
<td><input name="Spare_Keys[]" type="text" id="Spare_Keys" value="<? echo $rows['Spare_Keys']; ?>" maxlength="3"></td>
<td><input name="MOT[]" type="text" id="MOT" value="<? echo $rows['MOT']; ?>" maxlength="3"></td>
</tr>
<?php
}
?>
<tr>
<td colspan="22" align="center"><input type="submit" name="Submit" value="Submit"></td>
</tr>
</table>
</td>
</tr>
</form>
<?php
// Check if button name "Submit" is active, do this
if($Submit){
for($i=0;$i<$count;$i++){
$sql1="UPDATE $tbl_name SET CAP_v_GG='$CAP_v_GG[$i]', Coupe='$Coupe[$i]', Saloon='$Saloon[$i]', Estate='$Estate[$i]', Convertible='$Convertible[$i]', Fourwheeldrive='$Fourwheeldrive[$i]', Petrol='$Petrol[$i]', Diesel='$Diesel[$i]', Hybrid='$Hybrid[$i]', Manual='$Manual[$i]', Automatic='$Automatic[$i]', Tyres='$Tyres[$i]', Lights='$Lights[$i]', Paint_Panel='$Paint_Panel[$i]', Service_History='$Service_History[$i]', Mechanical='$Mechanical[$i]', Owners='$Owners[$i]', Wheels='$Wheels[$i]', Interior='$Interior[$i]', Windscreen='$Windscreen[$i]', Spare_Keys='$Spare_Keys[$i]', MOT='$MOT[$i]' WHERE Id='$Id[$i]'";
$result1=mysql_query($sql1);
}
}
mysql_close();
?>
</div>
</div>
AJAX call to auto-save the data.
Javascript to add a new row when you enter data into the current bottom row.
The only PHP aspect of this request is the page the AJAX calls to save the data, and that’s a simple thing. I’m going to suggest this be moved to the Javascript forum; if you find you’re having issues with the little PHP side of it…
Thanks for the reply, I’ll look into that. Sorry if i posted this in the wrong place.
I wonder if having so many event listeners (one on every cell) could be a problem. It’s not ideal for JS performance.
You need to know when a cell form field is ‘blurred’, validate the whole line and save with Ajax if it’s okay.
If you didn’t mind having a save button at the end of each row you could have just a single listener on the whole table and defer to see if save button was clicked.
Perhaps you don’t even need to save so often? In a desktop spreadsheet the file isn’t saved with every change.
A much better option is to have a single listener placed further up the DOM, so that it can pick up events for all of the cells. Then that listener can decide if the element is a cell, and if it can run the appropriate function.
Yes, but will a parent div (or equivalent) support a blur event? I think mostly likely users will tab (with the keyboard) between fields, so there won’t be clicks firing on the parent element.
The documentation is at the end of http://www.w3.org/TR/DOM-Level-2-Events/events.html
The blur event is fired both on mouse navigation and on keyboard navigation. Here’s what is says, with additional formatting added.
The blur event occurs when an element loses focus either via the pointing device or by tabbing navigation. This event is valid for the following elements: LABEL, INPUT, SELECT, TEXTAREA, and BUTTON.
Well I tried installing a blur listener on a parent <div> that contained <input> fields. None of IE8, Firefox, Safari or Chrome fired when the form field lost focus. A click listener on the parent <div> did fire when a child element was clicked.
<script type="text/javascript">
YAHOO.util.Event.on('the_container', 'blur', function(ev) {
alert("Blurry");
});
</script>
I should have read further through the documentation, as it goes on to state that the blur events do not bubble.
An alternative solution to help limit the number of events being managed, is to use the onclick event (which triggers when tabbing occurs too) to set the onblur event on the cell.