Increment HTML Value using Jquery and submitting input data to PHP

Question

So I'm currently working on an invoicing tool which works fine however what im looking to do is to increment the data inserted within the within every new row added. Once that's done, i then want to be able to grab all of that data and submit it to the MySQL database using php. Does anybody know how this is done?

I've never studied Jquery if im honest so I wouldn't know where to start. Thanks

<html lang="en">
<head>
<meta charset="utf-8">
<title>Invoce Report</title>
<style type="text/css">
    form{
        margin: 20px 0;
    }
    form input, button{
        padding: 5px;
    }
    table{
        width: 100%;
        margin-bottom: 20px;
        border-collapse: collapse;
    }
    table, th, td{
        border: 1px solid #cdcdcd;
    }
    table th, table td{
        padding: 10px;
        text-align: left;
    }
</style>
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script>
<script type="text/javascript">
    $(document).ready(function(){
        $(".add-row").click(function(){
            var name = $("#name").val();
            var variants = $("#variants").val();
            var markup = "<tr><td><input type='checkbox' name='record'></td><td name>" + name + "</td><td>" + variants + "</td></tr>";
            $("table tbody").append(markup);
        });

        // Find and remove selected table rows
        $(".delete-row").click(function(){
            $("table tbody").find('input[name="record"]').each(function(){
                if($(this).is(":checked")){
                    $(this).parents("tr").remove();
                }
            });
        });
    });    
</script>
</head>
<?php 
    $mg = "mg";
    $cb = "Classic Tobacco - 10ml";
    $sh = "Sahara Tobacco - 10ml";
    $ed = "Energy Drink - 10ml";
    ?>
<body>
    <form id="invoice" action="invoicereg.php" method="POST">
        <select id="name" name="name">
            <option value="<?php echo $cb; ?>">Aramax Classic Tobacco</option>
            <option value="<?php echo $sh; ?>">Aramax Sahara</option>
            <option value="<?php echo $ed; ?>">Aramax Energy Drink</option>
        </select>
        <select id="variants" placeholder="Variants - If Applicable">
            <option></option>
            <option value="3<?php echo $mg; ?>">3mg</option>
            <option value="6<?php echo $mg; ?>">6mg</option>
            <option value="12<?php echo $mg; ?>">12mg</option>
        <input type="button" class="add-row" value="Add Row">
    </form>
    <table>
        <thead>
            <tr>
                <th>Select</th>
                <th>Product</th>
                <th>Variant - If Applicable</th>
            </tr>
        </thead>
        <tbody>
        </tbody>
    </table>
    <button type="button" class="delete-row">Delete Row</button><br><br>
    <input type="submit" form="invoice">
</body> 
</html>

sadlyblue · Accepted Answer · 2017-01-13 14:32:56Z

1

Didn't test que jquery part, but this seems to lack the field in the form you want after submit. In the:

var markup = "<tr><td><input type='checkbox' name='record'></td><td name>" + name + "</td><td>" + variants + "</td></tr>";

You need to include the data you need to submit in the form. example:

var markup = '<tr><td><input type="checkbox" name="record"></td><td name><input type="hidden" name="values[]" value="' + name + ' ' +variants+ '" >' + name + '</td><td>' + variants + '</td></tr>';

After submit, in $_POST you get the value in array $_POST['values'].

Don't forget to check isset, it could be submitted with any value. And proper escape values to sql.

answered Jan 13, 2017 at 14:32

sadlyblue

2,9877 gold badges24 silver badges19 bronze badges

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

Collectives™ on Stack Overflow

Increment HTML Value using Jquery and submitting input data to PHP

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related