how to send data to the server from dynamically created html controls

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • balurajeev
    New Member
    • Oct 2007
    • 7
    #1

    how to send data to the server from dynamically created html controls

    Hii,

    currently i am working on an apliction(ASP.N ET/C#) that creates dynamic html rows which contain six html text boxes and a html dropdowllist. At the time of page load the web page contain six server side text boxes and a serverside drop down list. and a html "Addrow" buton which create client side textboxes and dropdown list dynamichally Now i am meeting a problem of passing values from dynamichally created html controls to Server Side
    Very Urgent
    please help me
    code follows

    [HTML]<html xmlns="http://www.w3.org/1999/xhtml" >
    <head runat="server">
    <title>Untitl ed Page</title>
    <script type="text/javascript" language="javas cript">


    var ar=new Array();
    var ar2=new Array();
    var len;
    function LoadDdl()
    {
    debugger;
    if(document.get ElementById('Se lect1')!=null)
    {
    len=document.ge tElementById('S elect1').option s.length;

    for(i=0;i<len;i ++)
    {

    ar[i]=document.getEl ementById('Sele ct1').options[i].innerHTML;
    ar2[i]=document.getEl ementById('Sele ct1').options[i].value;
    }
    }
    }

    function addRow()
    {
    var ni = document.getEle mentById('trCon tent');
    var numi = document.getEle mentById('theVa lue');
    var num = (document.getEl ementById('theV alue').value -1)+ 2;
    numi.value = num;
    //add a row to the rows collection and get a reference to the newly added row
    var newRow = document.all("t blGrid").insert Row();

    //add 7 cells (<td>) to the new row and set the innerHTML to contain text boxes

    var oCell = newRow.insertCe ll();
    oCell.innerHTML = "<input type='text' id="+"slno"+num +" name='t1' style='width: 72px'>";


    oCell = newRow.insertCe ll();
    //oCell.innerHTML = "<input type='text' name='t2' style='width: 72px'>";
    //oCell.innerHTML = "<select id='ddl' name='t2' style='width: 72px'>";
    var selecttg="<sele ct id="+"ddl"+num+ "' style='width:72 px'>";
    var optiontg="";
    for(i=0;i<len;i ++)
    {

    //var sel=document.ge tElementById('d dl');
    var optiontg =optiontg+"<opt ion value="+ar2[i].toString()+">" +ar[i].toString()+"</option>";

    }
    var fullbotle=selec ttg+optiontg;
    oCell.innerHTML =fullbotle+"</select>";
    //oCell.innerHTML ="</select>";
    oCell = newRow.insertCe ll();
    oCell.innerHTML = "<input type='text' id="+"number"+n um+" name='t3' style='width: 72px'>" ;
    oCell = newRow.insertCe ll();
    oCell.innerHTML = "<input type='text' id="+"qty"+num+ " name='t4' style='width: 72px'>";

    oCell = newRow.insertCe ll();
    oCell.innerHTML = "<input type='text' id="+"rate"+num +" name='t5' style='width: 72px'>";

    oCell = newRow.insertCe ll();
    oCell.innerHTML = "<input type='text' id="+"discount" +num+" name='t6' style='width: 72px'>";
    oCell = newRow.insertCe ll();
    oCell.innerHTML = "<input type='text' id="+"Amount"+n um+" name='t7' style='width: 72px'>";
    oCell = newRow.insertCe ll();
    oCell.innerHTML = "<input type='button' value='Delete' onclick='remove Row(this);'/>";
    }

    //deletes the specified row from the table
    function removeRow(src)
    {
    /* src refers to the input button that was clicked.
    to get a reference to the containing <tr> element,
    get the parent of the parent (in this case case <tr>)
    */
    var oRow = src.parentEleme nt.parentElemen t;

    //once the row reference is obtained, delete it passing in its rowIndex
    document.all("t blGrid").delete Row(oRow.rowInd ex);
    }
    </script>
    </head>
    <body onmouseover="Lo adDdl()">
    <input type="hidden" value="0" id="theValue" />
    <form id="form1" runat="server">
    <div>
    <table id="tblGrid" style="table-layout:fixed" runat="server">
    <tr>
    <td >
    SLNo</td>
    <td >
    Item</td>
    <td >
    Number</td>
    <td >
    Quantity</td>
    <td >
    Rate</td>
    <td >
    Discount</td>
    <td>
    Amount</td>
    </tr>
    <tr id="trContent" >
    <td >
    <input id="Text1" type="text" runat="server" style="width: 84px" /></td>
    <td >
    <select id="Select1" runat="server" style="width: 102px"></select></td>
    <td >
    <input id="Text3" type="text" runat="server" style="width: 72px" /></td>
    <td >
    <input id="Text4" type="text" runat="server" style="width: 66px" /></td>
    <td >
    <input id="Text5" type="text" runat="server" style="width: 66px" /></td>
    <td >
    <input id="Text6" type="text" runat="server" style="width: 66px" /></td>
    <td>
    <input id="Text7" type="text" runat="server" style="width: 72px" /></td> <td ><input type="button" value="Delete" onclick="remove Row(this);" /></td>
    </tr>

    </table>
    <hr/>
    <input type="button" value="Add Row" onclick="addRow ();" />
    <asp:Button ID="Button1" runat="server" OnClick="Button 1_Click" Text="Save" /></div>
    </form>
    </body>
    </html>
    [/HTML]
    Thanking you and regards
    Balu
    Last edited by gits; Apr 2 '08, 05:43 PM. Reason: added code tags
    Tags: None
    • acoder
      Recognized Expert MVP
      • Nov 2006
      • 16032
      #2
      As long as you've named your elements and appended them within the form, the values should be submitted when you submit the form.

        Comment

        • balurajeev
          New Member
          • Oct 2007
          • 7
          #3
          can u pls give an example using dynamic contol

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              Does none of the data from the dynamically created elements get sent when the form is submitted or only some of the data?

                Comment

                Previous template Next
                Working...