title: Keep or re-populate form data after ajax post using sessionStorage
body: <p>New programmer here, first time posting.  I typically am successful in finding solutions by searching in SO or elsewhere but have been unsuccessful with this issue.  I have a MVC Create page template using Microsoft .NET Framework 4.7 with a modal implementation using jquery-3.3.1.js.  A user clicks a button on the page to execute a modal where they can add data while the form remains visible.  When the user clicks the submit button on the modal, I want the form to retain what data the user had entered or re-populate the data.  Currently, when the user clicks Save on the modal, it erases the data from the form. I can successfully store the data from the page using sessionStorage, what I cannot do is re-populate the page after clicking submit from the modal.</p>
  
  <p>I've used Chrome and Firefox developer and can see the sessionStorage in the console. I added the getItem lines into the success parameter of the ajax and also added it into a done parameter as well. Both without successes as far as re-populating the form.  I added a button to the form that the user can click to retrieve their form data, but I cannot use that function (business requirement).  </p>
  
  <p>Excerpt of the Form - the modal code resides at the end of this</p>
  
  <pre><code>@model HVAC.Models.EquipmentModel
  
  @{
      ViewBag.Title = "Create";
  }
  
  &lt;h2&gt;Add Equipment&lt;/h2&gt;
  
  @using (Html.BeginForm())
  {
      @Html.AntiForgeryToken()
  
      &lt;div class="form-horizontal"&gt;
          &lt;hr /&gt;
          @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                  &lt;div class="form-group col-md-6"&gt;
                      @Html.LabelFor(model =&gt; model.Customer_Name, htmlAttributes: new { @class = "control-label" })
                      @Html.EditorFor(model =&gt; model.Customer_Name, new { htmlAttributes = new { @class = "form-control"} })
                      @Html.ValidationMessageFor(model =&gt; model.Customer_Name, "", new { @class = "text-danger" })
                  &lt;/div&gt;
          &lt;/div&gt;
  
  </code></pre>
  
  <p>Modal - this code resides at the end of the page</p>
  
  <pre><code>&lt;div id="cylinder-add-modal" class="modal fade" role="dialog"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;!-- Modal content--&gt;
          &lt;div class="modal-content"&gt;
              &lt;div class="modal-header"&gt;
                  &lt;button type="button" class="close" data-dismiss="modal"&gt;&amp;times;&lt;/button&gt;
                  &lt;h4 class="modal-title"&gt;Add Cylinder&lt;/h4&gt;
              &lt;/div&gt;
              @*&lt;form&gt;*@
                  &lt;div class="modal-body"&gt;
                      &lt;div class="alert alert-danger hide"&gt;
                          &lt;strong&gt;Error!&lt;/strong&gt;&lt;span id="error"&gt;&lt;/span&gt;
                      &lt;/div&gt;
                      &lt;div class="form-group"&gt;
                          &lt;label for="Serial_Number" class="required"&gt;Serial Number:&lt;/label&gt;
                          &lt;input type="text" class="form-control" id="serialNumber"&gt;
                          &lt;span id="serialNumber-error" class="text-danger hide"&gt;Serial Number is required&lt;/span&gt;
                      &lt;/div&gt;
                  &lt;div class="modal-footer"&gt;
                      &lt;button id="cylinder-add-modal-submit" type="button" class="btn btn-primary pull-left"&gt;&lt;i class="fa fa-spinner fa-spin hide"&gt;&lt;/i&gt; Save&lt;/button&gt;
                      &lt;button type="button" class="btn btn-default pull-right" data-dismiss="modal"&gt;Cancel&lt;/button&gt;
                  &lt;/div&gt;
              @*&lt;/form&gt;*@
          &lt;/div&gt;
  
      &lt;/div&gt;
  &lt;/div&gt;
  
  </code></pre>
  
  <p>Saving the session data - I am able to successfully save the session data here</p>
  
  <pre><code>j('#cylinder-add-modal-submit').on('click', function (e) {
          console.log('adding cylinder');
          sessionStorage.setItem('customer', j('#Customer_Name').val());
  </code></pre>
  
  <p>Attempts to retrieve the session data and put back into form</p>
  
  <pre class="lang-cs prettyprint-override"><code>j.ajax({
                  type: "POST",
                  url: siteRoot + "Test/CreateTest",
                  data: postData,
                  dataType: "json",
                  success: function (result) {
                      if (result.success) {
                          //alert(result.success)
                          modal.modal('hide');
  
                          console.log("inside success");
                          let customerdata = sessionStorage.getItem('customer');
                          console.log("proof of data " + customerdata);
                          j('#Customer_Name').val(customerdata);
                      } else {
                          modal.find('div.alert').removeClass('hide');
                          modal.find('#error').text(result.error);
                      }
                  }
              })
                  .done(function () {
                      console.log("in done function");
  
                      console.log(customerdata);
                      j('#Customer_Name').val(customerdata);
                      //j('#Customer_Name').append(customerdata);
                  });
  </code></pre>
  
  <p>I'm only able to retrieve it using this </p>
  
  <pre><code>j('#refresh').on('click', function (e) {
          e.stopImmediatePropagation();
      //j('#asset-add-modal').on('hidden.bs.modal', function () {
          //alert('test');
  
          //retrieve customer/equipment data
          let customerdata = sessionStorage.getItem('customer');
  </code></pre>
  
  <p>I don't receive any error messages.  I just cannot retrieve the data and re-populate it to the form.  Again, the form is the main page and the modal pops up when the user clicks a button to add data.  I've used .html and .text as also attempts to retrieve the data.</p>
  
  <p>I've attempted to retrieve the data when the modal becomes hidden as shown in the code (commented out).</p>