我需要使用 javascript/jquery 將多個填充的值傳遞給隱藏的表單欄位。欄位必須有值或不通過。我可以毫無問題地傳遞常規文本欄位,但復選框和單選欄位似乎總能找到我。Javascript 不是我的專長,所以我愿意學習。提前致謝。
我們想要捕獲的值是:
- 問題/意見
- 產品興趣(這可以是多個值)
- 行業
- 在職員工人數
- 如果為“true”,則為多個位置。
每個專案將由管道字符分隔。
$(document).ready(function() {
$(function(){ $('#13005,#14604').on("keyup",function(){
commentField = $("#13005").val(); " || "
products = $("p.Custom_LR_FormServices input:checkbox:checked").map(function(){return $(this).val()}).get();
industryField = $("p.RAQFormIndustry input:checkbox:checked").map(function(){return $(this).val()}).get();
numberEmployees = $;
multipleLocations = $;
hiddenField = commentField " || " products " || " industryField "||" numberEmployees " || " multipleLocations;
$("#14604").val(hiddenField);
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="email pd-text required ">
<label class="field-label" for="12993">Email</label>
<input type="text" name="12993" id="12993" value="" class="text" size="30" maxlength="255" onfocus="" />
</p>
<p class="company pd-text required ">
<label class="field-label" for="12995">Business Name</label>
<input type="text" name="12995" id="12995" value="" class="text" size="30" maxlength="255" onchange="" onfocus="" />
</p>
<p class="comments pd-textarea ">
<label class="field-label" for="13005">Comments/Questions</label>
<textarea name="13005" id="13005" onchange="" cols="40" rows="10" class="standard"></textarea>
</p>
<p class="fRAQFormIndustry pd-radio required ">
<label class="field-label" for="13039">Industry</label>
<span class="value"><span class="" style="">
<input type="radio" name="13039[]" id="147771_47771" value="47771" onchange="" />
<label class="inline" for="147771_47771">Auto Repair / Dealership</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147773_47773" value="47773" onchange="" />
<label class="inline" for="147773_47773">Cleanroom</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147775_47775" value="47775" onchange="" />
<label class="inline" for="147775_47775">Food Processing</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147777_47777" value="47777" onchange="" />
<label class="inline" for="147777_47777">Healthcare</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147779_47779" value="47779" onchange="" />
<label class="inline" for="147779_47779">Manufacturing</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147781_47781" value="47781" onchange="" />
<label class="inline" for="147781_47781">Restaurant / Bar</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147783_47783" value="47783" onchange="" />
<label class="inline" for="147783_47783">Retail</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147785_47785" value="47785" onchange="" />
<label class="inline" for="147785_47785">Other</label>
</span></span>
</p>
<p class="fCustom_LR_FormServices pd-checkbox required ">
<label class="field-label" for="13007">Products</label>
<span class="value"><span>
<input type="checkbox" name="13007_47921" id="13007_47921" value="47921" onchange="" />
<label class="inline" for="13007_47921">Uniforms or Apparel</label>
</span><span>
<input type="checkbox" name="13007_47923" id="13007_47923" value="47923" onchange="" />
<label class="inline" for="13007_47923">Mats, Mops or Towels</label>
</span><span>
<input type="checkbox" name="13007_47925" id="13007_47925" value="47925" onchange="" />
<label class="inline" for="13007_47925">First Aid or Safety Products</label>
</span><span>
<input type="checkbox" name="13007_47927" id="13007_47927" value="47927" onchange="" />
<label class="inline" for="13007_47927">Restroom Supplies or Hand Sanitizer</label>
</span><span>
<input type="checkbox" name="13007_47929" id="13007_47929" value="47929" onchange="" />
<label class="inline" for="13007_47929">Cleaning Chemicals</label>
</span></span>
</p>
<p class="fCustom_LR_FormEmployees pd-radio required ">
<label class="field-label" for="13009">Number of Employees</label>
<span class="value"><span class="" style="">
<input type="radio" name="13009[]" id="13009_47765_47765" value="47765" onchange="" />
<label class="inline" for="13009_47765_47765">1-99</label>
</span><span class="" style="">
<input type="radio" name="13009[]" id="13009_47767_47767" value="47767" onchange="" />
<label class="inline" for="13009_47767_47767">100-249</label>
</span><span class="" style="">
<input type="radio" name="13009[]" id="13009_47769_47769" value="47769" onchange="" />
<label class="inline" for="13009_47769_47769">250 </label>
</span></span>
</p>
<p class="form-field group-alt2 form-field-col row4 Custom_LR_FormMulitLocation pd-radio ">
<label class="field-label" for="13011">We Have Multiple Locations</label>
<span class="value"><span class="" style="">
<input type="radio" name="13011[]" id="13011_47787_47787" value="47787" onchange="" />
<label class="inline" for="13011_47787_47787">Yes</label>
</span><span class="" style="">
<input type="radio" name="13011[]" id="13011_47789_47789" value="47789" onchange="" />
<label class="inline" for="13011_47789_47789">No</label>
</span></span>
</p>
<p class="form-field Saved_Items pd-hidden hidden ">
<label>Saved Item Hidden</label>
<input type="text" name="14604" id="14604" value="" />
<span id="error_for_14604" style="display:none"></span> </p>
**
uj5u.com熱心網友回復:
這是一種方法。我在所有會觸發資料組合的元素上放置了一個類“保護程式”。寫入隱藏欄位的字串是 JSON,可以在后端輕松解碼。
$('.saver').on('blur, change, click', function() {
let vals = [];
let prod = [], ind = [];
$(".fCustom_LR_FormServices input:checked").each(function(){ prod.push($(this).val())})
vals.push({'commentField': $("#13005").val() || ''})
vals.push({'products': prod || []})
vals.push({'industryField': $(".fRAQFormIndustry input:checked").val() || ''})
vals.push({'numberEmployees': $(".fCustom_LR_FormEmployees input:checked").val() || ''})
vals.push({'multipleLocations': $(".Custom_LR_FormMulitLocation input:checked").val() || ''})
$("#14604").val(JSON.stringify(vals));
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<p class="email pd-text required ">
<label class="field-label" for="12993">Email</label>
<input type="text" name="12993" id="12993" value="" class="text" size="30" maxlength="255" onfocus="" />
</p>
<p class="company pd-text required ">
<label class="field-label" for="12995">Business Name</label>
<input type="text" name="12995" id="12995" value="" class="text" size="30" maxlength="255" onchange="" onfocus="" />
</p>
<p class="comments pd-textarea ">
<label class="field-label" for="13005">Comments/Questions</label>
<textarea name="13005" id="13005" cols="40" rows="10" class="standard saver"></textarea>
</p>
<p class="fRAQFormIndustry pd-radio required ">
<label class="field-label" for="13039">Industry</label>
<span class="value"><span class="" style="">
<input type="radio" name="13039[]" id="147771_47771" value="47771" class='saver' />
<label class="inline" for="147771_47771">Auto Repair / Dealership</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147773_47773" value="47773" class='saver' />
<label class="inline" for="147773_47773">Cleanroom</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147775_47775" value="47775" class='saver' />
<label class="inline" for="147775_47775">Food Processing</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147777_47777" value="47777" class='saver' />
<label class="inline" for="147777_47777">Healthcare</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147779_47779" value="47779" class='saver' />
<label class="inline" for="147779_47779">Manufacturing</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147781_47781" value="47781" class='saver' />
<label class="inline" for="147781_47781">Restaurant / Bar</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147783_47783" value="47783" class='saver' />
<label class="inline" for="147783_47783">Retail</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147785_47785" value="47785" class='saver' />
<label class="inline" for="147785_47785">Other</label>
</span></span>
</p>
<p class="fCustom_LR_FormServices pd-checkbox required ">
<label class="field-label" for="13007">Products</label>
<span class="value"><span>
<input type="checkbox" name="13007_47921" id="13007_47921" value="47921" class='saver' />
<label class="inline" for="13007_47921">Uniforms or Apparel</label>
</span><span>
<input type="checkbox" name="13007_47923" id="13007_47923" value="47923" class='saver' />
<label class="inline" for="13007_47923">Mats, Mops or Towels</label>
</span><span>
<input type="checkbox" name="13007_47925" id="13007_47925" value="47925" class='saver' />
<label class="inline" for="13007_47925">First Aid or Safety Products</label>
</span><span>
<input type="checkbox" name="13007_47927" id="13007_47927" value="47927" class='saver' />
<label class="inline" for="13007_47927">Restroom Supplies or Hand Sanitizer</label>
</span><span>
<input type="checkbox" name="13007_47929" id="13007_47929" value="47929" class='saver' />
<label class="inline" for="13007_47929">Cleaning Chemicals</label>
</span></span>
</p>
<p class="fCustom_LR_FormEmployees pd-radio required ">
<label class="field-label" for="13009">Number of Employees</label>
<span class="value"><span class="" style="">
<input type="radio" name="13009[]" id="13009_47765_47765" value="47765" class='saver' />
<label class="inline" for="13009_47765_47765">1-99</label>
</span><span class="" style="">
<input type="radio" name="13009[]" id="13009_47767_47767" value="47767" class='saver' />
<label class="inline" for="13009_47767_47767">100-249</label>
</span><span class="" style="">
<input type="radio" name="13009[]" id="13009_47769_47769" value="47769" class='saver' />
<label class="inline" for="13009_47769_47769">250 </label>
</span></span>
</p>
<p class="form-field group-alt2 form-field-col row4 Custom_LR_FormMulitLocation pd-radio ">
<label class="field-label" for="13011">We Have Multiple Locations</label>
<span class="value"><span class="" style="">
<input type="radio" name="13011[]" id="13011_47787_47787" value="47787" class='saver' />
<label class="inline" for="13011_47787_47787">Yes</label>
</span><span class="" style="">
<input type="radio" name="13011[]" id="13011_47789_47789" value="47789" class='saver' />
<label class="inline" for="13011_47789_47789">No</label>
</span></span>
</p>
<p class="form-field Saved_Items pd-hidden hidden ">
<label>Saved Item Hidden</label>
<input type="text" name="14604" id="14604" value="" style='width:100%;'/>
<span id="error_for_14604" style="display:none"></span> </p>
轉載請註明出處,本文鏈接:https://www.uj5u.com/shujuku/373573.html
標籤:javascript html 查询 形式
上一篇:材質UI樣式
下一篇:表單占位符文本上的懸停效果
