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

To begin with this is my HTML:

<p>
    <span >
        <span  id="Personal">
            <span >
            <label>
                <input type="checkbox" name="checkbox-770[]" value="buisness">
                    <span >buisness
                    </span>
            </label>
            </span>
        </span>
    </span>
<br>
    <span >
        <span  id="buisness">
            <span >
            <label>
                <input type="checkbox" name="checkbox-771[]" value="Personal">
                    <span >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?

Thank you in advance for you precious efforts and help.

CodePudding user response：

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

CodePudding user response：

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

CodePudding user response：

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>