Bdtjtk

this is the html table generated based on an input by the user. I'm trying to get the values from the inputs but no luck. I even added runat="server" tag on them but nothing

$(function () {

$("[id*=txtNumComponentes]").keyup(function () {



    $('#tblComponentesContainer').empty();

    var txt = $("[id*=txtNumComponentes]").val();

    debugger

    if (txt != "" || txt != 0) {

        var table = '<table id="tblComponentes" class="table table-bordered text-center mx-auto" style="width: 80%; background: #d9deed73; min-width:700px; border: 2px solid #212529;">' +

                                '<caption>Lista de componentes</caption>' +

                                '<thead class="thead-dark">' +

                                    '<tr>' +

                                        '<th scope="col" style="width:10px;">#</th>' +

                                        '<th scope="col" style="width:100px;">Componente *</th>' +

                                        '<th scope="col" style="width:100px;">Base *</th>' +

                                        '<th scope="col" style="width:175px;">Comprimento *</th>' +

                                    '</tr>' +

                                '</thead>' +

                                '<tbody>';







        for (var i = 0; i < txt; i++) {

            table += '<tr>' +

                         '<th scope="row">' + (i + 1) + '</th>' +

                         '<td><input type="text" runat="server" class="form-control form-control-sm rounded border border-dark" id="txtComponente' + (i + 1) + '" placeholder="Componente" style="width:200px;" /></td>' +

                         '<td><input type="text" runat="server" class="form-control form-control-sm rounded border border-dark" id="txtBase' + (i + 1) + '" placeholder="Base"  style="width:200px;" /></td>' +

                         '<td>' +

                            '<div class="input-group input-group-sm">' +

                                '<input type="text" runat="server" class="form-control form-control-sm rounded border border-dark" id="txtComprimento' + (i + 1) + '" placeholder="Comprimento"  style="width:50px;" />' +

                                '<div class="input-group-append">' +

                                    '<span class="input-group-text border border-dark text-dark"><strong>mm</strong></span>' +

                                '</div>' +

                            '</div>'

                         '</td>' +

                     '</tr>';

        }



        table += '</tbody>' +

                 '</table>';



        $('#tblComponentesContainer').html(table);

    }

    else

    {

        ('#tblComponentesContainer').html();

    }

})

});

here's what i have tested so far on codebehind and it returns null..

 protected void btnCriarArtigo_Click(object sender, EventArgs e)

    {

        if(Page.IsValid)

        {

            string n = Request.Form["txtComponente1"];



        }

        else

        {



        }

    }

I have done something similar but it was all on server side using a repeater but I wanted to do it on client side cause it's faster to generate the fields. I have addded method="POST" to my form on masterpage too but didn't help

EDIT:

I also added name attribute but still getting null value

string n = Request.Form["Componente1"];

            string a = Request.Form["Base1"];

            string b = Request.Form["Comprimento1"];

I just added name like this to each input

name="Base' + (i + 1) + '"

Also i tried to get the input values with javascript and they do appear in there, even inside the form so it's weird why it doesn't happen on codebehind... Maybe i have to access the form through ID or something?

EDIT2:

Here's another update, I tried to create a panel around the DIV where the table with the input fields is generated. So while it doesn't detect the input fields on the control list, it detects the table tags only. I think I have to access them through the table somehow

I managed to solve the problem but it took a bit to figure out what was the cause. Apparently you need a container that you can render on the server side, like an asp net table already declared on the page and that's what I did rather than generate a html table with an ID which i don't think it's possible to detect and access the inside in code behind...

So if anyone is trying to get dynamic input inside a table like me, this is the way to go.

<asp:Table  ID="tblComponentes" runat="server" Caption="Tabela de Componentes" 

    Width="60%" CssClass="mx-auto componentes-table-invisible 

    ComponentesContainer table table-bordered text-center" 

    BorderColor="#212529" BorderWidth="2" BorderStyle="Solid" BackColor="#eaecf1" Style="min-width:700px;">



    <asp:TableHeaderRow runat="server" CssClass="thead-dark" TableSection="TableHeader">

        <asp:TableHeaderCell Scope="Column" Width="5%" runat="server">#</asp:TableHeaderCell>

        <asp:TableHeaderCell Scope="Column" Width="25%" runat="server">Componente *</asp:TableHeaderCell>

        <asp:TableHeaderCell Scope="Column" Width="25%" runat="server">Base *</asp:TableHeaderCell>

        <asp:TableHeaderCell Scope="Column" Width="20%" runat="server">Comprimento *</asp:TableHeaderCell>

    </asp:TableHeaderRow>

     <asp:TableRow TableSection="TableBody" runat="server">

         // Dynamic content goes here

     </asp:TableRow>



</asp:Table>

Here is the changed javascript file to generate the table rows and cells with input fields

$(function () {



$("[id*=txtNumComponentes]").keyup(function () {



    debugger

    var ComponentesTable = $('.ComponentesContainer');



    $('.ComponentesContainer > tbody').empty();

    var txt = $("[id*=txtNumComponentes]").val();



    if (txt != "" || txt != 0) {



        ComponentesTable.removeClass('componentes-table-invisible');

        var table;



        for (var i = 0; i < txt; i++) {

            table += '<tr>' +

                         '<td >' + (i + 1) + '</td>' +

                         '<td><input type="text" runat="server" name="Componente' + (i + 1) + '" class="form-control form-control-sm rounded border border-dark" id="txtComponente' + (i + 1) + '" placeholder="Componente"/></td>' +

                         '<td><input type="text" runat="server" name="Base' + (i + 1) + '" class="form-control form-control-sm rounded border border-dark" id="txtBase' + (i + 1) + '" placeholder="Base" /></td>' +

                         '<td>' +

                            '<div class="input-group input-group-sm">' +

                                '<input type="text" runat="server" name="Comprimento' + (i + 1) + '" class="form-control form-control-sm rounded border border-dark" id="txtComprimento' + (i + 1) + '" placeholder="Comprimento" />' +

                                '<div class="input-group-append">' +

                                    '<span class="input-group-text border border-dark text-dark"><strong>mm</strong></span>' +

                                '</div>' +

                            '</div>' +

                         '</td>' +

                     '</tr>';

        }



        $('.ComponentesContainer > tbody').append(table);

    }

    else {

        ComponentesTable.addClass('componentes-table-invisible');

    }

})

});

It's important to use the table and point to it's tbody as the jquery selector to inject the html cause doing it directly on the TableBody section will just add a row inside a row.

And now I can get the values of these

string n = Request.Form["Componente1"];

string a = Request.Form["Base1"];

string b = Request.Form["Comprimento1"];

Also if table has no data it will show the header, so just make a class with display:none and add to it and remove it with Jquery when there's input on the table generator field