0

I'm working on a small HTML form integrated with a table. The table has an input field named "name" which have value from some variable $name and with other two input field (city and country) without any value.

This works well for the first row. However, when I dynamically add more rows, the new input fields don't display the value $name in new dynamic created row field. Here's my current code setup:

<html>
<body>
<table class="table table-bordered">
    <thead class="table-success" style="background-color: #3fbbc0;">
        <tr>                       
            <th width="15%"><center>Name</th>
            <th width="15%"><center>city</th>
            <th width="15%"><center>country</th>
            <th width="5%"></th>
                <button type="button" class="btn btn-sm btn-success" onclick="BtnAdd()">Add Item</button>                         
            </th>
        </tr>  
    </thead>    
    <tbody id="TBody">                  
   
        <tr id="TRow" class="d-none">
            <td>    
                <input type="text"  name="name[]" id="name" value = "<?php echo $name; ?>">
            </td>
            <td>
                <input type="text"  name="city[]" id="city" >
            </td>
            <td>
                <input type="text"  name="country[]" id="country" >
            </td>
            <td class="NoPrint">
                <button type="button" onclick="BtnDel(this)">x</button>
            </td>
        </tr>
    </tbody>
</table>

Script to add deynamic rows in table

<script type="text/javascript">

function GetPrint()
{
    /*For Print*/
    window.print();
}

function BtnAdd()
{
    /*Add Button*/
    var v = $("#TRow").clone().appendTo("#TBody") ;
    $(v).find("input").val('');
    $(v).find("input").autocomplete({
        source: 'backend-script.php'  
    });
    $(v).removeClass("d-none");
    $(v).find("th").first().html($('#TBody tr').length - 1);
}

function BtnDel(v)
{
    /*Delete Button*/
    $(v).parent().parent().remove(); 
    GetTotal();

    $("#TBody").find("tr").each(
        function(index) {
           $(this).find("th").first().html(index);
        }
    );
}
</script>
Umar
  • 7
  • 5
  • SO where is the `
    `
     – RiggsFolly Jul 30 '23 at 16:36
  • 1
    Won't you end up with duplicate ids/invalid html when you duplicate that table row? – brombeer Jul 30 '23 at 16:38
  • 1
    You are duplicating fields with the same id? `id="name"` ID's should be unique – RiggsFolly Jul 30 '23 at 16:38
  • Javascript does no have access to `` once you have finished the PHP process on the server – RiggsFolly Jul 30 '23 at 16:40
  • @RiggsFolly can u guide with example sir if possible for u – Umar Jul 30 '23 at 16:42
  • Umar, just remove this line `$(v).find("input").val('');` you have commanded to blank that (and the other fields). The computer is only that clever as the person programming it, only different for those rich kids that run the AI shop but they don't share the code with you. – hakre Jul 30 '23 at 20:02
  • And about what was commented about the ID: It should be unique, and you don't have it unique, but it's also HTML and old, stable browser tech, so not this issue. If you're looking for related Q&A, check this one: [How to clone and change id?](https://stackoverflow.com/q/10126395/367456) – hakre Jul 30 '23 at 20:05

0 Answers0