从 JQuery 模态对话框中获取值提交到另一个输入类型

Question

JQuery & Javascript 我太穷了。

我有两个简单的表格。一个作为主要形式，具有输入类型文本 & 和超链接。 JQuery 带有 select 选项列表的模态对话框的另一种形式。

我只想：

如果用户单击主表单中的超链接 <a>See Milk</a>，则会显示 JQuery 模态对话框。

然后，如果选项列表是从模态对话框select编辑的并单击提交，它应该关闭模态对话框并在主窗体的输入类型上显示值。

这里是HTML初级形式：

<form action="milk.php" id="milk_form">
  <input type="text" name="milk_input_name" id="milk_input_id" class="milk_input_class" value=""><br/>
  <a id="milk_a_id" class="milk_a_class" data-target="#milk_modal" data-toggle="modal" href="">See Milk List</a>
</form>

这里是模态形式的HTML：

<form action="milk.php" id="milk_form">
  <input type="text" name="milk_input_name" id="milk_input_id" class="milk_input_class" value=""><br/>
  <a id="milk_a_id" class="milk_a_class" data-target="#milk_modal" data-toggle="modal" href="">See Milk List</a>
</form>

Answer 1

这是一个演示代码，根据您的要求使用 JQuery UI。

JSFIDDLE

//HTML 代码

<form action="milk.php" id="milk_form">
  <input type="text" name="milk_input_name" id="milk_input_id" class="milk_input_class" value=""><br/>
  <a id="milk_a_id" href="#">See Milk List</a>
</form> 

  <div id="dialog" >
     <select id="myselect" name="Icecream Flavours">
                <option value="double chocolate">Double Chocolate</option>
                <option value="vanilla">Vanilla</option>
                <option value="strawberry">Strawberry</option>
                <option value="caramel">Caramel</option>
        </select>
  </div>

//JQUERY

$(function() {
    var dialog = $("#dialog" ).dialog({
      autoOpen: false,
      height: 300,
      width: 350,
      modal: true,
      buttons: {
           "Create an account": addUser,
        Cancel: function() {
          dialog.dialog( "close" );
        }
      },
      close: function() {
       //Do Something
      }
    });

    $( "#milk_a_id" ).on( "click", function() {
      dialog.dialog( "open" );
    });

     function addUser(){
         var selectedItem = $("#myselect option:selected" ).text();
        $("#milk_input_id").val(selectedItem);
          dialog.dialog( "close" );
     }
  });

从 JQuery 模态对话框中获取值提交到另一个输入类型

Get Value from JQuery Modal Dialog Submit to another Input Type

javascript

forms

jquery

modal-dialog