如何将输入数据保存到我所有的 forms

Question

I'm building an input form project for my job and I'm running into a problem with persisting a certain input value. When the user creates a new project, they have to give that project a project ID. I have 5 forms that the user goes through and I want them to be able to enter the project ID in once on the first form, and then have it persist to the other 4 forms without them having to type it in again.

This is the html form where I want to pull the project ID and persist it to the rest of my forms. I want to pull the value using the id "pid" and then when the button at the bottom is clicked with id of 'data' I want the value to be pushed into a variable.

  <form action="/metadata" method="POST">
                <div class="row">
                    <div class="col-md-4">
                        <div>
                            <div class="input-group mb-3">
                                <div class="input-group-prepend">
                                    <span class="input-group-text" id="inputGroup-sizing-default">Project ID:</span>
                                </div>
                                <input name="project_id" type="text" id="pid" class="form-control">
                            </div>
                        </div>
                        <div class="input-group mb-3">
                            <label class="input-group-text" for="inputGroupSelect01">Building:</label>
                            <select name="building" class="form-select" id="inputGroupSelect01">
                                <option disabled selected>Choose...</option>
                                {{#each bldgs}}
                                <option>{{acronym}}</option>
                                {{/each}}
                            </select>
                        </div>
                        <div class="input-group mb-3">
                            <label class="input-group-text" for="inputGroupSelect01">Measure Type:</label>
                            <select name="measure_type" class="form-select" id="inputGroupSelect01">
                                <option disabled selected>Choose...</option>
                                <option>AHU DDC</option>
                                <option>AHU DDC &amp; Scheduling</option>
                                <option>Data Center</option>
                                <option>EBCx</option>
                                <option>EMOCx</option>
                                <option>Exhaust System Optimization</option>
                                <option>Holiday Scheduling</option>
                                <option>Lighting</option>
                                <option>Optimum Energy</option>
                                <option>Scheduling</option>
                                <option>Valves</option>
                                <option>VFD Supply Fan</option>
                                <option>Water</option>
                                <option>Other</option>
                            </select>

                        </div>
                        <div class="input-group mb-3">
                            <label class="input-group-text" for="inputGroupSelect01">Status:</label>
                            <select name="status" class="form-select" id="inputGroupSelect01">
                                <option disabled selected>Choose...</option>
                                <option>0-Cancelled</option>
                                <option>1-Planning</option>
                                <option>2-In Progress</option>
                                <option>3-In Reporting Period</option>
                                <option>5-Completed</option>
                            </select>
                        </div>
                    </div>
                    <div class="col-md-4 mt-5">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroup-sizing-default">Start Date:</span>
                            </div>
                            <input placeholder="mm/dd/yy" name="baseline_start_date" type="text" class="form-control" />
                            <input placeholder="mm/dd/yy" name="reporting_period_start_date" type="text"
                                class="form-control" />
                        </div>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroup-sizing-default"># of Days:</span>
                            </div>
                            <input placeholder="mm/dd/yy" name="length_baseline_period_days" type="text"
                                class="form-control" />
                            <input placeholder="mm/dd/yy" name="length_reporting_period_days" type="text"
                                class="form-control" />
                        </div>
                    </div>
                    <div class="col-md-4 mt-5">
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroup-sizing-default">Staff Lead:</span>
                            </div>
                            <select name="staff_lead" class="form-select" id="inputGroupSelect01">
                                <option disbaled selected>Choose...</option>
                                <option>Adam Keeling</option>
                                <option>Amanda Berens</option>
                                <option>Buddy Bishop</option>
                                <option>Dave Cooper</option>
                                <option>Grace Hsieh</option>
                                <option>John Milton</option>
                                <option>Matt Stevens</option>
                                <option>Meagan Jones</option>
                                <option>Pat Mazur</option>
                                <option>Richard Shearman</option>
                                <option>Travis Isakson</option>
                            </select>
                        </div>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroup-sizing-default">Staff Support:</span>
                            </div>
                            <select name="staff_colead" class="form-select" id="inputGroupSelect01">
                                <option disbaled selected>Choose...</option>
                                <option>Adam Keeling</option>
                                <option>Amanda Berens</option>
                                <option>Buddy Bishop</option>
                                <option>Dave Cooper</option>
                                <option>Grace Hsieh</option>
                                <option>John Milton</option>
                                <option>Matt Stevens</option>
                                <option>Meagan Jones</option>
                                <option>Pat Mazur</option>
                                <option>Richard Shearman</option>
                                <option>Travis Isakson</option>
                            </select>
                        </div>
                        <div class="input-group mb-3">
                            <div class="input-group-prepend">
                                <span class="input-group-text" id="inputGroup-sizing-default">Analyst:</span>
                            </div>
                            <select name="analyst" class="form-select" id="inputGroupSelect01">
                                <option disabled selected>Choose...</option>
                                <option>Jeff McComas</option>
                                <option>Josh Butler</option>
                                <option>Laura Chiasson</option>
                                <option>Terrell McRee</option>
                            </select>
                        </div>
                    </div>
                </div>
                <div class="input-group mt-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Project Description:</span>
                    </div>
                    <textarea rows='5' name="project_description" class="form-control"
                        aria-label="With textarea"></textarea>
                </div>
                <div class="input-group mt-3">
                    <div class="input-group-prepend">
                        <span class="input-group-text">Nonenergy Benefits:</span>
                    </div>
                    <textarea rows='2' name="nonenergy_benefits" class="form-control"
                        aria-label="With textarea"></textarea>
                </div>
                <div class="text-end">
                    <button type="submit" id="data" style="background-color: #bf5700;"
                        class="btn text-light btn-warning  mt-3">Next</button>
                </div>
            </form>

This is my js file. Each on click is a different page. However each form has the same input of project ID with a class of "project_id". So I try to $(".project_id").val(projectId) but when I move on the next form nothing happens. Each form has an input value with a class of "project_id" and thats where I try to set it based on the input from the first form.

This is a link to the repo if it helps to see all the code. https://github.com/oballematt/ecm_input_forms

Any advice on how to achieve this is greatly appreciated! Thanks!

 const projectId = []
   
    $("#data").on('submit', () => {
        projectId.push($('#pid').val())
    })

  $('.project_id').val(projectId)

    $('#tableData').on('click', 'button.addRow', function(e) {
        const cloneRow = $('#tableData tbody tr').first();
        e.preventDefault();
        let data = {
         project_id: $(".project_id").last().val(),
         imp_or_ann: $(".imp_or_ann").last().val(),
         category: $(".category").last().val(),
         cost: $(".cost").last().val(),
         hours: $(".hours").last().val()
    }
        $.ajax({
            url: '/costs_hours',
            type: 'POST',
            data: data
        }).then(
            cloneRow.clone().appendTo('#tableData tbody').find(".cost, .hours").val(''),
            $("#next").removeAttr('disabled'),
            $("#link").attr('href', '/fundings'),
        )
    })

    $('#tableData').on('click', 'button.addRowF', function(e) {
        const cloneRow = $('#tableData tbody tr').first();
        e.preventDefault(); 
        let data = {
         project_id: $(".project_id").last().val(),
         source: $(".source").last().val(),
         implementation: $(".implementation").last().val(),
         annual: $(".annual").last().val(),
    }
        $.ajax({
            url: '/fundings',
            type: 'POST',
            data: data
        }).then(
            cloneRow.clone().appendTo('#tableData tbody').find(".implementation, .annual").val(''),
            $("#next").removeAttr('disabled'),
            $("#link").attr('href', '/baseline')
        )
    })

    $('#tableData').on('click', 'button.addRowB', function(e) {
        const cloneRow = $('#tableData tbody tr').first();
        e.preventDefault();
        let data = {
         project_id: $(".project_id").last().val(),
         commodity: $(".commodity").last().val(),
         unit: $(".unit").last().val(),
         value: $(".value").last().val(),
    }
        $.ajax({
            url: '/baseline',
            type: 'POST',
            data: data
        }).then(
            cloneRow.clone().appendTo('#tableData tbody').find(".value").val(''),
            $("#next").removeAttr('disabled'),
            $("#link").attr('href', '/savings')
        )

    })

    $('#tableData').on('click', 'button.addRowS', function(e) {
        const cloneRow = $('#tableData tbody tr').first();
        e.preventDefault();
        let data = {
         project_id: $(".project_id").last().val(),
         phase: $(".phase").last().val(),
         commodity: $(".commodity").last().val(),
         unit: $(".unit").last().val(),
         value: $(".value").last().val()
    }
        $.ajax({
            url: '/savings',
            type: 'POST',
            data: data
        }).then(
            cloneRow.clone().appendTo('#tableData tbody').find(".value").val(''),
            $("#next").removeAttr('disabled'),
            $("#link").attr('href', '/')
        )

    })

Answer 1

To persist values across pages, several solutions can be used: localStorage, queryString, State machines.

Here the problem comes from that val(projectId) is not defined since you reload a new page.

Depending on your constraint for your app, I would advice you to use queryString since it is very straightforward (just add the query in the URL and you can retrieve it with JS).

https://en.wikipedia.org/wiki/Query_string