Increment HTML Value using Jquery and submitting input data to PHP

795

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" 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" >Delete Row</button><br><br>
  <input type="submit" form="invoice">
</body> 
</html>   
988

Answer

Solution:

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.

People are also looking for solutions to the problem: oop - The getMessage() function in PHP being static referenced by object?

Source

Didn't find the answer?

Our community is visited by hundreds of web development professionals every day. Ask your question and get a quick answer for free.

Ask a Question

Write quick answer

Do you know the answer to this question? Write a quick response to it. With your help, we will make our community stronger.

Similar questions

Find the answer in similar questions on our website.