如果满足条件，则将多个字段传递给隐藏表单字段

我需要使用javascript/jquery将多个填充值传递到一个隐藏的表单字段。字段必须有值或不通过。我可以毫无问题地通过常规文本字段，但复选框和单选字段似乎总是让我着迷。Javascript不是我的专长，所以我愿意学习。提前谢谢。

我们想要获取的值是：

问题/评论
产品兴趣(可以是多个值(
行业
员工人数
如果"多个位置"；真">

每个项目都将由一个管道字符分隔

$(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>

这里有一种方法。您只需在表单标记上放置一个change事件侦听器——对表单的任何更改都将触发脚本。写入隐藏字段的字符串是JSON，可以在后端轻松解码。

$('#theForm').on('change', function() {
let vals = [];
let prod = [], ind = [];
$(".fCustom_LR_FormServices input:checked").each(function(){ prod.push(getTextFromElID($(this).attr('id')))})
vals.push({'commentField': $("#13005").val() || ''})
vals.push({'products': prod || []})
vals.push({'industryField': getTextFromElID($(".fRAQFormIndustry input:checked").attr('id')) || ''})
vals.push({'numberEmployees': getTextFromElID($(".fCustom_LR_FormEmployees input:checked").attr('id')) || ''})
vals.push({'multipleLocations': getTextFromElID($(".Custom_LR_FormMulitLocation input:checked").attr('id')) || ''})
$("#14604").val(JSON.stringify(vals));     
})
function getTextFromElID(id) {
return $(`[for=${id}]`).text().trim();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form id='theForm'>
<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"  />
<label class="inline" for="147771_47771">Auto Repair / Dealership</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147773_47773" value="47773" />
<label class="inline" for="147773_47773">Cleanroom</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147775_47775" value="47775" />
<label class="inline" for="147775_47775">Food Processing</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147777_47777" value="47777" />
<label class="inline" for="147777_47777">Healthcare</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147779_47779" value="47779" />
<label class="inline" for="147779_47779">Manufacturing</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147781_47781" value="47781" />
<label class="inline" for="147781_47781">Restaurant / Bar</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147783_47783" value="47783" />
<label class="inline" for="147783_47783">Retail</label>
</span><span class="" style="">
<input type="radio" name="13039[]" id="147785_47785" value="47785" />
<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" />
<label class="inline" for="13007_47921">Uniforms or Apparel</label>
</span><span>
<input type="checkbox" name="13007_47923" id="13007_47923" value="47923" />
<label class="inline" for="13007_47923">Mats, Mops or Towels</label>
</span><span>
<input type="checkbox" name="13007_47925" id="13007_47925" value="47925" />
<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" />
<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" />
<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" />
<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" />
<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" />
<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" />
<label class="inline" for="13011_47787_47787">Yes</label>
</span><span class="" style="">
<input type="radio" name="13011[]" id="13011_47789_47789" value="47789" />
<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>
</form>

相关内容

最新更新

热门标签：