Viewing 6 posts - 1 through 6 (of 6 total)
  • Author
    Posts
  • #1236418

    Hi Support
    I have a list of multiple check boxes in a form element. The user can check all of them, but at least one should be checked to allow form submission. How can I enforce that requirement?

    #1236427

    You like to have an acceptance button – but for enfold contact form?

    By the way – dear Dev’s – might be a nice to have thing: acceptance Checkbox

    You had to know the ID of the checkbox you like to have as an acceptance button. ( on my example it is checkbox with ID: avia_5_1 )
    if you are not familiar with developer tools – you even can count from top to bottom – left to right. – you see on my test page that it is the 5th element on that form.
    By the way – if it is the last visible element before submit you can use as selector even the class: av-last-visible-form-element
    With the setting of that checkbox you can style and influence the behavior of the submit button:

    this code here is for a specific page – you had to adjust it to your page ID.

    code comes to child-theme functions.php:

    function change_submit_button(){
    if(is_page('38472')){
    ?>
    <script type="text/javascript">
    (function($){
    $(document).ready(function(){ 
    	$('form.avia_ajax_form').find('input[type="submit"]').val("Stop").css({
    			'background-color': 'red',
    			'pointer-events': 'none',
    			});
    
    	$("#avia_5_1").on( "click", function(){
    	    var a = $("#avia_5_1");
    	    if(a.length == a.filter(":checked").length){
    	        $('form.avia_ajax_form').find('input[type="submit"]').val("Submit").css({
    			'background-color': 'green',
    			'pointer-events': 'auto',
    			});
    		}
    		else{
    			$('form.avia_ajax_form').find('input[type="submit"]').val("Stop").css({
    			'background-color': 'red',
    			'pointer-events': 'none',
    			});
    		}
    	});
    });
    })(jQuery);
    </script>
    <?php
    }
    }
    add_action('wp_footer', 'change_submit_button');

    PS: Change value ( Stop, Submit ) to your needs.
    results page: https://webers-testseite.de/contact/

    #1236428

    to go this way via filter would not be necessary here, but I just left it like that for my Contact Form 7 form. I can assign a class to these acceptance checkboxes, and I can use this class to address several boxes; and only if all of them are checked, the Send button is released.

    by the way normal transition on submit button is 0.3s ease-in-out
    you can have it in this case a little different by:

    .avia_ajax_form p input[type="submit"] {
      -webkit-transition: all 1s linear;
      transition: 		all 1s linear;
    }
    #1236588

    Hi,

    Thanks for helping out @guenni007. Did you that answer your question @carstenstrandvad?

    Best regards,
    Rikard

    #1236650

    I changed the code a little bit above. So that you don’t have only one Acceptance checkbox – assign a class to the IDs – here I have chosen acceptance.
    You have to be careful when assigning multiple elements – they are separated by commas but are enclosed in quotes as group.
    $('#avia_5_1 , #avia_6_1').addClass('acceptance');
    all your acceptance checkboxes must be listed here

    now you can also see the advantage over .filter : Only if all elements with the class pass the filter, the statement is considered true.
    see again: https://webers-testseite.de/contact/

    function change_submit_button(){
    if(is_page('123456')){
    ?>
    <script type="text/javascript">
    (function($){
    $(document).ready(function(){ 
    	$('#avia_5_1 , #avia_6_1').addClass('acceptance');
    	$(".acceptance").prop('checked', false);
    	$('form.avia_ajax_form').find('input[type="submit"]').val("Stop").css({
    			'background-color': 'red',
    			'pointer-events': 'none',
    			});
    
    	$(".acceptance").on( "click", function(){
    	    var a = $(".acceptance" );
    	    if(a.length == a.filter(":checked").length){
    	        $('form.avia_ajax_form').find('input[type="submit"]').val("Submit").css({
    			'background-color': 'green',
    			'pointer-events': 'auto',
    			});
    		}
    		else{
    			$('form.avia_ajax_form').find('input[type="submit"]').val("Stop").css({
    			'background-color': 'red',
    			'pointer-events': 'none',
    			});
    		}
    	});
    });
    })(jQuery);
    </script>
    <?php
    }
    }
    add_action('wp_footer', 'change_submit_button');
    #1241511

    must have been very urgent ;)

Viewing 6 posts - 1 through 6 (of 6 total)
  • You must be logged in to reply to this topic.