How can I check if 2 Contact Form 7 checkbox inputs are checked or not, with the use of Jquery?

user_17520104 0
Viewed 312

To begin with this is my HTML:

<p>
    <span class="wpcf7-form-control-wrap checkbox-770">
        <span class="wpcf7-form-control wpcf7-checkbox" id="Personal">
            <span class="wpcf7-list-item first last">
            <label>
                <input type="checkbox" name="checkbox-770[]" value="buisness">
                    <span class="wpcf7-list-item-label">buisness
                    </span>
            </label>
            </span>
        </span>
    </span>
<br>
    <span class="wpcf7-form-control-wrap checkbox-771">
        <span class="wpcf7-form-control wpcf7-checkbox" id="buisness">
            <span class="wpcf7-list-item first last">
            <label>
                <input type="checkbox" name="checkbox-771[]" value="Personal">
                    <span class="wpcf7-list-item-label">Personal
                    </span>
            </label>
            </span>
        </span>
    </span>
</p>

And I want to simply check if those 2 checkbox inputs are checked or not, with 2 seperate if statements using Jquery.

Jquery (that I tried so far):

document.addEventListener( 'wpcf7mailsent', function( event ) {
        jQuery(function($) {
        if ($('#Personal > input').is(':checked')) {
            alert('dataLayer Business Pushed!');
        } else {
            alert('If statement did not work!');
        }
        if ($('#buisness > input').is(':checked')) {
            alert('dataLayer Personal Pushed!');
        }
    });
}, false );

The Jquery code above has 2 special lines ( the first and last lines ) that are related to Contact form 7 (a plugin for wordpress) and their purpose is to add an Event listener which in this case will excecute whatever I have inside the Event Listener's brackets upon submitting a form. Note that This code runs error free, and It returns the alert() command I have nested inside the else statement.

Question: What am I typping incorrectly in my Jquery code, and how can I check the checkboxes using Jquery based on the HTML I written above?

contact-form-7 wordpress forms jquery javascript
3 Answers

To access the form data on wpcf7mailsent event, you have to use event.detail.inputs

<script>document.addEventListener( 'wpcf7submit', function( event ) {
        let inputs = event.detail.inputs;
        for ( let i = 0; i < inputs.length; i++ ) {
            if ( 'checkbox-770[]' == inputs[i].name ) {
                alert( 'checkbox 770 is checked' );
            } else if ('checkbox-771[]' === inputs[i].name ){
                alert( 'checkbox 771 is checked' );
            }
        }
    }, false );
</script>
user_38214670

It would be simpler to use some sort of checker in the HTML i reckon.

For example:

   <input type="checkbox" checked={props.completed} />

if you check props.completed for true/false in your jquery file you should see if its checked or not

user_162438840

Since you cannot change the HTML file you will just have to use the Ids that the checkboxes have. Maybe something like this will work for you.

//using jQuery
if($('#katoikiamou').is(':checked')){
}

//or

if($('#epixeirisimou').is(':checked')){
}


$("input[type='checkbox']").val();
$('#check_id').val();
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

not completely sure but hopefully helps somewhat

user_162438840
Related