Dave's Brain

Browse - programming tips - jquery dialog capture input from a form

Date: 2010sep29
Language: javaScript


Q.  In a jQuery dialog dialog, how do I capture the output from a <form> ?

A.  This is tricky.

- Override the form's submit to do your own custom processing
  (including captureing the <form>'s output)

- Add buttons to the dialog using the buttons option.
  Make the OK button fire the <form>'s submit.
  

function showDialog() {
	$('#my_form').submit(doSubmit);

        $('#my_dialog').dialog({
        	width: '60%',
        	height: 600,
                title: 'My Form'
                modal: true,
                buttons: { 'Cancel': doCancelButton, 'OK': doOkButton,},
                close: closeDialog
        });
        

}

function doSubmit(e) {
	var url = $(this).attr("action");
	var formdata = $(this).serialize();	// Here is the form's data!
	
	e.preventDefault();	// Stop the form from doing its usual thing
	
	$.post(url, formdata, function(data) {
		// Do something with the post result
	});
	
	$('#my_dialog').dialog('close');
}

function doOkButton() {
	$('#my_form').submit();
}

function doCancelButton() {
	$('#my_dialog').dialog('close');
}

Add a comment

Sign in to add a comment