How to Insert from HTML/PHP Data into MySQL Database using jQuery

Question

I don't know how to insert form data into MySQL via jQuery

my html :

 Sendungstyp
 
 <select id="st">
<option  value="">Auswahlen</option>
    <option value="1">3kg</option>
    <option value="15">10kg</option>
    <option value="12">20kg</option>
    <option value="10">50kg</option>
</select>
Zeitoption
 <select id="zt">
<option  value="">Auswahlen</option>
    <option value="1">Classic</option>
    <option value="2">Direkt Fahrt</option>

</select>


Select bezirk <select id="vta">
<option  value="">Vrom</option>
    <option value="4.3">1010</option>
    <option value="15">15</option>
    <option value="12">12</option>
    <option value="10">10</option>
</select>


<select id="vtaa">
<option  value="">To</option>
    <option value="4.3">1010</option>
    <option value="15">15</option>
    <option value="12">12</option>
    <option value="10">10</option>
</select>

    Total <input type="text" id="total" > Euro

jQuery that I have to extract the data:

 <script type="text/javascript">
 
    $("#st").on('change', function() {
  updatePrice();
});

    $("#zt").on('change', function() {
  updatePrice();
});


    $("#vta").on('change', function() {
  updatePrice();
});
$("#vtaa").on('change', function() {
  updatePrice();
});


function updatePrice() {
    st = $("#st").val();
    zt = $("#zt").val();
  vta = $("#vta").val();
  vtaaa = $("#vtaa").val();
  total = (+vta) + (+vtaaa)+(+zt)+(+st);
  $("#total").val(total);
}
</script>

I know it's not a complicated problem but I don't know how to solve it. I tried several options but I did not succeed

Answer 1

When passing data to the web server, you would setup a HTML form like so:

<form action="update.php" method="post">
  <label>Name:</label>
  <input type="text" name="myName" id="myName" />
  <button type="submit">Send</button>
</form>

This HTML code tells the browser to create a new HTTP POST and transmit the data to a relative page, update.php. A little like this:

update.php?myName=John%20Smith

When the HTTP Request is submitted, the browser will load the new page. The page will then need to process the details.

<?php
$postData = $_POST['myName'];
echo $postData;
?>

Your script will be more complex, this is just an example.

AJAX uses JavaScript to create the HTTP Request and submit it without having to load or refresh the page.

<form action="update.php" method="post">
  <label>Name:</label>
  <input type="text" name="myName" id="myName" />
  <button type="submit">Send</button>
</form>
<script>
$("form").submit(function(e){
  e.preventDefault();
  $.post($(this).attr("action"), { myName: $("#myName").val() }, function(results){
    alert("Thank you " + result + ".");
  });
});
<script>

This jQuery script has been added and will be executed when the Form is submitted, the User presses "Send". The script will tell the browser to create a HTTP POST Request and send it to the PHP. There is a Callback function that will handle the returned data. From the User experience,they will click "Send" and get a response without the page refreshing.