CODEWITHSUNDEEP
phpjqueryhtmlmysql
Lucas Craven
Lucas Craven

Reputation: 98

Increment HTML Value using Jquery and submitting input data to PHP

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>

Upvotes: 1

Views: 237

Answers (1)

sadlyblue
sadlyblue

Reputation: 2987

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.

Upvotes: 1

Related Questions