CODEWITHSUNDEEP
phphtmlmysql
Mariska
Mariska

Reputation: 33

MySQL database entries only inserting the last user input from multiple form input clones

Example of the SQL/php code, the second query is applicable. I have created a user input that submits the id variables into a MySQL database. These user inputs are cloned multiple times within the form, thus resulting in multiple duplicate id's/names, however one column (lets call it column 1) is different for each clone.

Now, once the input has been added and the form is submitted it only appends the last form entry into the database table, which I expected.

Is there a way that all these copies can be added to the table, perhaps based on the variance of Column 1? I was thinking something like: for each Column 1 INSERT INTO database1 ...

EDIT

Some code:

HTML:

<style> 
.hidden {
    display: none;
}
</style>

<body>
    <div id="samplesinfo" class="samplesinfo hidden">
        <input type="text" id="column1" name="column1" value="1" readonly>
        <input type="text" name="column2">
    </div>
    <button id="btn">Paste</button>
    <div>
        <h3>Paste Below</h3>
    </div>
    <form>
        <div id="paste">    
        </div>
        <button type="submit" name="submit">Submit</button> 
    </form>

jQuery: 

$(document).ready(function() {
        var sample = 1;
        $("#btn").click(function() {
            var element = $(".samplesinfo.hidden").clone(true);
            element.removeClass("hidden").appendTo("#paste:last");
            sample++;
            $("#column1").val(sample)
        });

    });

and php:

if (isset($_POST['submit'])) {  
    $column1 = mysqli_real_escape_string($conn, $_POST['column1']);
    $column2 = mysqli_real_escape_string($conn, $_POST['column2']);

    $query = "INSERT INTO db1 ('column1', 'column2')
    VALUES ('$column1', '$column2');";

    mysqli_query($conn, $query);
    header("Location: ../web_page/analysis_page.php?add_order=success");
}

Upvotes: 0

Views: 144

Answers (2)

Adder
Adder

Reputation: 5868

I replaced the ids with classes and added a [] to the input field names, so that $_POST['column1'] and $_POST['column2'] are arrays.

HTML:

<style> 
.hidden {
    display: none;
}
</style>

<body>
    <div id="samplesinfo" class="samplesinfo hidden">
        <input type="text" class="column1" name="column1[]" value="1" readonly>
        <input type="text" class="column2" name="column2[]">
    </div>
    <button class="btn">Paste</button>
    <div>
        <h3>Paste Below</h3>
    </div>
    <form>
        <div class="paste">    
        </div>
        <button type="submit" name="submit">Submit</button> 
    </form>

Javascript:

$(document).ready(function() {
        var sample = 1;
        $(".btn").click(function() {
            sample++;
            $(".samplesinfo.hidden").find(".column1").val(sample);
            var element = $(".samplesinfo.hidden").clone(true);
            element.removeClass("hidden").appendTo(".paste:last");
        });

    });

PHP:

if (isset($_POST['submit'])) {  
    $n = count($_POST['column1']);
    for($i = 0; $i<$n; ++$i) {
        $column1 = mysqli_real_escape_string($conn, $_POST['column1'][$i]);
        $column2 = mysqli_real_escape_string($conn, $_POST['column2'][$i]);

        $query = "INSERT INTO db1 (column1, column2)
        VALUES ('$column1', '$column2');";

        mysqli_query($conn, $query);
    }
    header("Location: ../web_page/analysis_page.php?add_order=success");
}

Upvotes: 0

rkeet
rkeet

Reputation: 3468

That only the new inputs are send to the back-end is because the original #column1 and #column2 are outside of the <form>. If you want to send everything, put it in the <form>.

Next, if you want to insert everything into the database and simultaneously update existing records if they're changed you might want to read this.

If you want to add multiple records of the same object, you must send them to the back-end as the same type of records and then treat them as an array. 

<form>
    <input name="column1[0][name]" value="first one">
    <input name="column1[1][name]" value="second one">
    <input name="column1[2][name]" value="third one">
</form>

Submitting this example would get you 3 column1 array entries with a name and associated values. 

// example value of received data
$_POST = [
    'column1' => [
        0 => [
            'name' => 'first one',
        ],
        1 => [
            'name' => 'second one',
        ],
        2 => [
            'name' => 'third one',
        ],
    ],
];

To dump all into database use your query in a foreach() loop. Such as:

foreach ($_POST['column1'] as $column) {
     $query = "INSERT INTO db1 ('column1') VALUES (" . $column['name'] . ");";
}

Obviously you'd have to update it a bit here 'n' there for your use-case and don't forget to sanitize this data.

Upvotes: 1

Related Questions