Home > Software design >  Passing several fields if meets a criteria to a Hidden Form Field
Passing several fields if meets a criteria to a Hidden Form Field

Time：12-06

I need to pass multiple filled values to a hidden form field using javascript/jquery. The fields must have a value or don't pass. I can pass the regular text fields with no problem but the checkbox and radio fields always seem to get me. Javascript is not my expertise so I'm willing to learn. Thanks in advance.

The values we are wanting to capture are:

  1. Questions/comments
  2. Product Interests (this can be multiple values)
  3. Industry
  4. Number of Employees
  5. Multiple Locations if "true".

Each item will be separated by a pipe character.

$(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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

**

CodePudding user response：

Here's one way. I put a class 'saver' on all the elements that would trigger the data assemblage. The string that gets written into the hidden field is JSON and it can be easily decoded on the back end.

$('.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>
<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Page link：https//www.codepudding.com/Softwaredesign/217414.html

Prev:Vue.Js, Nuxt.js Multi-steps form - how to presist data on page reload
Next:Dynamically creating images with a random lifespan
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding