Jquery und zwei Formular

Question

Ich habe eine Seite mit 10 Feldern. Sie sind die Felder zum Einfügen der Spieler eines Spiels Turnier. Wenn der Benutzer auf "Senden" klickt, möchte ich einen modalen Dialog mit jQuery, der "Zahlen von geschätzten Positionen einfügen" mit einem Feld zum Einfügen einer Zahl sagt. Nach dem Klicken auf "Senden" im Dialog sende ich die Daten (Felder für Spieler und Anzahl der geschätzten Positionen) an eine andere Seite, die sie verarbeitet.

Wie kann ich das tun?

Dank

Answer 1

$("#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. 
}); 

Answer 2

Wenn Sie JQuery UI-Dialogfeld verwenden, es wäre eigentlich nur eine Form, die Hälfte davon versteckt sein, wenn Sie beginnen.

Der JQuery UI Dialog ist nichts anderes als ein div auf Ihrer Seite. In Ihrem Formular-Tag müssten Sie also nur ein div mit einer ID erstellen, z. B. "dialog-box". Innerhalb der div würden Sie die Felder, die Sie im modalen Dialog sehen möchten, und die eigentliche Formular-Senden-Schaltfläche setzen. Dann auf Seite laden JavaScript-Code, führen

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

Die Schaltfläche auf der Startseite einreichen würde nicht eine tatsächliche Form Submit-Button, aber nur eher eine Standardschaltfläche mit einem Klick-Funktion, die

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

führt Wenn der Benutzer im Dialogfenster auf Senden klickt, wird das gesamte Formular an den Server gesendet.

Um eine Demo des JQuery UI-Dialog, gehen Sie zu http://jqueryui.com/demos/dialog/

Answer 3

Verwendung jQueryUI.Dialog Bind Aufspringen den Dialog zu submitStage1 dann die ganze Form über 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>