從JQuery模態對話框獲取值提交給另一個輸入類型

Question

我很窮，用JQuery & Javascript。

我有兩個簡單的表格。一個作爲主要形式的輸入類型文本&和一個超鏈接。另一種形式爲帶有選擇列表的JQuery模式對話框。

所有我想要做的是：

如果用戶從主窗體中單擊超鏈接<a>See Milk</a>，那麼就會呈現出jQuery模態窗口。

然後，如果從模態對話框&中選擇選項列表，請單擊提交，它應該關閉顯示主窗體輸入類型值的模式對話框&。

這裏是原生形態的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"); 
    } 
    });