Вставка данных в базу данных с динамическими полями

Question

Я работаю с динамическими текстовыми полями.

Я хочу добавить данные, введенные в текстовые поля, в мою базу данных.

Моя разметка:

<form name="reaction" id="reaction" method="post" action="./send.php">
    <input type="text" name="number[]" id="number1" value="15" placeholder="Number 1" /> <br />
    <input type="text" name="name[]" id="name1" value="aaaa" placeholder="Name 1" /> <br />
    <input type="text" name="price[]" id="price1" value="10" placeholder="Price 1" /> <br />
    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script>
        $(document).on('click', '#add_row', function(){
            count++;
            $('#total_item').val(count);
            var html_code = '';
            html_code += '<input type="text" placeholder="Number '+count+'" name="number[]" id="number'+count+'" data-srno="'+count+'" /><br />';
            html_code += '<input type="text" placeholder="Name '+count+'" name="name[]" id="name'+count+'" data-srno="'+count+'" /><br />';
            html_code += '<input type="text" placeholder="Price '+count+'" name="price[]" id="price'+count+'" data-srno="'+count+'" /><br />';
            html_code += '<button type="button" name="remove_row" id="'+count+'" class="btn btn-danger btn-xs remove_row">X</button><br />';
        });
    </script>
    <button type="submit" class="btn btn-primary" name="send">Save</button>
</form>

Что приводит к следующему фрагменту документа:

<form name="reaction" id="reaction" method="post" action="./send.php">
    <input type="text" name="number[]" id="number1" value="15" placeholder="Number 1" /> <br />
    <input type="text" name="name[]" id="name1" value="aaaa" placeholder="Name 1" /> <br />
    <input type="text" name="price[]" id="price1" value="10" placeholder="Price 1" /> <br />
    <input type="text" name="number[]" id="number2" value="12" placeholder="Number 2" /> <br />
    <input type="text" name="name[]" id="name2" value="bbbb" placeholder="Name 2" /> <br />
    <input type="text" name="price[]" id="price2" value="15" placeholder="Price 2" /> <br />
    <input type="text" name="number[]" id="number3" value="38" placeholder="Number 3" /> <br />
    <input type="text" name="name[]" id="name3" value="cccc" placeholder="Name 3" /> <br />
    <input type="text" name="price[]" id="price3" value="29" placeholder="Price 3" /> <br />
    <button type="submit" class="btn btn-primary" name="send">Save</button>
</form>

При отправке формы я хочу добавить в базу данных следующие данные:

| session_id  |  number  |   name   |   price  |
|-------------|----------|----------|----------|
|      1      |    15    |   aaaa   |    10    |
|      1      |    12    |   bbbb   |    15    |
|      1      |    38    |   cccc   |    29    |

В моем PHP-коде я использую следующее для определения текстовых полей:

