ajax doesn't work with php - php

Question

I've been trying to use ajax to insert data into my database but it didn't work. So I wrote a code to try a basic call for a php file and it didn't work either:
here is my html code :
<form >
<h4 class="header-title m-t-0 m-b-30">Cordonnées de facturation</h4>
<div class="form-group">
<label class="col-md-4 control-label">code facture</label>
<div class="col-md-6">
<input type="text" id="code_facture" class="code_facture form-control" placeholder="Ex : 008A00098">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Numéro du dossier</label>
<div class="col-md-6">
<input type="text" id="code_dossier" class="code_dossier form-control" placeholder="Ex : 008A00098">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">TPS</label>
<div class="col-md-6">
<input type="text" id="tps" class="tps form-control" placeholder="Ex : 0">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">TVQ</label>
<div class="col-md-6">
<input type="text" id="tvq" class="tvq form-control" placeholder="Ex : 0">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Référence</label>
<div class="col-md-6">
<input type="text" id="reference" class="reference form-control" placeholder="Ex : VAR R4055555">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">PNR</label>
<div class="col-md-6">
<input type="text" id="pnr" class="pnr form-control" placeholder="Ex : M15478LD265">
</div>
</div>
<div class="form-group">
<label class="col-md-4 control-label">Date de facturation</label>
<div class="col-md-6">
<input type="text" placeholder="12/12/2012" data-mask="99/99/9999" id="date_facturation" class="date_facturation form-control">
<span class="font-13 text-muted">jj/mm/aaaa</span>
</div>
</div>
<div class="form-group">
<button type="submit" class="btn" id="addfacturebutton"> ajouter</button>
</div>
and here is my ajax script
<script>
$('#addfacturebutton').click(function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: 'insertFacture.php',
data:{
code_facture:$('input[id=code_facture').val(),
code_dossier:$('input[id=code_dossier').val(),
tps:$('input[id=tps').val(),
tvq:$('input[id=tvq').val(),
reference:$('input[id=reference').val(),
pnr:$('input[id=pnr').val(),
date_facturation:$('input[id=date_facturation').val(),
},
success:function(data){
},
});
});
</script>
so in my php file I tried to write die('test'); but inserting into database didn't work either.
it doesn't call the functions
here is my php file:
<?php
include('functions.php');
$data = $_POST['code_dossier'];
die('works');
?>

Answer 1

Have you tried to dump $_POST of your insertFacture.php file? It seems like you do have wrong php filename or something wrong with the functions.php

Answer 2

Your code does not confirm if the js code works or not.
Try this:
Change this line:
success:function(data){
}
to:
success:function(data){
alert(data)
}
And change every occurrence of:
').val()
to
]').val()
If there is an alert, then the js is working. And I cannot see anything related to database in your php code.

Answer 3

To reduce the lines of code in ajax, you can alternatively add an id attribute on the form tag and then either serialize() or use FormData()
<form id='myFormTag'>
Then in ajax, simply call FormData() on submit()
$('#myFormTag').submit(function(e){
e.preventDefault();
$.ajax({
data: new FormData(this),
//other AJax Stuff
success:function(data){
alert(data)
}
});
});