AJAX call not working dynamically?

Question

I have the following Script:

    $(document).ready(function(){
        $('#additem').click(function(){
            $.ajax({
                 type: 'POST',
                 url: 'php/additem.php',
                 data: {itemName: $('#itemName').val()},
                 data: {pricetotal: $('#price').val()},
                 data: {description: $('#description').val()},
                 success: function(data)
                 {
                    Can i call a separate ajax query here? I want to repull my two tables data so the resulting itemadd seems dynamic.
                 }
             });
         });
     });

Here is the HTML:

    <div class="col-sm-4 col-md-4">
                    <div class="content-boxes style-two top-column clearfix animated flipInY" style="opacity: 1;">
                        <div class="content-boxes-text">
                            <form action="php/additem.php" method="post" class="form-inline pull-right">
                                <h4>'.$row['itemName'].'</h4><input id="itemName" type="hidden" name="itemName" value="'.$row['itemName'].'">
                                <h3>$'.$price.'</h3><input id="price" type="hidden" name="pricetotal" value="'.$price.'">   
                                <img src="../wholesale/img/sourdough.jpg" class="img-reponsive">
                                <p>'.$row['description'].'</p><input id="description" type="hidden" name="description" value="'.$row['description'].'">
                                <div class="form-group">
                                <label class="sr-only" for="exampleInputAmount">Qty</label>
                                <div class="input-group">
                                <input type="number" name="qty" class="form-control" id="qtyitem" placeholder="How Many?">
                                </div>
                                </div>
                                <button type="submit" id="additem" class="btn btn-primary">Add</button>
                            </form>
                        </div>
                        <!-- //.content-boxes-text -->
                    </div>
                    <!-- //.content-boxes -->
                </div>

The problem is when i submit the form the page reloads like a normal query. The page should not refresh and the item adding should happen dynamically.

I am having trouble with the idea: My initial loading pulls up data from two tables, so would it be best to recall that initial ajax query after i have added an item?

Please give me reasoning to anything you write so i can learn from this. Thank you all.

    session_start();
include('db_config.php');

$date = date("Y-m-d");
$itemname = $_POST['itemName'];
$description = $_POST['description'];
$qty = $_POST['qty'];
$price = $_POST['pricetotal'] * $qty;
$id = $_SESSION['customer_id'];

$sql = "INSERT INTO orders (deliveryDate, customerId, itemName, qty, price) VALUES (?, ?, ?, ?, ?)";

$stmt = $conn->prepare($sql);
$stmt->execute(array($date, $id, $itemname, $qty, $price));

header('Location: ../order.php');

JS SCRIPT

<script type="text/javascript">
    $(document).ready(function(){
    $('.form-inline').on("submit",function(event){
       event.preventDefault();
        $.ajax({
             type: 'POST',
             url: 'php/additem.php',
             data: {
                  itemName: $('#itemName').val(), 
                  pricetotal: $('#price').val(), 
                  description: $('#description').val(),
                  qty: $('#qtyitem').val()
             },
             success: function(data)
             {
                alert(data);
             }
         });
      });
 });   
 </script>

Answer 1

additem button is a submit button so it performs default operation

to avoid your page reload do this

use : event.preventDefault();

change your code to

   $(document).ready(function(){
    $('.form-inline').on("submit",function(event){
       event.preventDefault();
        $.ajax({
             type: 'POST',
             url: 'php/additem.php',
             data: {
                      itemName: $('#itemName').val(), 
                      pricetotal: $('#price').val(), 
                      description: $('#description').val()
             },
             success: function(data)
             {
                // perform action
             }
         });
     });
 });

Answer 2

Try this..

Change button type "submit" to "button"

 <button type="submit" id="additem" class="btn btn-primary">Add</button>

to

 <button type="button" id="additem" class="btn btn-primary">Add</button>

 or

<input type="button"  id="additem" class="btn btn-primary" value="Add"/>