Dave's Brain

Browse - Programming Tips - In a jQuery dialog dialog, how do I capture the output 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
Copyright © 2008-2017, dave - Code samples on Dave's Brain is licensed under the Creative Commons Attribution 2.5 License. However other material, including English text has all rights reserved.