#1
  1. No Profile Picture
    Contributing User
    Devshed Novice (500 - 999 posts)

    Join Date
    Sep 2006
    Posts
    660
    Rep Power
    31

    Multiple edit in place using html5


    I have gotten this tutorial to work and I have tried to modify it but it is just out of my understanding.

    At the moment it will save only one edited text using html5. I have tried to make several divs of text that I would like to have this feature and not just one on a page. I may want 5 on each page and would like the edited text to be saved per each page.

    The tutorial is here
    http://www.developerdrive.com/2012/06/allowing-users-to-edit-text-content-with-html5/

    This is the code:
    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <script type="text/javascript">
    function saveEdits() {
    
    //get the editable element
    var editElem = document.getElementById("edit");
    
    //get the edited element content
    var userVersion = editElem.innerHTML;
    
    //save the content to local storage
    localStorage.userEdits = userVersion;
    
    //write a confirmation to the user
    document.getElementById("update").innerHTML="Edits saved!";
    
    var editElem = document.getElementById("edit");
    editElem.contentEditable="false";
    
    }
    
    function checkEdits() {
    
    //find out if the user has previously saved edits
    if(localStorage.userEdits!=null)
    document.getElementById("edit").innerHTML = localStorage.userEdits;
    }
    </script>
    </head>
    <body onload="checkEdits()">
    <div id="edit" contenteditable="true">
    <p>Here is the element's original content</p>
    </div>
    <input type="button" value="save my edits" onclick="saveEdits()"/>
    <div id="update"> - Edit the text and click to save for next time</div>
    </body>
    </html>
    Thanks in advance : )
  2. #2
  3. /*
    Devshed Novice (500 - 999 posts)

    Join Date
    Mar 2007
    Location
    Sydney, Australia
    Posts
    729
    Rep Power
    620
    Simply you will need to create more variables on the localStorage object. So for example where you now only have:

    localStorage.userEdits

    You will need more. For example:

    localStorage.userEdits1
    localStorage.userEdits2
    localStorage.userEditsN ...

    You could go further and have variables for different pages:

    localStorage.userEditsPage1-1
    localStorage.userEditsPage1-2
    localStorage.userEditsPage1-N ...

    localStorage.userEditsPage2-1
    localStorage.userEditsPage2-2
    localStorage.userEditsPage2-N ...
    */

IMN logo majestic logo threadwatch logo seochat tools logo