Undefined index: Error in ajax POST

Question

Im new on php programming and I get this error when i try to add a record on my table using ajax POST : Undefined index: jour in C:\xampp\htdocs\app\server.php on line 6 and the same thing for other variables

here is my server.php page :

 <?php
$dbh = new PDO('mysql:host=localhost;dbname=dbgestion', 'root', '');
$page = isset($_GET['p'])? $_GET['p'] : '';
if($page=='add'){
    try{
        $jour = $_POST['jour'];
        $ventes = $_POST['ventes'];
        $soldeinitial = $_POST['soldeinitial'];
        $stmt = $dbh->prepare("INSERT INTO jours VALUES(?,?,?)");
        $stmt->bindParam(1,$jour);
        $stmt->bindParam(2,$ventes);
        $stmt->bindParam(3,$soldeinitial);
        if($stmt->execute()){
            print "<div class='alert alert-success' role='alert'>Data has been added</div>";
        } else{
            print "<div class='alert alert-danger' role='alert'>Failed to add data</div>";
        }
    } catch(PDOException $e){
        print "Error!: " . $e->getMessage() . "<br/>";
    } 
}

and here my html page :

<div class="row">
            <div class="col-md-9">
                <table class="table table-bordered table-striped table-hover">
                    <thead>
                        <tr>
                            <th width="40">Jour</th>
                            <th>Ventes</th>
                            <th>Solde Initial</th>
                            <th width="100">Action</th>
                        </tr>
                    </thead>
                    <tbody></tbody>
                </table>
            </div>
            <div class="col-md-3">
                <form id="sidebar">
                    <div class="form-group">
                        <label for="jour">Jour</label>
                        <input type="date" id="jour" name="jour" class="form-control" placeholder="jour"/>
                    </div>
                    <div class="form-group">
                        <label for="ventes">Ventes</label>
                        <input type="text" id="ventes" name="ventes" class="form-control" placeholder="ventes"/>
                    </div>
                    <div class="form-group">
                        <label for="soldeinitial">Solde initial</label>
                        <input type="text" id="soldeinitial" name="soldeinitial" class="form-control" placeholder="soldeinitial"/>
                    </div>
                    <button type="button" id="save" class="btn btn-primary" onclick="saveData()">Save</button>
                    <button type="button" id="update" class="btn btn-warning" onclick="updateData()">Update</button>

                </form>
            </div>
        </div>

and finally this is my script.js file

function saveData(){
    var jour = $('#jour').val()
    var ventes = $('#ventes').val()
    var soldeinitial = $('#soldeinitial').val()
       $.post('server.php?p=add', {jour:jour, ventes:ventes, soldeinitial:soldeinitial}, function(data){
            viewData()
            $('#jour').val(' ')
            $('#ventes').val(' ')
            $('#soldeinitial').val(' ')
        })
    }