Jquery ui confirmation dialog box in CF7

  • Resolved Krupal Kumar

    (@krupalpatel92)


    10 years, 6 months ago

    Hi,

    How to used jquery ui confirmation dialog box on form submit in Contact form 7 plugin

    on form submit open dialog box for confirmation

    my code on click submit button

    is simpale js confirmation code is working

    $("#confirmation_before_submit").click(function(){

	var confirm_get = confirm("Upon Review of your documents and pay of your invoice, you will receive your itinerary.");

	if(confirm_get === true){
		return true;
	}else{
		return false;
	}

});

    is jquery ui dialog modal confirmation code is not working

    $('<div id="dvConfirmModal"></div>').appendTo('body')
		.html("<p>Upon Review of your documents and pay of your invoice, you will receive your itinerary.</p>")
		.dialog({
			modal: true,
			title: 'Confirmation',
			zIndex: 10000,
			autoOpen: true,
			width: 'auto',
			resizable: false,
			draggable: false,
			buttons: {
				Ok: function(){
					$(this).dialog('close');
					return true;
				},
				Cancel: function(){
					$(this).dialog("close");
					return false;
				}
			},
			close: function(event, ui) {
				$(this).remove();
			}
		});
});

    https://www.ads-software.com/plugins/contact-form-7/

Viewing 1 replies (of 1 total)
  • Thread Starter Krupal Kumar

    (@krupalpatel92)

    Set two button in CF7 form default submit button and our button

    <!-- Default CF7 submit button -->
<input class="wpcf7-form-control wpcf7-submit" value="Send" id="submit_after_confirm" style="display:none;" type="submit" />
<!-- Our submit button -->
<input value="submit" id="confirmation_before_submit" type="button" />

    on click our submit button show jquery ui dialog box if user click ok fire js click trigger else close dialog box

    $("#confirmation_before_submit").click(function(){

	var msg = "Are you sure delete this record.";

	$('<div id="dvConfirmModal"></div>').appendTo('body').html("<p>"+msg+"</p>")
		.dialog({
				modal: true,
				title: 'Confirmation',
				zIndex: 10000,
				autoOpen: true,
				width: 'auto',
				resizable: false,
				draggable: false,
				buttons: {
					Ok: function(){
						$(this).dialog('close');
						$( "input#submit_after_confirm" ).trigger( "click" );
					},
					Cancel: function(){
						$(this).dialog("close");
					}
				},
				close: function(event, ui) {
					$(this).remove();
				}
			});
});

Viewing 1 replies (of 1 total)
  • The topic ‘Jquery ui confirmation dialog box in CF7’ is closed to new replies.