JQuery и две формы

Question

У меня есть страница с 10 полями. Это поля для вставки игроков в турнир игры. Когда пользователь нажимает «отправить», мне нужен модальный диалог с jquery, который говорит «Вставить числа ценных позиций» с полем для вставки числа. После нажатия кнопки «отправить» в диалоговом окне я отправляю данные (поля для игроков и количество назначенных позиций) на другую страницу, которая обрабатывает их.

Как я могу это сделать?

Благодаря

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

Если вы используете диалоговое окно JQuery UI, это на самом деле будет только одна форма, половина из которых скрыта при запуске.

Диалоговое окно JQuery UI - это не более чем div на вашей странице. Поэтому внутри вашего тега формы вам просто нужно создать div с идентификатором, например «диалоговое окно». Внутри div вы поместите поля, которые хотите видеть в модальном диалоговом окне, и кнопку фактической формы отправки. Затем при загрузке страницы Javascript коды, выполнить

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

кнопки отправить на начальной странице не будет актуальная форма кнопки отправки, но только вместо стандартной кнопки с функцией мыши, которая выполняет

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

Когда пользователь нажимает кнопку отправки в диалоговом окне, это отправляет всю форму на сервер.

Чтобы увидеть демонстрацию JQuery UI Dialog, перейдите http://jqueryui.com/demos/dialog/

Answer 3

использования jQueryUI.Dialog Bind выскакивают диалог, чтобы submitStage1 тогда вся форма представляется с помощью 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>