【发布时间】：2012-08-24 01:37:19
【问题描述】：
this thread >>
如何将模式框中选择的值传递给基于其行的每个文本框？您可以动态添加或删除文本框，为了填充文本框，您必须从模式框中选择值.
例如：
[Add Textbox] [Remove Textbox]
[TextBox1] [Link]
[TextBox2] [Link]
...
[TextBoxX] [Link]
当点击链接时，它会显示一个模态框，供用户选择模态框上提供的表格上的列表并将值返回到其行上的文本框。我创建了下面的代码，但它返回每个文本框的值。
请看下面的代码：
此 javascript 代码用于添加/删除文本框：
<script type="text/javascript">
//Add
$('#tblDetail tbody').on("click", "a", function() {
$("#products_modal_box").data("target", $(this).siblings("input"));
showProductsModalBox();
return false;
});
$(document).ready(function() {
$("#addRow").click(function() {
$('#tblDetail tbody>tr:last').clone(true).insertAfter('#tblDetail tbody>tr:last');
$('#tblDetail tbody>tr:last #field1').val('');
$('#txtTotalRow').val(tblDetail.rows.length - 1);
});
});
function removeRowFromTable() {
var tbl = document.getElementById('tblDetail');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
</script>
这是添加/删除文本框的表单，以及文本框本身：
<form id="form1" action="#" method="post">
<input type="button" id="addRow" value="ADD" />
<input type="button" id="removeRow" value="REMOVE" onclick="removeRowFromTable(); $('#txtTotalRow').val(tblDetail.rows.length - 1);"/>
<input type="hidden" name="txtTotalRow" id="txtTotalRow" value="1" />
<table cellpadding='0' cellspacing='0' border='0' id='tblDetail' width='100%'>
<tr>
<th colspan="3"> </th>
</tr>
<tr>
<td>
<input type="text" name="field1[]" id="ProductID" />
<a href="#" ><!-- removed - onclick="showProductsModalBox(); return false;" /-->
Choose
</a>
</td>
</tr>
</table>
</form>
模态框脚本引用this thread。注入链接的内联javascript将值传递给“field1”文本框，更改为：
<!-- Edited - <a href=\"javascript:;\" onclick=\"$('input[name=field1]').val('".$fetch[0]."');$('#products_modal_box').dialog('close')();\"> /-->
<a href=\"javascript:;\" onclick=\"$('#products_modal_box').data('target').val('".$fetch[0]."');$('#products_modal_box').dialog('close')();\">
该代码用于传递第一个文本框的值。但是，当我尝试添加一个文本框并从模式框中选择一个值时，该值被传递给每个文本框（第一个文本框和第二个文本框），依此类推。如何以不同方式传递每个文本框的值？谢谢。
--- 更新 1 ---
$('#tblDetail tbody').on("click", "a", function() {
console.log($(this)); // This should be the link you just clicked
console.log($(this).siblings("input")); // This should be the text box you want to save the value to
$("#products_modal_box").data("target", $(this).siblings("input"));
console.log($("#products_modal_box").data("target")); // To confirm it was saved correctly as data
showProductsModalBox();
return false;
});
用firebug检查控制台后，结果是：
[a#]
[]
[]
更新 2 - 实际问题
产品 ID 文本框的标记：
<table cellpadding="5px" id="tblDetail" class="tblDetail" width="100%">
<tr>
<th colspan="2" width="15%">Product ID</th>
<th>Problem</th>
</tr>
<tr>
<td><input type="text" name="productid[]" id="productid" size="7"/></td>
<td><a href="#">Choose</a></td> <!-- THE PROBLEM WAS HERE /-->
<td><input type="text" name="problem[]" id="problem" /></td>
</tr>
</table>
<input type="button" id="addRow" value="ADD" />
<input type="button" id="removeRow" value="REMOVE" onclick="removeRowFromTable();"/>
模态框的标记：
<div id="IDBarang_dialog" title="Ambil ID Barang" style="display: none;">
<div class="in">
<div class="grid-12-12">
<form ID="IDBarang_dialog_form" action="#" method="post">
<table>
<thead>
<tr>
<th> </th>
<th>Product</th>
</tr>
</thead>
<!-- Query for read mysql goes here (I skipped this line because it's not the main thing I'm gonna ask since it's run well) /-->
<tbody>
<?php
//read the results
while($fetch = mysqli_fetch_array($r)) {
print "<tr>";
print " <td><a href='#' onclick=\"$('#IDBarang_dialog').data('target').val('".$fetch[0]."');$('#IDBarang_dialog').dialog('close')();\">Choose</a></td>";
print " <td>" . $fetch[0] . "</td>"; //$fetch[0] == Product ID
print "</tr>";
}
?>
</tbody>
</table>
</form>
</div>
</div>
</div>
Javascript：
<script>
var grid_modal_options = {
height: 'auto',
width: '80%',
modal: true
};
function showIDBarangModalPopup() {
$("#IDBarang_dialog").dialog(grid_modal_options);
$("#IDBarang_dialog").parent().appendTo('form:first');
}
</script>
<script type="text/javascript">
//MODAL-BOX
$('#tblDetail tbody').on("click", "a", function() {
console.log($(this));
console.log($(this).siblings("input"));
$("#IDBarang_dialog").data("target", $(this).siblings("input"));
console.log($("#IDBarang_dialog").data("target"));
showIDBarangModalPopup();
return false;
});
//ADD ROW
$(document).ready(function() {
$("#addRow").click(function() {
$('#tblDetail tbody>tr:last').clone(true).insertAfter('#tblDetail tbody>tr:last');
$('#tblDetail tbody>tr:last #productid').val('');
$('#tblDetail tbody>tr:last #problem').val('');
return false;
});
});
//REMOVE ROW
function removeRowFromTable() {
var tbl = document.getElementById('tblDetail');
var lastRow = tbl.rows.length;
if (lastRow > 2) tbl.deleteRow(lastRow - 1);
}
【问题讨论】：
-
我不知道它是否与您的问题有关，但您的输入定义了
name和id的事实可能会造成麻烦。克隆一个具有id的元素后，您应该在将其插入 DOM 之前给克隆一个新的id，否则可能会发生坏事（虽然不确定是什么）。以你的选择器#tblDetail tbody>tr:last #field1为例，在你克隆它几次之后，将会有许多id 为#field1的输入。我建议删除名称和 ID，并改用类：<input type="text" class="myclass" />。
标签： php arrays textbox modal-dialog