So speichern Sie Daten im lokalen Speicher und fügen Sie zur Tabelle hinzu

Question

Hier meine Anforderung übermittelt Daten werden in Tabellenformat angezeigt und nach fünf Eingaben Datensätze in der Datenbank gespeichert werden.

So speichern Sie Datensätze in lokalen und wie in Tabellenformat in Jquery oder Javascript anzuzeigen.

Mein HMTL:

<table id="example" class="display" width="100%" cellspacing="0"> 
    <thead> 
     <tr> 
      <th>Name</th> 
      <th>Email</th> 
      <th>Message</th> 
     </tr> 
    </thead> 
    <tbody> 
    </tbody> 
    </table> 

<form id="localStorageTest" method="post" action=""> 
    <label>Name:</label> 
    <input type="text" name="name" id="name" class="stored" value="" /> 

    <label>Email:</label> 
    <input type="email" name="email" id="email" class="stored" value="" /> 

    <label>Message:</label> 
    <textarea name="message" id="message" class="stored"></textarea> 

    <button type="button" class="btn btn-success savebtn" style="padding: 6px 12px;" id="savebutton"><i class="icon-check-sign" aria-hidden="false"></i> Save </button> 
</form> 

JQuery-Code: nur deatils Ich versuche

$("button#savebutton").click(function(){ 
           var name=$("#name").val(); 
           var email=$("#email").val(); 
           var message=$("#message").val();  
          var new_row = "<tr><td>" + name + "</td><td>" + email + "</td><td>" + message + "</td></tr>"; 
            $("table tbody").append(new_row); 
            return false; 
}); 

Answer 1

lokale Speicher begrenzt nur String-Schlüssel/Wert-Paare behandeln Sie wie unter Verwendung von JSON.stringify tun können und beim Abrufen von Wert JSON.parse

var testObject = { {name:"test", email:"xyz@xyz.com", message:"Hello"} }; 

// Legen Sie das Objekt in den Speicher

localStorage.setItem('testObject', JSON.stringify(testObject)); 

Pass dieses Objekt Daten Jquery Ajax-Methode und speichern Sie es eine Dokumentation über jQuery Ajax finden here

Answer 2

Ok, versuchen Sie diese ein;

<form id="localStorageTest" method="post" action=""> 
    <label>Name:</label> 
    <input type="text" name="name" id="name" class="stored" value="" /> 

    <label>Email:</label> 
    <input type="email" name="email" id="email" class="stored" value="" /> 

    <label>Message:</label> 
    <textarea name="message" id="message" class="stored"></textarea> 

    <input type="submit" class="demo-button" value="Submit" /> 
</form> 

<script> 
    $("form").submit(function(e) 
    { 
     //prevent default form submit 
     e.preventDefault(); 

     //make a blank js object 
     var data = {}; 

     //convert form data to json object 
     $("form").serializeArray().map(function(x){data[x.name] = x.value;}); 

     //store thet json object in local storage 
     localStorage.setItem("formData",data); 

     console.log(data) 

     //a blank html string 
     var html=""; 
     p=data; 
     for (var key in p) { 
      html=html+"<tr>" 
      if (p.hasOwnProperty(key)) { 
       html=html+"<td>"+p[key]+"</td>"; 
      } 
      html=html+"</tr>"; 
     } 

     //finally put html string in a table 
     $("tbody").html(html) 

     //now call ajax 
     $.ajax({ 

       url:backend-api-url, 

       method:'get/post', 

       data:{ 
        name:$('#name').val(), 
        email:$('#email').val(), 
        message:$('#message').val(), 
       }, 

       success:function(data){console.log("done!!!"),} 

     }) 
    }) 
</script>