SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question Data Entry system

    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.

  2. #2
    Keeper of the SFL StarLion's Avatar
    Join Date
    Feb 2006
    Location
    Atlanta, GA, USA
    Posts
    3,748
    Mentioned
    71 Post(s)
    Tagged
    0 Thread(s)
    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...

  3. #3
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for the reply, I'll look into that. Sorry if i posted this in the wrong place.

  4. #4
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  5. #5
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by cranial-bore View Post
    I wonder if having so many event listeners (one on every cell) could be a problem. It's not ideal for JS performance.
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  6. #6
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by cranial-bore View Post
    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.
    Last edited by kohoutek; May 10, 2010 at 23:17.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Wizard cranial-bore's Avatar
    Join Date
    Jan 2002
    Location
    Australia
    Posts
    2,634
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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.
    Code Javascript:
    <script type="text/javascript">
    YAHOO.util.Event.on('the_container', 'blur', function(ev) {
    	alert("Blurry");
    });
    </script>

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,702
    Mentioned
    101 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Addict
    Join Date
    Dec 2005
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Question

    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?

    Code:
    <?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>


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •