How to open form action in Jquery Dialog

Question

I have a form:

<form style="display: inline;" action="/player.php" method="post">
            <input type="hidden" name="recname" value="'.$row['name'].'">
            <input type="hidden" name="recordingdesc" value="'.$row['description'].'">
            <input type="hidden" name="reclink" value="$_SESSION['customerid'].'-'.$row['timestamp'].'.wav">

            <button type="submit" class="tooltip table-button ui-state-default ui-corner-all" title=" rec"><span class="ui-icon ui-icon-volume-on"></span></button>
            </form>

and i want player.php to open in a modal dialog and be able to display the post information how can this be done.

Answer 1

Ajax is the answer. Post the form via ajax and in the callback function, (if the post was successful) you can create your dialog and load the data returned from the post. Check out Jquery's documentation on Jquery.post

Answer 2

First create a dialog using jquery-ui. You then need to ajax submit the form:

$("form button").click(function() {
  $.post({url: '/player.php', data: $("form").serialize(), 
         success: function (data) {
                     $(div in dialog).html(data);
                     $("#MyDialog").dialog('open');
                  }
  });
  return false;
});