How can I get the values of multiple inputs by numbered ids and insert them into MySQL

Question

I tried to create a multi insert form where you can insert as many tiles and related languages as you want by filling in a number. The display of the Titles and language works fine, but I'm not able to get the different values and insert them into db. My aim is it that every Title with its Lang gets a unique ID in the db.

<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>

I also tried to get the value of the inputs via Jquery and send them with Jquery Ajax to the PHP file but I only get the output "undefined" when I tried to show the values in console

The insert.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);
 ?>

**Warning:** You are wide open to [SQL Injections](http://php.net/manual/en/security.database.sql-injection.php) and should really use parameterized **prepared statements** instead of manually building your queries. They are provided by [PDO](http://php.net/manual/en/pdo.prepared-statements.php) or by [MySQLi](http://php.net/manual/en/mysqli.quickstart.prepared-statements.php). Never trust any kind of input, especially that which comes from the client side. Even when your queries are executed only by trusted users, [you are still in risk of corrupting your data](http://bobby-tables.com/). — Dharman, Mar 11 '19 at 23:07

score -1 · Answer 1 · answered Mar 11 '19 at 23:07

You need to iterate over all #Title_<something> items:

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

See Wildcards in jQuery selectors and how to iterate a result of jquery selector

Stoufa · Answer 2 · 2019-03-11T23:31:28.773

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 side

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

don't forget to escape the values from post

You should use i variable to align title and lang in same row — Stoufa, Mar 11 '19 at 23:29
use serialize function in jquery to send data with ajax https://api.jquery.com/serialize/ — Stoufa, Mar 12 '19 at 00:00

How can I get the values of multiple inputs by numbered ids and insert them into MySQL

2 Answers2