Keep or re-populate form data after ajax post using sessionStorage

Question

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.

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).

Excerpt of the Form - the modal code resides at the end of this

@model HVAC.Models.EquipmentModel

@{
    ViewBag.Title = "Create";
}

<h2>Add Equipment</h2>

@using (Html.BeginForm())
{
    @Html.AntiForgeryToken()

    <div class="form-horizontal">
        <hr />
        @Html.ValidationSummary(true, "", new { @class = "text-danger" })
                <div class="form-group col-md-6">
                    @Html.LabelFor(model => model.Customer_Name, htmlAttributes: new { @class = "control-label" })
                    @Html.EditorFor(model => model.Customer_Name, new { htmlAttributes = new { @class = "form-control"} })
                    @Html.ValidationMessageFor(model => model.Customer_Name, "", new { @class = "text-danger" })
                </div>
        </div>

Modal - this code resides at the end of the page

<div id="cylinder-add-modal" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Add Cylinder</h4>
            </div>
            @*<form>*@
                <div class="modal-body">
                    <div class="alert alert-danger hide">
                        <strong>Error!</strong><span id="error"></span>
                    </div>
                    <div class="form-group">
                        <label for="Serial_Number" class="required">Serial Number:</label>
                        <input type="text" class="form-control" id="serialNumber">
                        <span id="serialNumber-error" class="text-danger hide">Serial Number is required</span>
                    </div>
                <div class="modal-footer">
                    <button id="cylinder-add-modal-submit" type="button" class="btn btn-primary pull-left"><i class="fa fa-spinner fa-spin hide"></i> Save</button>
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Cancel</button>
                </div>
            @*</form>*@
        </div>

    </div>
</div>

Saving the session data - I am able to successfully save the session data here

j('#cylinder-add-modal-submit').on('click', function (e) {
        console.log('adding cylinder');
        sessionStorage.setItem('customer', j('#Customer_Name').val());

Attempts to retrieve the session data and put back into form

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);
                });

I'm only able to retrieve it using this

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');

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.

I've attempted to retrieve the data when the modal becomes hidden as shown in the code (commented out).

Answer 1

I found a way to make this work. I placed the following code onto the Create page itself. I have two modals whereby the user clicks to create new data. Once the modal has been submitted and becomes hidden, the data is reinserted into the form.

I've tested it and it is working!

@section Scripts{

<script type="text/javascript">

$(document).ready(function () {

   $(function () {

       let customerdata = sessionStorage.getItem('customer');
       $('#Customer_Name').val(customerdata);
   });
});
</script>
}