Add multiple table rows when button clicked

Question

I am trying to load html file containing same table elements like my default table when I click on add more button. When I click Add more button it loads the file one time but don't work when I click the button second time. Here is my table section of default page :

<div class="form_container">
    <form method="POST" action="actionPage.php">
        <div class="table_container">
            <table border="2">
                <tr>
                    <tr>
                        <td><label>Sr.No :</label></td>
                        <td><input type = "number" class="SrNo" name="SrNo" value="1" readonly></td>
                        <td><label>Design number :</label></td>
                        <td><input type="text" class="designNo" name="designNumber"></td>
                    </tr>
                    <tr>                
                        <td><label>Fabric quality :</label></td>
                        <td><select name="fabricSelect">
                            <option value="Fabric1" name="fabric1">Fabric1</option>
                            <option value="Fabric2" name="fabric2">Fabric2</option>
                            <option value="Fabric3" name="fabric3">Fabric3</option>
                            <option value="Fabric4" name="fabric4">Fabric4</option>
                            </select>           
                        <td><label>Color matching :</label></td>
                        <td><input type="select" class="colorMatch" name="colorMatch"></td>
                    </tr>
                    <tr>
                        <td><label>Quantity :</label></td>
                        <td><input type="number" class="quantity" name="quantity"></td>
                        <td><label>Printing type :</label></td>
                        <td><select name="printSelect">
                            <option value="Print1">Print1</option>
                            <option value="Print2">Print2</option>
                            <option value="Print3">Print3</option>
                            <option value="Print4">Print4</option>
                            </select>
                        </td>           
                    </tr>
                    <tr>
                        <td ><label>Rate :</label></td>
                        <td colspan="2"><input type="number" name="rate"></td>
                    </tr>
                    <tr class="newForm">
                    </tr>
                </tr>
            </table>
            <input type="submit" id="submit_btn" class="class_btn">
        </div>
    </form>
    <button class="addButton">Add more tab</button>
</div>

This is my script :

<script>
    $(document).ready(function() {
        var flag = 0;
        $(".addButton").click(function(e) {
            if(flag != 5) {
                flag += 1;
                $(".newForm").load("addedForm.php");
            }
            else {
                e.preventDefault();
            }
        });
    })
</script>

And here is my other file that I want to load :

<tr>
<td><label>Sr.No :</label></td>
<td><input type = "number" class="SrNo" value="" readonly></td>

<td><label>Design Number:</label></td>
<td><input type="text" class="designNo"></td>

thetechnician94 · Accepted Answer · 2020-12-22 13:11:21Z

1

Is there any reason to load the file instead of cloning the element you need, especially since it already appears in your DOM? This is, in my opinion, cleaner and easier to manage.

I think this code below should do the same thing without having to load another file (which I had Cross origin issues with)

EDIT Now clones entire table instead of just one row. Be careful with the names of inputs, since they are cloned too.

<script src="https://code.jquery.com/jquery-3.5.1.min.js" integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0=" crossorigin="anonymous"></script>

<div class="form_container">
    <form method="POST" action="actionPage.php">
        <div class="table_container">
            <table id="clone" border="2">
                <tr>
                    <tr >
                        <td><label>Sr.No :</label></td>
                        <td><input type = "number" class="SrNo" name="SrNo" value="1" readonly></td>
                        <td><label>Design number :</label></td>
                        <td><input type="text" class="designNo" name="designNumber"></td>
                    </tr>
                    <tr>                
                        <td><label>Fabric quality :</label></td>
                        <td><select name="fabricSelect">
                            <option value="Fabric1" name="fabric1">Fabric1</option>
                            <option value="Fabric2" name="fabric2">Fabric2</option>
                            <option value="Fabric3" name="fabric3">Fabric3</option>
                            <option value="Fabric4" name="fabric4">Fabric4</option>
                            </select>           
                        <td><label>Color matching :</label></td>
                        <td><input type="select" class="colorMatch" name="colorMatch"></td>
                    </tr>
                    <tr>
                        <td><label>Quantity :</label></td>
                        <td><input type="number" class="quantity" name="quantity"></td>
                        <td><label>Printing type :</label></td>
                        <td><select name="printSelect">
                            <option value="Print1">Print1</option>
                            <option value="Print2">Print2</option>
                            <option value="Print3">Print3</option>
                            <option value="Print4">Print4</option>
                            </select>
                        </td>           
                    </tr>
                    <tr>
                        <td ><label>Rate :</label></td>
                        <td colspan="2"><input type="number" name="rate"></td>
                    </tr>
                    <tr class="newForm">
                    </tr>
                </tr>
            </table>
            
        </div>
        <input type="submit" id="submit_btn" class="class_btn">
    </form>
    <button class="addButton">Add more tab</button>
</div>

<script>
    $(document).ready(function() {
        var flag = 0;
        $(".addButton").click(function(e) {
            if(flag != 5) {
                flag += 1;
                var clone = $("#clone").clone();
                clone.find("input[name=SrNo]").val(flag+1);
                clone.appendTo($(".table_container"));
            }
            else {
                e.preventDefault();
            }
        });
    })
</script>

edited Dec 22, 2020 at 13:11

answered Dec 21, 2020 at 20:07

thetechnician94

5533 silver badges22 bronze badges

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

6 Comments

thetechnician94 Over a year ago

Ahh, I see that the "Sr. No" value is blank. I'll update my answer. You could have the value increment by one, but I really don't know your use case.

Neeraj Chimwal Over a year ago

I also realised tthat loading file wont work here So I appended the elements instead as I didn't knew about cloning. Your method is really great if we want to save time in typing all elements again. And about SrNo, I want to auto increment it when new table is added. I did that. Now I will try to clone whole table using you method. Thankyou very much

Neeraj Chimwal Over a year ago

I have one question here. What does clone.find("input[name=SrNo]").val(""); do here?

thetechnician94 Over a year ago

@NeerajChimwal clone.find("input[name=SrNo]").val("") looks in the cloned element for the SRNo input and sets its value to nothing. I'll update my answer to show cloning the whole table, but essentially all you have to do is change the id's around so that the proper elements are being referenced

thetechnician94 Over a year ago

@NeerajChimwal I also updated the code to increment the value of the SrNo field for you too. Maybe it will make more sense

|

Collectives™ on Stack Overflow

Add multiple table rows when button clicked

1 Answer 1

6 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Related