设置 使用 Javascript 创建的文本框的值
本文关键字:文本 创建 使用 Javascript 设置 | 更新日期: 2023-09-27 18:32:47
我有一个表单,我用javascript制作了一些文本框。基本上,我给出了一个按钮,然后单击该按钮时,我使用Javascript添加一个文本框。然后,这些值在服务器端以字符串形式获取,并存储在不同的 List 列中。
现在我想创建编辑功能。所以我必须从列表中检索值并将其插入文本框中。当我的控件是服务器控件时,这很容易,但是我如何为使用 Javascript 创建的文本框执行此操作。
我是客户端脚本的新手。任何帮助将不胜感激。
我所需要的只是一种方法来从列表 COlumn 中获取值,然后使用这些值再次创建这些文本框。
PS:如果您想看到我如何创建文本框并在服务器端获取这些值的代码,请告知。谢谢!
用于创建文本框的 Javascript 代码:
<script type="text/javascript">
function GetDynamicTextBoxB(value)
{ return '<input name = "DynamicTextBoxB" type="text" value = "' + value + '" />' + '<input type="button" value="Remove" onclick = "RemoveTextBoxB(this)" />' }
var y = 0;
function AddTextBoxB() {
if (y < 10) {
var div = document.createElement('DIV'); div.innerHTML = GetDynamicTextBoxB(""); document.getElementById("TextBoxContainerB").appendChild(div);
}
else {
alert("Only 10 CSPs can be added")
} y++
}
function RemoveTextBoxB(div)
{ document.getElementById("TextBoxContainerB").removeChild(div.parentNode); }
function RecreateDynamicTextboxesB() {
var values = eval('<%#Values%>');
if (values != null) {
var html = ""; for (var i = 0; i < values.length; i++)
{ html += "<div>" + GetDynamicTextBoxB(values[i]) + "</div>"; } document.getElementById("TextBoxContainerB").innerHTML = html;
}
}
$("#tabs-1").ready(RecreateDynamicTextboxesB);
// // window.onload = RecreateDynamicTextboxesB;
</script>
用于在服务器端获取这些值并存储在列表变量中的代码隐藏
string PartyACSP1 = string.Empty, PartyACSP2 = string.Empty, PartyACSP3 = string.Empty, PartyACSP4 = string.Empty, PartyACSP5 = string.Empty, PartyACSP6 = string.Empty, PartyACSP7 = string.Empty, PartyACSP8 = string.Empty, PartyACSP9 = string.Empty, PartyACSP10 = string.Empty;
if (textboxValues != null)
{
PartyACSP1 = safeGetString(textboxValues, 0);
PartyACSP2 = safeGetString(textboxValues, 1);
PartyACSP3 = safeGetString(textboxValues, 2);
PartyACSP4 = safeGetString(textboxValues, 3);
PartyACSP5 = safeGetString(textboxValues, 4);
PartyACSP6 = safeGetString(textboxValues, 5);
PartyACSP7 = safeGetString(textboxValues, 6);
PartyACSP8 = safeGetString(textboxValues, 7);
PartyACSP9 = safeGetString(textboxValues, 8);
PartyACSP10 = safeGetString(textboxValues, 9);
}
newISDAAgreement[Constants.PartyACSPColumn] = PartyACSP1;
newISDAAgreement[Constants.PartyACSP2Column] = PartyACSP2;
newISDAAgreement[Constants.PartyACSP3Column] = PartyACSP3;
newISDAAgreement[Constants.PartyACSP4Column] = PartyACSP4;
newISDAAgreement[Constants.PartyACSP5Column] = PartyACSP5;
newISDAAgreement[Constants.PartyACSP6Column] = PartyACSP6;
newISDAAgreement[Constants.PartyACSP7Column] = PartyACSP7;
newISDAAgreement[Constants.PartyACSP8Column] = PartyACSP8;
newISDAAgreement[Constants.PartyACSP9Column] = PartyACSP9;
newISDAAgreement[Constants.PartyACSP10Column] = PartyACSP10;
从列表列检索数据时,您必须具有要为其创建编辑功能的数据映射。 例如假设您有数据
列表列 = {'data1': 123, 'data2': 234, 'data3': 345}
因此,您可以循环访问该数据并创建包含其值的文本框。
for(在列表列中键({从列表列[键]创建一个文本框及其值(这将为您提供该特定文本框的值(}
或者如果对字典的事情不满意 您可以使用任一方式,即数据是列表形式
列表列 = [123,234,345]
for(数据在列表列中({ 创建一个文本框并在其中插入值。}
但我更喜欢你从服务器端到前端使用 JSON 格式你可以使用 JSON.parse(data( 解析数据。并将字典作为对象获取。
我建议使用不同的架构:淘汰赛.js - 对于客户端 sisde,您可以在其中开发 MVVM,MVC - 作为应用类型,Ajax 将查询发送到服务器端以进行加载、保存等操作。