Add to database array of input fields generated with JavaScript

Question

I tried looking for a solution everywhere for my question and I can't seem to find it so I decided to ask it myself. Well, I'm working on a project where I'm creating multiple input fields with JavaScript, here is the code:

HTML:

<form id="buildyourform">
<legend>Registration Page</legend>
    <hr>
<input type="button" value="New Registry" class="add" id="add" />
<input type="submit" value="Save" id="submitForms" />
    <hr>

    <script>myscript</script>

</form>

The JavaScript code inside the <script> tags above:

<script>
        $(document).ready(function() {
            $("#add").click(function() {
                var lastField = $("#buildyourform div:last");
                var intId = (lastField && lastField.length && lastField.data("idx") + 1) || 1;
                var fieldWrapper = $("<div class=\"fieldwrapper\" id=\"field" + intId + "\"/>");
                fieldWrapper.data("idx", intId);
                var fName = $("<input type=\"text\" class=\"fieldname\" placeholder=\"Name of New Registry\" name=\"field\" />");
                var removeButton = $("<input type=\"button\" class=\"remove\" value=\"x\" />");

                removeButton.click(function() {
                    $(this).parent().remove();
                });

                fieldWrapper.append(fName);
                fieldWrapper.append(removeButton);
                $("#buildyourform").append(fieldWrapper);
            });
        });
</script>

The thing is that this works, it allows me to create and remove dynamically input fields, the problem is that they are all generated with the same name, so my question is: how do I add every single of them and their value in my database? This is my current php code:

<?php
    require_once 'conector_superadmin.php';
    $link = connect($conn);

    $NameRegistryInput = $_POST['field'];

    $sql = "INSERT INTO `database` (`idRegistryName`, `Name`) VALUES (NULL, '$NameRegistryInput');";

    mysqli_query($link, $sql);
?>

If these were static fields I wouldn't have a problem, but the fact that they're dynamic got me stuck, so any help would be greatly appreciated.

EDIT

My new PHP code looks like this now (I also added the "[]" to the name in the input field, it now looks like this "field[]"):

require_once 'conector_superadmin.php';
    $link = connect($conn);


        foreach ($_POST['field'] as $NameRegistryInput) {
            $sql = "INSERT INTO `database` (`idRegistryName`, `Name`) VALUES (NULL, '$NameRegistryInput');";
            mysqli_query($link, $sql);
        }

It still doesn't work.

James · Accepted Answer · 2018-06-30 14:13:20Z

2

PHP handles a form post containing multiple elements with the same name as an array - as long as you add [] to the name attribute

So,

var fName = $("<input type=\"text\" class=\"fieldname\" placeholder=\"Name of New Registry\" name=\"field[]\" />");

then

foreach ($_POST['field'] as $NameRegistryInput) {
  $sql = "INSERT INTO `database` (`idRegistryName`, `Name`) VALUES (NULL, '$NameRegistryInput');";
  mysqli_query($link, $sql);
}

Now, I see you inventing ids in javascript for each element you are adding to the page. I think you will find that you don't need that at all.

edited Jun 30, 2018 at 14:13

answered Jun 30, 2018 at 14:07

James

22.4k5 gold badges29 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

IncredibleHat Over a year ago

With a side note: Once you get it working, then look to using prepared statements to safeguard your database from sql injection attacks.

ChBgt909 Over a year ago

I tried using this code, it makes sense in its context and i've seen similar solutions in other threads but for some reason it won't work for me, it doesn't add anything into the database.

ChBgt909 Over a year ago

I just edited the original post to show how my new php code looks like.

James Over a year ago

Looks ok to me. Check to see what $_POST[‘field’] contains, and check the queries produced, using var_dump or similar.

ChBgt909 Over a year ago

I got it working now! I just had to make one change, use $_GET instead of $_POST, thanks a lot for your help, I already marked your reply as best answer.

Collectives™ on Stack Overflow

Add to database array of input fields generated with JavaScript

1 Answer 1

5 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

5 Comments

Your Answer

Sign up or log in

Post as a guest

Related