CODEWITHSUNDEEP
phpjavascriptjquery
Tushar Kesarwani
Tushar Kesarwani

Reputation: 11

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

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>

Upvotes: 0

Views: 929

Answers (1)

John W
John W

Reputation: 1512

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);
});

Upvotes: 1

Related Questions