Как я могу получить значения нескольких входов по пронумерованным идентификаторам и вставить их в MySQL

Question

Я попытался создать форму с несколькими вставками, где вы можете вставить столько плиток и связанных языков, сколько хотите, заполнив число. Отображение заголовков и языка работает нормально, но я не могу получить разные значения и вставить их в БД. Моя цель состоит в том, чтобы каждый заголовок с его Lang получил уникальный идентификатор в БД.

<form method="POST" action="" enctype="multipart/form-data">
 <table>
     <tr>
         <th>Title</th>
         <th>Language</th>
     </tr>
 </table>
 <input id="count" type="number" placeholder="Number of Titles">
 <input type="button" id="plus" value="+">
 <input type="submit" id="save" name="save" value="Save">
 <script type="text/javascript">
       $('#plus').on('click', function(){
            var queryString = "";
            var count = $('#count').val();
            var i;
            for(i = 1; i <= count; i++){
                 $('table').append('<tr><td><input name="title" type="text" placeholder="Title" id="Title_'+i+'" autocomplete="off" class="title"></td><td><select name="lang" id="Lang_'+i+'"><option value="0">Romaji</option><option value="ja">Japanese</option><option value="en">English</option><option value="de">German</option><option value="ru">Russian</option></select></td></tr>');
            }
       });
       $('#save').on('click', function(){
        var Title = $('#Title_'+i).val();
        console.log(Title);
        queryString ='title='+Title+'&lang='+Lang;

        jQuery.ajax({
            url: "action/insert.php",
            data: queryString,
            type: "POST",
            success:function(data){
                 location.reload();
            },
        });
       });  
     </script>
</form>

Я также попытался получить значение входных данных через Jquery и отправить их с Jquery Ajax в файл PHP, но я получил вывод "undefined", только когда попытался показать значения в консоли

Вставка .php

<?php
require "../config.php";
$title= $_POST['title'];
$lang= $_POST["lang"];

    $sql = "INSERT INTO MyGuests (title, lang) VALUES ('".$_POST['']."', '".$_POST['']."');";
    $sql .= "INSERT INTO MyGuests (title, lang) VALUES ('".$_POST['']."', '".$_POST['']."');";
    $sql .= "INSERT INTO MyGuests (title, lang) VALUES ('".$_POST['']."', '".$_POST['']."')";
    ...

    mysqli_multi_query($conn, $sql);
 ?>

Answer 1

Javascript

<script type="text/javascript">
$(document).ready(function(){
  var input = '<input type="text" placeholder="Title" autocomplete="off" class="title">';
  var select = '<select><option value="0">Romaji</option><option value="ja">Japanese</option><option value="en">English</option><option value="de">German</option><option value="ru">Russian</option></select>';

  var i = 1;
  $('#plus').on('click', function(){
    var tr = $('tr');
    var td1 = $('td');
    var td2 = $('td');
    td1.append($(input).attr('name', 'myguest['+i+'][title]').attr('id','Title_'+i));
    td2.append($(select).attr('name', 'myguest['+i+'][lang]').attr('id','Lang_'+i));
    tr.append(td1).append(td2);
    $('table').append(tr);
    i++;
  });

});
</script>

PHP сторона

<?php
foreach($_POST['myguest'] as $guest) {
  $sql = "INSERT INTO MyGuests (title, lang) VALUES ('".$guest['title']."', '".$_POST['lang']."');";
  mysqli_query($conn, $sql);
}

не забудьте экранировать значения из поста

Answer 2

Вам нужно перебрать все элементы #Title_<something>:

var titles = $('[id^=Title_]');
titles.each(function() {
    console.log(this.val()); 
    // do other things
});

См. Подстановочные знаки в селекторах jQuery и , как перебрать результат селектора jquery