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?
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>
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
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