How to insert dynamically added text boxes into MySQL database

Question

I used Javascript to dynamically add textbox in order for the user to add more items in one process. Here's the code that add textboxes:

<script type="text/javascript">

    var quantity = document.getElementById('quantity');
    var item = document.getElementById('item');
    var serial = document.getElementById('serial');
    var property = document.getElementById('property');

    document.getElementById('add').onclick = function () {
        var input = document.createElement('input'),
        div = document.createElement('div');
        input.type = "text";
        input.setAttribute("name", "quant");
        div.appendChild(input);
        quantity.appendChild(div);

        var input2 = document.createElement('input'),
        div2 = document.createElement('div');
        input2.type = "text";
        input2.setAttribute("name", "items");
        div.appendChild(input2);
        item.appendChild(div);

        var input3 = document.createElement('input'),
        div3 = document.createElement('div');
        input3.type = "text";
        input3.setAttribute("name", "serno");
        div.appendChild(input3);
        serial.appendChild(div);

        var input4 = document.createElement('input'),
        div4 = document.createElement('div');
        input4.type = "text";
        input4.setAttribute("name", "proper");
        div.appendChild(input4);
        property.appendChild(div);

    };

</script>

When the user clicks the "Add Text" button, one set (four textboxes) will appear. My problem is even if the user clicks and inputs data into those textbox, it will only insert one set of data (which was the last set of input). Its because of the "name" of the textbox are the same. How can I insert those multiple data? Or how can I set a unique name for the added textbox in order to insert them into the database?

Could you provide a jsfiddle?

Manishearth
– Manishearth

2013-12-16 09:35:49 +00:00
Commented Dec 16, 2013 at 9:35 — Manishearth
– Manishearth, Commented Dec 16, 2013 at 9:35
jsfiddle.net/ehx6M Here it is

Logan Wayne
– Logan Wayne

2013-12-17 00:20:52 +00:00
Commented Dec 17, 2013 at 0:20 — Logan Wayne
– Logan Wayne, Commented Dec 17, 2013 at 0:20

Samuel Liew · Accepted Answer · 2013-12-16 09:37:20Z

2

You'll want to change the names with a [] appended to it. This will pass an array to the PHP on form submit.

input.setAttribute("name", "quant[]");

To get the values in PHP,

$quant_values = $_GET['quant']; // array of values 
$value_one = $quant_values[0];

You will need to implement a loop to iterate through the values.

answered Dec 16, 2013 at 9:37

Samuel Liew

79.5k112 gold badges173 silver badges318 bronze badges

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

2 Comments

Logan Wayne Over a year ago

I get the idea. Now, I want to know how to get the max number of array [] or what was the last number inside []. So I can compare with the for loop. Thanks

Logan Wayne Over a year ago

It's okay now. I used end($quant_values); $compare=key($quant_values); to get the last set of array.

Collectives™ on Stack Overflow

How to insert dynamically added text boxes into MySQL database

1 Answer 1

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related