如何將輸入數據保存到我所有的 forms
[英]How to persist input data to all of my forms
問題描述
我正在為我的工作構建一個輸入表單項目，但我遇到了保持某個輸入值的問題。 當用戶創建一個新項目時，他們必須為該項目提供一個項目 ID。 我有 5 個 forms 供用戶使用，我希望他們能夠在第一個表單上一次輸入項目 ID，然后讓它持續到其他 4 個 forms 而無需再次輸入。
這是 html 表單，我想在其中提取項目 ID 並將其保存到我的 forms 的 rest 中。 我想使用 id“pid”提取值，然后當單擊底部的按鈕並使用 id 為“data”時，我希望將值推送到變量中。
<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 & 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>
這是我的 js 文件。 每次點擊都是不同的頁面。 但是，每個表單都具有相同的項目 ID 輸入，其中 class 為“project_id”。 所以我嘗試 $(".project_id").val(projectId) 但是當我繼續下一個表單時沒有任何反應。 每個表單都有一個輸入值，其 class 為“project_id”，這就是我嘗試根據第一個表單的輸入設置它的地方。
如果它有助於查看所有代碼，這是一個指向 repo 的鏈接。 https://github.com/oballematt/ecm_input_forms
非常感謝任何有關如何實現這一目標的建議！ 謝謝！
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', '/')
)
})
1 個解決方案
解決方案1
0 2021-06-01 15:12:31
要跨頁面保留值，可以使用多種解決方案：localStorage、queryString、State 機器。
這里的問題來自val(projectId)沒有定義，因為您重新加載了一個新頁面。
根據您對應用程序的約束，我建議您使用 queryString，因為它非常簡單（只需在 URL 中添加查詢，您可以使用 JS 檢索它）。
Forms，如果所有輸入框都有值，如何讓我的代碼僅顯示信息已提交
[英]Forms, How do I get my code to only display info has been submitted if all input boxes have values
如何將輸入從 html 中的 forms 發送到 javascript 到我的 json 文件
[英]How to send input from forms in html to javascript to my json file
如何使用Redux持久化在所有reducer切片中保持狀態？
[英]How to persist state in all slices of reducer, using redux persist?
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.