foreach($_POST['number'] as $i => $item) {

Когда я выполняю скрипт, я получаю данные только первых трех текстовых полей. Я попал в мою базу данных:

| session_id  |  number  |   name   |   price  |
|-------------|----------|----------|----------|
|      1      |    15    |   aaaa   |    10    |

После нескольких недель исследований я обнаружил, что что-то не так с JavaScript-частью кода. Когда я отправляю данные с текстовыми полями во втором примере, я получаю желаемый результат. Когда я использую JavaScript для создания динамических текстовых полей, PHP-скрипт будет публиковать только первую строку (которая не создана с помощью JavaScript) в базе данных.

Что не так с моим сценарием?

Вот скрипт, который я использую для добавления данных в мою базу данных:

<?php
    $correct = true;
    $_SESSION['session_id'];
    $number = $_POST['number'] ;
    $name = $_POST['name'] ;
    $price = $_POST['price'] ;
    if($correct){
        foreach($_POST['number'] as $i => $item) {
            $db = new PDO('mysql:host=localhost;dbname=db', 'user', 'pass');
            $query= "INSERT INTO products(session_id, number, name, price) VALUES (:session_id, :number, :name, :price)";
            $stmt = $db->prepare($query);
            $exec = $stmt->execute(array(
                ':session_id' => $_SESSION['session_id'],
                ':number' => $_POST["number"][$i],
                ':name' => $_POST["name"][$i],
                ':price' => $_POST["price"][$i]
            ));
        }
    }
    else
    {
        header('Location: ../error.php');
    }
?>

Результат var_dump on $_POST['number']:

array(1) { [0]=> string(2) "15" }

Answer 1

Вы можете оставить поля формы с именами массивов, но для того, чтобы отправить свои данные в базу данных, вам нужно будет выполнить итерацию по массиву.

Таким образом, ваша принимающая страница должна собрать все данные формы в переменную $ _POST, а затем вы можете проанализировать опубликованные значения как $ _POST ['number'] и выполнить итерацию по массиву, используя цикл for-each.

foreach ($_POST['price'] as $key => $value) {
     // do something with array value
    echo "{$key} => {$value} ";

    print_r($_POST['price']);
}

Answer 2

Не вставляйте чистый HTML, но играйте с DOM.

<form name="reaction" id="reaction" method="post" action="./send.php">
    <button type="submit" class="btn btn-primary" name="send">Save</button><br />
</form>

<script>
function newInput(type, value, count){
    var newInput = document.createElement('input');
    newInput.type = 'text';
    newInput.name = type+'[]';
    newInput.id = type+count;
    newInput.value = value;
    newInput.placeholder = type+' '+count; // <--you probably want to camelize this
    return newInput;
}

function addRow(number, name, price, count, target){
    target.appendChild(newInput('number', number, count));
    target.appendChild(newInput('name', name, count));
    target.appendChild(newInput('price', price, count));
    target.appendChild(document.createElement('br')); // <-- create any element
}

var myForm = document.getElementById('reaction');
var count = 0;
addRow(111, 'one', 1, ++count, myForm);
addRow(222, 'two', 2, ++count, myForm);
addRow(333, 'three', 3, ++count, myForm);
addRow(444, 'four', 4, ++count, myForm);
</script>

PHP-часть выглядит почти нормально:

$post_number = $_POST['number'];
$post_name = $_POST['name'];
$post_price = $_POST['price'];

//check, if needed set session variables here, then
$ses_id = session_id();

$db = new PDO('mysql:host=localhost;dbname=test', 'root', '');
$query= "INSERT INTO products(session_id, number, name, price) VALUES (:session_id, :number, :name, :price)";

foreach($_POST['number'] as $i => $item) {
    $stmt = $db->prepare($query);
    $exec = $stmt->execute(array(
        ':session_id' => $ses_id,
        ':number' => $post_number[$i],
        ':name' => $post_name[$i],
        ':price' => $post_price[$i]
    ));
    if($exec == false)
        header('Location: ../error.php');
        //or print out what happened
        //$e = $stmt->errorInfo();
        //print_r($e);
        //die();
}

Answer 3

Основная проблема заключается в том, что все ваши поля в форме имеют одно и то же имя, хотя предполагается, что они являются массивами, в действительности вы не учитываете несколько строк.

Самый простой (не обязательно оптимальный) способ сделать несколько настроек

Измените имена элементов формы на

variable[$i][number]
variable[$i][name]
variable[$i][price]

и убедитесь, что ваша форма меняет значение для $i в каждой строке, так что ваша форма становится:

<form name="reaction" id="reaction" method="post" action="./send.php">
<input type="text" name="variable[0][number]" id="number1" value="15" placeholder="Number 1" /> <br />
<input type="text" name="variable[0][name]" id="name1" value="aaaa" placeholder="Name 1" /> <br />
<input type="text" name="variable[0][price]" id="price1" value="10" placeholder="Price 1" /> <br />

<input type="text" name="variable[1][number]" id="number1" value="15" placeholder="Number 1" /> <br />
    <input type="text" name="variable[1][name]" id="name1" value="aaaa" placeholder="Name 1" /> <br />
    <input type="text" name="variable[1][price]" id="price1" value="10" placeholder="Price 1" /> <br />

и так далее ... Затем измените обработку формы, чтобы выполнить итерацию по $variable:

foreach($variable as $var)
{
   $number = $var['number'];
   $name = $var['name'];
   $price = $var['price'];

   // do whatever it is you do with the variables and then loop to the next row
}

Вот и все! Как я уже сказал, это не обязательно лучший способ для достижения вашей цели, но это, безусловно, самый простой