Adding rows in php using js?

[shruti]

Below is the code where I have a checkbox, on click of which the Name and Age field appears. Now when I click on “+ Insert row” for the second time then multiple rows are getting added than one at a time.

Please help me know where I am going wrong. Any help would be appreciated. Thanks in advance

<div align="left">
        <input type="checkbox" name="hlt" value="hlt"> Home Leave Travel</input>
    </div>
    
    <div class="col-md-4" data-box="box" style="display: none;" id="hlt">
        <br>
        Name: <input type="text" name="name" class="form-control"/><br>
        <br>
        Age: <input type="number" name="age" class="form-control" min="1" max="100"><br>
        <p id="addnew" >
	        <a href="javascript:void(0)" class="addlinks" onclick="addhlt()"> + Insert Row </a>
	    </p>

    </div>


function addhlt() 
{  
    //jsTravelDet
    $("#hlt").clone().attr('id', function(_, id) { return id + hltRowCount }).find("input, select").each(function() {   
        $(this).val('').attr('id', function(_, id) { return id + hltRowCount });
        $(this).find("option:first").attr("selected", true);
    }).end().appendTo("#hlt");
    hltRowCount++; 
}

[astonecipher]

I’m not sure what you are trying to do…

Are you just trying to add a row to an html table? Then PHP isn’t involved at all.

[shruti]

I’m trying to insert and delete rows. I have 2 fields i.e., Name and Age. So, I need to have a button (or something) to add/delete fields for Name and Age.
The flow is as follows:

1. I have a checkbox, if checked then 2 fields namely Age and Name should be created. (which is done shown in above code).
2. The fields Name and Age are created and now I need to have an option/button where I can add/ delete the fields Name and Age.

[shruti]

As of now I am able to add rows i.e., Name and Age fields but whenever I click the option Insert Row fro the second time, multiple rows are getting added and if I click option Delete Row then entire row is getting deleted even the parent row.

[astonecipher]

So, do you want to prevent duplicate rows from being added? You add a constraint for that based on composite columns.

You shouldn’t actually delete a record. You should do what is called a soft delete, that means adding a flag column to the database and filter on it.

Member
    id int not null auto_increment primary key,
    first_name varchar(20),
    last_name varcahr(30),
    date_added timestamp default now(),
    date_removed datetime null,
    removed_by varchar(20) // or int for a user record

[shruti]

I have done already the way you have told me and regarding deleting the record, I am not actually deleting record from db nor I want to delete that record. What I am asking is, whenever I click on Insert row option for the second time multiple rows are getting added.
I will attach below the js and code that I have written so far. Guide me where have I gone wrong.

[shruti]

Please have a look at it and guide me where am I going wrong.

[astonecipher]

One issue is, posting an image of code rather than the code…

Look at the ajax function. What triggers it? Are empty records being created?

[shruti]

sorry for uploading image but I was unable to insert code that is why i had to do so.
No empty records aren’t being created.

[astonecipher]

What I am seeing, I don’t see how you are getting data to the processing script, nothing is passed in the ajax call. So, is this actually being submitted instead?

[shruti]

<?php
include 'config.php';
if(isset($_POST['submit'])){
$name = $_POST['name'];
$age = $_POST['age'];
$sql = mysqli_query($conn, "INSERT INTO travellers(name, age) VALUES('$name', '$age')");
if($sql){
	echo "data inserted successfully";
}
else{
	echo "error";
}
}

Sql query to insert the data on submit of entire form. The above js code is to insert row

[shruti]

In the above image as you can see, if the checkbox is checked then 2 fields are created namely Name and Age. I am able to insert the data into db but what I need is whenever I click on Insert Row/Delete Row, the 2 fields i.e., Name and Age must be created/deleted.

As of now I am able to insert row but when i click on Insert row for the second time, multiple rows are getting inserted as shown in another img.

[astonecipher]

Okay, you have a design problem as well. When you click the create or delete, it shouldn’t be generating a new form, it should be taking the values and doing the processing, then clearing the form and wait for a new submission…

Though, it should store them and wait until the entire group is stored, then send the entire group in.

[shruti]

Can you help me with that, like how shall i do it? What changes can I make in the existing code.

[astonecipher]

Everything is a design choice, there aren’t inherently bad choices.

I would do a form with a button to add a new person, or make it simpler than that and do a selection box before you get to that point with, how many adults? how many children? Then populate for those amounts in the html.

From that point it is just iterating thru the values to insert them into that database.

[shruti]

Thank you for giving such a simple idea. I will try it.