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

How to check if a checkbox is checked in contact form 7? – WordPress

To begin with, I have a contact form that looks like this:

enter image description here

The contact form 7 editor code is:

<input type="checkbox" id="katoikia" name="tracking-777">Tracking Acceptance</input>

<label> Your Name:
    [text* your-name] </label>

<label> Email:
    [email* your-email] </label>

<label> Subject
    [text* your-subject] </label>

<label> Your message (optional):
    [textarea your-message] </label>

[submit "Submit"]

I want to check if the checkbox I have is checked and if it’s checked I Want to track the contact form fields. But I struggle to find a way to achieve the if statement check.

I used this piece of javascript but it doesn’t work at all:

<script>
    $(document).ready(function() {
    $('#katoikia').change(function() {
        // CHANGED THIS SELECTOR
        if ($('#katoikia').is(':checked')) {
            alert('Checked');
        } else {
            alert('Unchecked!');
        }
    });
});
</script>

Question: How can I check if the checkbox is checked or not and accordingly do ‘something’?

Note: Feel free to give brief explanation of where or why I should use what you will suggest me to, plus make sure to let me know if using the code in the contact form 7 editor is ok or not.

Tags:

2

Answers


  1. 0

    Your pure JS is correct. Maybe the input field is not rendered, when your JS runs the first time. That could be the reason, why the event handler (change) is not set. Try the following JS:

    $(document).ready(function() {
$(document).on("change", "#katoikia", function() {
    // CHANGED THIS SELECTOR
    if ($('#katoikia').is(':checked')) {
        alert('Checked');
    } else {
        alert('Unchecked!');
    }
});

    });

    P.S: input is a self-closing tag. So remove the closing tag. More informations here.

    Login or Signup to reply.
  2. 0

    Your jQuery is incorrect for usage on WordPress. You can insert it into the CF7 Editor, but I would recommend minifying it so that cf7 doesn’t auto-p it.

    You can’t just use $ in WordPress.

    <script>
    jQuery(function($) {
        $('#katoikia').on('change', function() {
            // CHANGED THIS SELECTOR
            if ($('#katoikia').is(':checked')) {
                alert('Checked');
            } else {
                alert('Unchecked!');
            }
        });
    });
</script>

    Minified it would look like this:

    <script>jQuery(function(e){e("#katoikia").on("change",function(){e("#katoikia").is(":checked")?alert("Checked"):alert("Unchecked!")})});</script>
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search