Dynami c Добавлена ​​вставка строк с использованием Java Скрипт в MySql База данных с использованием PHP

Question

Я хочу добавить Мои динамические данные c строк в MySql Используя PHP. Dynami c Rows получает Add, используя Javascript, у меня нет большого опыта в JS. Пожалуйста, покажите мне, как это сделать. Когда я добавляю строки, он делает запись в Базе данных, но не показывает значения. Также, если я подсчитываю эхо, он дает 1 значение, так как я ввожу 3 значения за раз.

HTML КОД

<form id="wizard_with_validation" method="POST" action="TestPage.php">
<h3>Account Information</h3>
<div class="col-md-12">
<p>
<b>Product & Services</b> <span style="color:red">*</span>
</p>
<div class="form-group form-float">
<table class="table table-bordered table-hover wizard_with_validation" id="tab_logic">
<thead>
<tr>
<th>Sr. No. </th>
<th> Product / Services</th>
<th> Description</th>
<th> Local Markets(Region)</th>
<th> Export Markets(Region)</th>
</tr>
</thead>
<tbody>
<tr id='addr0'>
<td>1</td>
<td><input type="text" name='ProdServ[0]' id="ProdServ[0]"  placeholder='Product / Services' class="form-control" /></td>
<td><input type="text" name='Description[0]' id="Description[0]" placeholder='Description' class="form-control" /></td>
<td>
<select class="form-group form-control" name="LocMarkt[0]" id="LocMarkt[0]" class="form-control">
<option selected disabled> Select Region</option>
<option value="AJK0" class='form-control input-md'>Azad Jamu and Kashmir</option>
<option value="Balochistan0" class='form-control input-md'>Balochistan</option>
<option value="GB0" class='form-control input-md'>Gilgit-Baltistan</option>
 <option value="ICT0" class='form-control input-md'>Islamabad(ICT)</option>
<option value="KPK0" class='form-control input-md'>Khyber Pakhtunkhwa</option>
<option value="Punjab0" class='form-control input-md'>Punjab</option>
<option value="Sindh0" class='form-control input-md'>Sindh</option>
</select>
</td>
<td>
<select name="ExportMarket[0]" id="ExportMarket[0]" class='form-control show-tick form-group form-float'>
<option selected disabled>Select Region</option>
<option value="NorthAmerica0" class='form-control input-md'>North America</option>
<option value="LatinAmerica0" class='form-control input-md'>Latin America</option>
<option value="WesternEurope0" class='form-control input-md'>Western Europe</option>
<option value="Africa0" class='form-control input-md'>Africa</option>
<option value="MiddleEast0" class='form-control input-md'>Middle East</option>
<option value="Asia0" class='form-control input-md'>Asia</option>
</select>
</td>
</tr>

<tr id='addr1'></tr>
</tbody>
</table>
</div>
<a id="add_row" class="btn btn-default pull-left">Add Row</a><a id='delete_row' class="pull-right btn btn-default">Delete Row</a>
</div>
<button id="DynamicInfo" name="DynamicInfo" class="btn bg-teal waves-effect">
<i class="material-icons">save</i>
<span>SAVE</span>
</button>
</form>

МОЙ JS КОД

<!-- Product JS -->
<script type="text/javascript">
    $(document).ready(function () {
        var i = 1;
        $("#add_row").click(function () {
            $('#addr' + i).html("<td>" + (i + 1) + "</td><td><input name='ProdServ" + i + "' type='text' placeholder='Product / Services' class='form-control input-md'  /> </td><td><input  name='Description" + i + "' type='text' placeholder='Description'  class='form-control input-md'></td><td><select name='LocMrkt' " + i + " class='form-control show-tick form-group form-float'><option selected disabled class='form-control input-md'>Select Region</option><option value='AJK" + i + "' class='form-control input-md'>Azad Jamu and Kashmir</option><option value='Balochistan" + i + "' class='form-control input-md'>Balochistan</option><option value='GB" + i + "' class='form-control input-md'>Gilgit-Baltistan</option><option value='ICT" + i + "' class='form-control input-md'>Islamabad(ICT)</option><option value='KPK" + i + "' class='form-control input-md'>Khyber Pakhtunkhwa</option><option value='Punjab" + i + "' class='form-control input-md'>Punjab</option><option value='Sindh" + i + "' class='form-control input-md'>Sindh</option></select></td><td><select name='ExportMarket' " + i + " class='form-control show-tick form-group form-float'><option selected disabled>Select Region</option><option value='NorthAmerica" + i + "' class='form-control input-md'>North America</option><option value='LatinAmerica" + i + "' class='form-control input-md'>Latin America</option><option value='WesternEurope" + i + "' class='form-control input-md'>Western Europe</option><option value='Africa" + i + "' class='form-control input-md'>Africa</option><option value='MiddleEast" + i + "' class='form-control input-md'>Middle East</option><option value='Asia" + i + "' class='form-control input-md'>Asia</option></select></td>");

            $('#tab_logic').append('<tr id="addr' + (i + 1) + '"></tr>');
            i++;
        });
        $("#delete_row").click(function () {
            if (i > 1) {
                $("#addr" + (i - 1)).html('');
                i--;
            }
        });

    });
    </script>

И МОЙ PHP КОД

 $Product_Services = $_POST['ProdServ'];
    $countRows = count($Product_Services);
    echo $countRows;
    for($i = 0; $i == $countRows; $i ++)
    {
        echo $SQL = "INSERT INTO tbl_product_service (product_name1) VALUES ('$Product_Services[$i]')";
          $res = mysqli_query($conn, $SQL);

    }

Answer 1

Я добавляю пример кода на основе вашего сценария ios, надеюсь, это вам поможет. и вместо того, чтобы дать увеличенное имя вашего поля ввода, введите имя как

<a href="#" class="btn btn-primary" id="btnNewRow"> Add New Row </a>

<table class="table">
    <thead>
        <tr>

            <th>Field</th>
            <th>Delete Action</th>
        </tr>
    </thead>
    <tbody id="table-body">

    </tbody>
</table>


<script type="text/javascript">
    $(document).ready(function() {


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

            var tableRow = '<tr><td><input name="ProdServ[]" class="input"/></td><td> <button class="btn btn-danger" name="deleteRow[]"> Delete Row </button></td></tr>';
            $("#table-body").append(tableRow);
            return false;
        });
    });

    $(document).on('click', 'button[name^=deleteRow]', function() {
        $(this).parent().parent().remove();
        return false;
    });
</script>