Jquery and two form

I've a pag开发者_如何转开发e with 10 fields. They are the fields for insert the players of a game's tournament. When the user click "submit" I want a modal dialog with jquery that says "Insert numbers of prized positions" with a field for insert a number. After click 'submit' on dialog I send the data (fields for players and number of prized positions) to another page that process them.

How can I do this?

Thanks

If you use JQuery UI's Dialog box, it actually would be just one form, half of which is hidden when you start.

The JQuery UI Dialog is nothing more than a div on your page. So inside your form tag, you would just need to create a div with an id, such as "dialog-box". Inside the div you would put the fields that you want to see in the modal dialog and the actual form submit button. Then on page load javascript code, execute

$( "#dialog-box" ).dialog({autoOpen: false, modal: true});

The submit button on the initial page would not be an actual form submit button, but just rather a standard button with a click function that executes

$( "#dialog-box" ).dialog( "open" );

When the user clicks the submit button in the dialog window, this will submit the entire form to the server.

To see a demo of the JQuery UI Dialog, go to http://jqueryui.com/demos/dialog/

$("#submitbutton").click(function() {
  $("#target-for-input").html("<label for='prizes'>Insert numbers of prized positions</label><input type='text' name='prizes' id='prizes'");
  $(this).unbind("click"); //no click even makes sure form is submitted the normal way when hitted the button again
  return false; //makes sure the normal behavior of submit is not triggered.
});

use jQueryUI.Dialog Bind popping up the dialog to submitStage1 then the whole form is submitted via submitStage2

<form action="/myaction" method="post">
   <!-- form contents -->
   <div id="dialog">
      <!-- dialog contents -->
      <input type="submit" id="submitStage2" value="Submit" />
   </div>
   <button id="submitStage1">Submit</button>
</form>