Speichern von Formulardaten in lokalen Speicher und zeigen Sie es bei Aktualisierung

Ich mache ein Formular, wo Benutzer ihre Daten eingeben können. Ich möchte, dass dieses Datum mit lokalem Speicher gespeichert wird. Aber wenn ich die Seite aktualisiere, werden nur Höhe und Gewicht noch erinnert. Und ich bin ziemlich fest auf dem Versuch gewesen, auch Geschlecht, Sportlichkeit und Geburtsdatum in Erinnerung zu behalten.Speichern von Formulardaten in lokalen Speicher und zeigen Sie es bei Aktualisierung

<!DOCTYPE html> 
<html> 
<head> 
    <link rel="stylesheet" href="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.css" /> 
    <title>Test</title> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.6.4.min.js"></script> 
    <script type="text/javascript" src="http://code.jquery.com/mobile/1.0rc2/jquery.mobile-1.0rc2.min.js"></script> 
    <script> 
     $(document).ready(function() { 
      $(window).unload(saveSettings); 
      loadSettings(); 
     }); 

     function loadSettings() { 
      $('#height').val(localStorage.height); 
      $('#weight').val(localStorage.weight); 
      $('#dateOfBirth').val(localStorage.dateOfBirth); 
      $('input[type=radio]:checked').val(localStorage.gender); 
      $("#sportive").find("option[value=" + localStorage.sportive + "]").attr("selected", "selected"); 
     } 

     function saveSettings() { 
      var height = document.getElementById("height").value; 
      var weight = document.getElementById("weight").value; 
      var sportive = document.getElementById("sportive").value; 
      var gender = $('input[type=radio]:checked').val(); 
      var dateOfBirth = document.getElementById("dateOfBirth").val(); 

      localStorage.height = height; 
      localStorage.weight = weight; 
      localStorage.dateOfBirth = dateOfBirth; 
      localStorage.sportive = sportive; 
      localStorage.gender = gender; 
     } 


    </script> 
</head> 
<body> 
    <div data-role="content"> 

     <form id="myForm" > 

      gender: 

      <input id="man" type="radio" name="gender" value="Man" > 
      <label for="man">Man</label> 

      <input id="vrouw" type="radio" name="gender" value="Vrouw"> 
      <label for="vrouw" >Vrouw</label> 

      dateOfBirth: 
      <input type="date" id="dateOfBirth" name="datum" required /> 

      weight (in kg): 
      <input type="number" id="weight" name="weight" required /> 

      height (in cm): 
      <input type="number" id="height" name="height" required /> 

      Hoeveel keer doe je aan sport per week? 
      <select id="sportive" name="sport"> 
       <option value="1.2" >Weinig of geen training, kantoorwerk</option> 
       <option value="1.375">Lichte training/sport 1-3 dagen per week</option> 
       <option value="1.55" >Gemiddelde training/sport 3-5 dagen per week</option> 
       <option value="1.725" >Zware training/sport 6-7 dagen per week</option> 
       <option value="1.9" >Zware dagelijkse training/sport plus lichamelijk werk</option> 
      </select> 

      <br /> 

     </form> 

    </div> 
</body>

Grüße

Quelle

2014-12-30 user3141908

Sie Ihr Skript zu verkomplizieren. Versuche dies. Arbeiten JSFIDDLE

Wenn Sie jQuery einmal verwenden, dürfen Sie es nicht mit reinem JavaScript aktivieren, wie document.getElementById() mischen. Und erstellen Sie keine height Variable zum Speichern der , können Sie dies direkt verwenden. Code ist besser lesbar.

$(document).ready(function() { 
    $(window).unload(saveSettings); 
    loadSettings(); 
}); 

function loadSettings() { 
    $('#height').val(localStorage.height); 
    $('#weight').val(localStorage.weight); 
    $('#dateOfBirth').val(localStorage.dateOfBirth); 
    $('input[value="' + localStorage.gender + '"]').prop('checked', true); 
    $("#sportive").val(localStorage.sportive); 
} 

function saveSettings() { 
    localStorage.height = $('#height').val(); 
    localStorage.weight = $('#weight').val(); 
    localStorage.dateOfBirth = $('#dateOfBirth').val(); 
    localStorage.sportive = $("#sportive").val(); 
    localStorage.gender = $('input[type=radio]:checked').val(); 
}

Quelle

2014-12-30 15:00:29 vaso123

Speichern von Formulardaten in lokalen Speicher und zeigen Sie es bei Aktualisierung

Antwort

Verwandte Themen