[英]Get Value from JQuery Modal Dialog Submit to another Input Type
I am so poor with JQuery & Javascript. 我对JQuery和Javascript非常可怜。
I have a two simple forms. 我有两种简单的形式。 One as primary form with an input type text & and a hyperlink.
一种作为主要形式,带有输入类型的text&和超链接。 Another form as JQuery Modal Dialog with select option list.
另一种形式是带有选择选项列表的JQuery Modal对话框。
All I want to do is: 我要做的就是:
If user click the hyperlink <a>See Milk</a>
from the primary form, then will showing a JQuery Modal Dialog. 如果用户从主表单中单击超链接
<a>See Milk</a>
,则将显示一个JQuery Modal对话框。
Then if the option list are selected from the Modal Dialog & click Submit, it should closing the Modal Dialog & showing the value on the input type at primary form. 然后,如果从“模态对话框”中选择了选项列表并单击“提交”,它将关闭“模态对话框”并以主要形式显示输入类型上的值。
Here is the HTML of Primary 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>
Here is the HTML of Modal 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>
Here is an Demo Code As per your requirement using JQuery UI. 这是一个演示代码,根据您使用JQuery UI的要求。
//HTML CODE // 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 // 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" );
}
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.