简体   繁体   中英

Setting Values of textboxes that were created using Javascript

I had a form in which I made some textboxes using javascript. Basically I gave a button and Onclick of that button I add a Textbox using Javascript. These values were then taken in a string on the server side and stored in different List columns.

Now I want to create Edit Functionality. So I have to retrieve values from the List COlumns and Insert it in the Textboxes. This was easy when my controls were server controls but How can I do this for textboxes that were created using Javascript.

I am new to client side scripting. Any help will be appreciated.

All I need is a way to get the values from the List COlumn and then create those textboxes again with those values.

PS: Please advise if you wana see the code for how I have created the textboxes and got those values on the server side. Thanks!

Javascript Code to create Textboxes:

<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>

Code Behind to Get these values on the server side and storing in List COlumns

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;

while retrieving data from list column you must have a map of the data for which you want to create an edit functionality. for eg suppose you have the data

listcolumn = {'data1': 123, 'data2': 234, 'data3': 345}

so just you can loop into that data and create the textboxes with its value in it.

for(key in listcolumn){ create a textbox and its value from listcolumn[key] (this will give you the value for that particular textbox) }

or if are not comfortable with the dictionary thing you can use the either way ie data is list form

listcolumn = [123,234,345]

for(data in listcolumn){ create a textbox and insert value in it. }

but i would be preffered that you use JSON format from server side to front end and you can parse the data using JSON.parse(data). And will get the dictionary as an object.

我建议使用不同的体系结构:基因敲除.js(用于客户端程序),您可以在其中开发MVVM,MVC(作为应用程序类型),Ajax,以将查询发送到服务器端以进行操作(如加载,保存,等等

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM