How to submit Jquery Add Rows data to mysql using PHP

Question

So I have this piece of code I've been tinkering with. The Jquery is modified from somewhere else. I'm wanting to be able to add products on this page (which currently works)... but the part im struggling with is I then submitted ALL of that data to MySql through a submit button.

I've tried playing around with a few arrays / loops but so far I have drawn a blank. Can anyone help?

<html>
    <script src="http://code.jquery.com/jquery-latest.js"></script>
    <script type='text/javascript'>
        //<![CDATA[
            $(document).ready(function() {
                var currentItem = 1;
                $('#addnew').click(function() {
                    currentItem++;
                    $('#items').val(currentItem);
                    var strToAdd = '<br>product: <select name="product'+currentItem+'" id="product'+currentItem+'" ><option value="aclt">Tobacco</option><option value="aed">Energy Drink</option></select> nicotine: <select name="nicotine'+currentItem+'" id="nicotine'+currentItem+'">      <option value="3">3mg</option><option value="6">6mg</option><option value="12">12mg</option></select> Qty:<input name="qty'+currentItem+'" id="qty'+currentItem+'" type="text" />';
                    $('#data').append(strToAdd);
               });
           });
       //]]>
    </script>

    <form method="POST" action="invoicereg.php" id="data" name="sub">
    product:
        <select name="'product1'" id="product1" >
            <option value="aclt">Tobacco</option>
            <option value="aed">Energy Drink</option>
        </select>
        nicotine:
        <select name="nicotine1" id="nicotine1">
            <option value="3">3mg</option>
            <option value="6">6mg</option>
            <option value="12">12mg</option>
        </select>
        Qty:<input type="text" id="qty" name="qty"></input><br>
    </form>
    <button type="submit" form="data">SUBMIT</button>
    <input type="button" id="addnew" name="addnew" value="Add new item" /> 
    <input type="hidden" id="items" name="items" value="1" />
</html>

try to use a names as row[currentItem][product] and row[currentItem][nicotine] — Maxi Schvindt
– Maxi Schvindt, Commented Jan 16, 2017 at 11:39

Wolverine · Accepted Answer · 2017-01-16 17:37:01Z

I've noticed few mistakes that you've made in your code.

The first mistake is:

<select name="'product1'" id="product1">

Remove single quotes from the value of name attribute and it should look like:

<select name="product1" id="product1">

This is not considered an issue. If you were using single quotes around the value of name attribute, it would be quite annoying to access its value in PHP.

So, you would need to use complex expression to fetch the value like the following syntaxes:

$_POST['\'product1\'']

$_POST["'product1'"]

The first one uses escape sequence of backward slash to escape single quotes.

The second one uses double quotes to access keys with single quotes wrapped around. This one is relatively easier than the first one involving a bit complex expression.

The second mistake is:

The last three HTML elements below the form tag are not wrapped inside the form. The two among the last three elements which are submit and hidden element belong to form element. After modifying the code, the whole code should be like the following:

<form method="POST" action="invoicereg.php" id="data" name="sub">
    product:
    <select name="product1" id="product1" >
        <option value="aclt">Tobacco</option>
        <option value="aed">Energy Drink</option>
    </select>
    nicotine:
    <select name="nicotine1" id="nicotine1">
        <option value="3">3mg</option>
        <option value="6">6mg</option>
        <option value="12">12mg</option>
    </select>
    Qty:<input type="text" id="qty" name="qty"></input><br>
    <button type="submit" form="data">SUBMIT</button>
    <input type="button" id="addnew" name="addnew" value="Add new item" /> 
    <input type="hidden" id="items" name="items" value="1" />
</form>

Hope it helps!

Indresh Tayal · Accepted Answer · 2017-01-16 11:37:45Z

0

Make your input type submit button

<button type="submit" form="data">SUBMIT</button>

to

 <input type="submit" form="data" value="SUBMIT">

answered Jan 16, 2017 at 11:37

Indresh Tayal

3061 silver badge12 bronze badges

4 Comments

Mayank Pandeyz Over a year ago

button type="submit" and input type="submit" have same functional architecture, than how it can help?

Lucas Craven Over a year ago

Indeed, the question is how to get all of that data from the code I posted to be submitted and written into a database :)

Indresh Tayal Over a year ago

When you have clicked on submit button, then you can get all data by $_POST like $product1_value= $_POST['product1']; and store all data into database by mysql insert query

Lucas Craven Over a year ago

I have done that and it works, but there are incremented values when i add more than one item from the first page, how would I go about that?

Collectives™ on Stack Overflow

How to submit Jquery Add Rows data to mysql using PHP

2 Answers 2

Comments

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related