How To Input Data from dynamic number of fields in html form

Question

this code is to create dynamic number of fields and to send data.. this is doing it's work... but then i try to back.php(where form sends the data ) i don't know hoe to get the exact number of rows... id = 0_1 .... 3_1 there are many options.. but what is the exact number to counting to make a loop... please help me on this asap ...

<html>
    <head>
        <title>Infinite Form Rows</title>
        <script 
            type="text/javascript" 
            src="http://cachefile.net/scripts/jquery/1.2.3/jquery-1.2.3.min.js">
        </script>
        <script type="text/javascript">
        $(function(){

            var newRowNum = 0;


            $('#addnew').click(function(){

                newRowNum += 1;


                var addRow = $(this).parent().parent();

                var newRow = addRow.clone();


                $('input', addRow).val('');


                $('td:first-child', newRow).html(newRowNum);



                $('input', newRow).each(function(i){
                    var newID = newRowNum + '_' + i;
                    $(this).attr('id',newID).attr('name',newID);
                });


                addRow.before(newRow);


                $('a.remove', newRow).click(function(){
                    $(this).parent().parent().remove();
                    return false;               
                });


                return false;
            });
        });
        </script>
    </head>
    <body>
        <form action="back.php" method="get"   >
            <table id="tabdata">
                <thead>
                    <tr>
                        <th>Row</th>
                        <th>Cell 1</th>
                        <th>Cell 2</th>
                        <th>Cell 3</th>
                        <th></th>
                    </tr>
                </thead>
                <tbody>
                    <tr>
                        <td><a id="addnew" href="">Add</a></td>
                        <td><input id="n0_1" name="n0_1" type="text" /></td>
                        <td><input id="n0_2" name="n0_2" type="text" /></td>
                        <td><input id="n0_3" name="n0_3" type="text" /></td>

                        <td></td>
                    </tr>
                    <tr>

                    </tr>
                </tbody>
            </table>

            <input id="go" name="go" type="submit" value=" Save " />
        </form>
    </body>
</html>

The above code sends data to a back.php page .. my question is how do i recieve data in that page .. if i know the number of inputs cmming then i can get it via loop. but i don't know the number of inputs cmming... it is dynamic — Tushar Kesarwani
– Tushar Kesarwani, Commented Mar 30, 2012 at 22:42

John W · Accepted Answer · 2012-03-30 22:47:30Z

1

You can maintain a hidden input that contains the current number of rows. Set the value on the click event handler for #go.

$('#go').click(function() {
    var numRows =$('#tabdata tbody tr').length;
    $('#myHiddenInput').val(numRows);
});

answered Mar 30, 2012 at 22:47

John W

1,5222 gold badges14 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Tushar Kesarwani Over a year ago

Well This code works perfectly fine for input fields. But not i am having 1 <select> option also in between.. how to modify it for that please tell

Collectives™ on Stack Overflow

How To Input Data from dynamic number of fields in html form

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related