CODEWITHSUNDEEP
javascriptjqueryhtml
Stpete111
Stpete111

Reputation: 3427

jQuery - persist form data when changing back and forth between pages

I know there are several related posts on S/O about persisting data in webpage forms when navigating away from and back to pages, but thus far when trying to implement the suggestions, none of them help/pertain to my particular case.

Please see this codepen:

https://codepen.io/Nola111/pen/BaNJmrx

Note the Page 1 and Page 2 links in the top right of the screen. If there is data in any of the fields on page 1, I need that data to persist if I switch to page 2, then switch back to page 1. Same for if there is data in page 2 form, I need that to persist if you switch from page 2 to page 1 then back to page 2.

Apologies in advance if I did the multi-page approach on codepen incorrectly. This is the only way I could see to do it.

Here is the code to comply with S/O rules:

JS:

$(document).ready(function() {
  var endpoint = "http://localhost:53809/";

  /* eslint eqeqeq: 0 */

  $(".js-example-basic-single").select2();

  // Initialize modal
  $(".modal").modal();

  // Date Picker
  M.Datepicker.init($(".datepicker"), { format: "yyyy-mm-dd" });
  $(".modal").modal();

  const checkRads = () => {
    const checked = $("input[type=radio][name=group]:checked").val();
    const create = checked === "create";
    const update = checked === "update";
    const suppress = checked === "suppress";
    $("#proid").toggle(!create);
    $("#deleteid").toggle(suppress);
    $(".fields").toggle(!suppress);
    $("#btnSearch").toggle(update);
  };
  $(function() {
    $(".js-example-basic-single").select2();
    // Hide show inputs
    $("input[type=radio][name=group]").on("change", checkRads);
    checkRads();
  });

  $("form").submit(function(event) {
    event.preventDefault();
    $(form)
      .find(":input")
      .prop("disabled", true);
    var selectedValue = $("input[name='group']:checked").val();
    switch (selectedValue) {
      case "create":
        newProfile($(this));
        break;
      case "suppress":
        deleteProfile($(this));
        break;
      default:
        updateProfile($(this));
    }
  });
});

HTML:

<!doctype html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link rel="stylesheet" type="text/css" href="css/style.css">
  <link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/css/materialize.min.css">
  <link href="https://fonts.googleapis.com/css?family=Open+Sans&display=swap" rel="stylesheet">
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
</head>

<body class="body-custom">
  <nav class="nav-custom">
    <div class="nav-wrapper">
      <ul id="nav-mobile" class="right">
        <li><a href="https://codepen.io/Nola111/pen/BaNJmrx">Page 1</a></li>
        <li><a href="https://codepen.io/Nola111/pen/qBdpVJq">Page 2</a></li>
      </ul>
    </div>
  </nav>
  <div class="container">
    <div class="head">
      <div class="row">
        <h4 class="title">This is a website</h4>
      </div>
    </div>
    <div class="form">
      <div class="row">
        <form id="form" action="">
          <div class="row">
            <div class="type">
              <label>
                <input class="with-gap" name="group" value="create" type="radio" checked />
                <span>Create</span>
              </label>
              <label>
                <input class="with-gap" name="group" value="update" type="radio" />
                <span>Update</span>
              </label>
              <label>
                <input class="with-gap" name="group" value="suppress" type="radio" />
                <span>Suppress</span>
              </label>
            </div>
          </div>
          <div id="proid" class="row">
            <div class="input-field col s11">
              <input id="profile_id" type="text" class="validate">
              <label for="profile_id">ID</label>
            </div>
            <div class="input-field col s1">
              <a id="btnSearch" class="btn-floating btn-small waves-effect waves-light teal lighten-2"><i
                  class="material-icons">search</i></a>
            </div>
          </div>
          <!-- Delete Reason -->
          <div id="deleteid" class="row">
            <div class="input-field col s12">
              <select class="js-example-basic-single" name="deletereason" id="deletereason">
                <option value="" disabled selected>Choose delete reason</option>
                <option value="1">Reason 1</option>
                <option value="2">Reason 2</option>
                <option value="3">Reason 3</option>
              </select>
            </div>
          </div>
          <div class="row fields">
            <div class="input-field col s12">
              <input id="name" name="name" type="text" class="validate">
              <label for="name">Name</label>
            </div>

            <div class="input-field col s12">
              <!--<select id="country">-->
              <select class="js-example-basic-single" name="country" id="country">
                <option value="" disabled selected>Choose Country</option>
                <option value="Afghanistan;AFG">Afghanistan</option>
                <option value="Åland Islands;ALA">Åland Islands</option>
                <option value="Albania;ALB">Albania</option>
                <option value="Algeria;DZA">Algeria</option>
                <option value="American Samoa;ASM">American Samoa</option>

              </select>
            </div>
          </div>

        </form>
      </div>
    </div>
  </div>

  <!-- Modal Structure -->
  <div id="errorModal" class="modal">
    <div class="modal-content">
      <h4></h4>
      <p></p>
    </div>
  </div>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js'></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/materialize/1.0.0-rc.2/js/materialize.min.js"></script>
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>
  <script src="js/script.js"></script>

</body>

</html>

Upvotes: 0

Views: 884

Answers (1)

Sean Doherty
Sean Doherty

Reputation: 2378

Here is a basic example of local storage:

https://codepen.io/doughballs/pen/JjdMaKN

We have two inputs - the first I have pre-filled using value="", the second which is blank on page load. This is representing page 2 of a form.

<div class="container">
  <div class="row">
    <div class="input-field col s6">
      <input id="user_inputted_data" type="text" class="validate" value="User inputted data">
      <label for="user_inputted_data">User Inputted Data</label>  
    </div>
    <div class="input-field col s6">
      <input id="saved_data" type="text" class="validate">
      <label for="saved_data">Data from another page</label>
    </div>  
  </div>
</div>

Then we saved some dummy data in local storage. This step would actually happen on page 1.

// This would happen on another page

var savedData = ['I am some saved data'];
localStorage.setItem('savedData',savedData)

// Here we check if there is anything saved. Try commenting the above lines out and saving thepen.

if (savedData) {

  $('#saved_data').val(savedData);

}

We check if there is anything save in local storage under that name, and if so, we fill out the input using that data. For the user inputted data, we check if the field has any value, and if so, we save it to local storage for use on page 3.

var userInputtedData = $('#user_inputted_data').val();

if (userInputtedData) {
    localStorage.setItem('userInputtedData',userInputtedData)
}

https://developer.mozilla.org/en-US/docs/Web/API/Window/localStorage

Upvotes: 1

Related Questions