Question 165323 in Wordpress Question posted in
The official Wordpress documentation can be found here.

Can WordPress set a checkbox to true on specific pages?

I have used Contact Form 7 to create a product enquiry form on each product page. The forms contains checkboxes for every product to help with the enquiry. How do I automatically set a specific product checkbox to true/on if the user is on the corresponding product page?

I’ve added a dynamic hidden field to the form which gets the page title.

Contact form &produce a checkbox array in the name field of each check box name="products[]"

Ideally i’d like the script to loop through and select checkbox that matches the hidden field, can somebody show me how to do this please?

Below is my current jquery

        $( document ).ready(function() {
            var get_product_name = $('#product-name').val(); // hidden field value
            if(get_product_name == 'product-page-title')
            {
              $('CHECKBOX_HERE').prop('checked', true);
            }
        });

HTML produced by contact form 7…

<span class="wpcf7-form-control-wrap page-title">
<input type="hidden" name="page-title" value="Product template" size="40" class="wpcf7-form-control wpcf7dtx-dynamictext wpcf7-dynamichidden" aria-invalid="false">
</span>

<span class="wpcf7-form-control-wrap products">
    <span class="wpcf7-form-control wpcf7-checkbox">
    
    <span class="wpcf7-list-item first"><label><input type="checkbox" name="products[]" value="Product One"><span class="wpcf7-list-item-label">Product One</span></label>
    </span> 
    <span class="wpcf7-list-item"><label><input type="checkbox" name="products[]" value="Product Two"><span class="wpcf7-list-item-label">Product Two</span></label>
    </span> 
    <span class="wpcf7-list-item"><label><input type="checkbox" name="products[]" value="Product Three"><span class="wpcf7-list-item-label">Product Three</span></label>
    </span> 
    <span class="wpcf7-list-item"><label><input type="checkbox" name="products[]" value="Product Four"><span class="wpcf7-list-item-label">Product Four</span></label>
    </span> 
    <span class="wpcf7-list-item last"><label><input type="checkbox" name="products[]" value="Product Five"><span class="wpcf7-list-item-label">Product Five</span></label>
    </span>

    </span>
</span>

As you can see I have limited skills

Tags:

2

Answers


  1. Chosen as BEST ANSWER
    0

    UPDATE!! this worked!

    1. Check hidden field value which contains page title

    2. Checks array of checkbox values

    3. Loop though checkbox values

    4. Check if any checkbox values match the hidden field

    5. Set that checkbox to true

           $( document ).ready(function() {
         var get_product_name = $('.wpcf7-dynamichidden').val(); // Check hidden field value which contains page title
         //console.log(get_product_name);
         var checkboxValues = $('.wpcf7-list-item label input:checkbox').map(function(){ 
             return $(this).val();
         }).get(); //Checks array of checkbox values
         //console.log(checkboxValues);

         $.each(checkboxValues, function(i, val){ // Loop though checkbox values
            if (i = get_product_name) { // Check if any checkbox values match the hidden field
             console.log(i);
             $(".wpcf7-list-item label input:checkbox[value='" + get_product_name + "']").prop('checked', true); // Set that checkbox to true
            }
         });
     });

  2. 0

    The selector is not correct, you are trying to select an input element that has an id ‘product-name’ so the input you are searching for looks like this:

    <input id="product-name">

    But you don’t have that in your HTML, so you should make a selector for this element which is the one you are looking for:

    <input type="hidden" name="page-title" value="Product template" size="40" class="wpcf7-form-control wpcf7dtx-dynamictext wpcf7-dynamichidden" aria-invalid="false">

    So option 1, is to change the selector $(‘#product-name’).val(); for this selector:

    $('input[type="hidden"]').val();

    But this is too generic, doing so could select more than 1 input type hidden and give you a different value if you want something more specific you could use the existing class from the html element:

    <input type="hidden" name="page-title" value="Product template" size="40" class="wpcf7-form-control wpcf7dtx-dynamictext wpcf7-dynamichidden" aria-invalid="false">

    And then call the selector like this:

    $('.wpcf7-dynamichidden').val()

    Again this is also really generic, and it could select all fields in your page that has a class wpcf7-dynamichidden, so the best approach is if you could change your HTML to have a specific id or a specific name, or a specific class, in which you could change later your selector $(‘#product-name’).val() to something like this:

    $('input[type="hidden"]').val(); //No need to change anything in the HTML, too generic though
$('.wpcf7-dynamichidden').val(); //No need to change anything in the HTML, also generic and can select more than one input element
$('#yourIdAddedToTheElement').val(); //Requires adding an id to your HTML element like <input id="yourIdAddedToTheElement" type="hidden">

    Afterall if you just want to try out this code, it could work:

    $(document).ready(function() {
        var get_product_name = $('.wpcf7-dynamichidden').val();
        if(get_product_name == 'product-page-title')
        {
          $('input[type="checkbox"]').prop('checked', true); //Again this will select all checkboxes so you need to speficy in your selector which one to put to true
        }
    });

    Hope this helps.

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search