简体   繁体   中英

How to submit Jquery Add Rows data to mysql using PHP

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>

Make your input type submit button

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

to

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

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!

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM