Jquery и две формы

Question

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

Как мне это сделать?

Спасибо

Answer 1

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

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

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

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

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

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

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

Answer 2

use jQueryUI.Dialog Привязка, которая выводит диалоговое окно на 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>

Answer 3

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