Non le this.form.submit() ne peut pas fonctionner car dès l'instant où tu fais un submit tu vas recharger ta page en totalité.
Bon, prenons un champs input date:
<input type="date" name="date" id="date" onchange="rechercheDate(this.value)" />
Sur le onchange on va lancer la fonction javascript rechercheDate() avec en paramètre la date entrée dans le input (this.value)
[javascript]
function rechercheDate(pDate){
//Je lance ma requête en AJAX
jQuery.ajax({
type: 'GET',
url: 'RequeteAjax.php?DATE='+pDate,
async:true,
dataType: 'text',
contentType: 'application/x-www-form-urlencoded;charset=UTF-8',
beforeSend: function(xhr) {
xhr.overrideMimeType('text/html; charset=UTF-8');
},
success: function(data,textStatus){
alert(data);
},
error: function (xhr, ajaxOptions, thrownError){
alert('Erreur AJAX: '+thrownError);
}
});
}
[/javascript]
Explication: on lance la requête Ajax en lançant le fichier RequeteAjax.php (que l'on va créer bien sûr). En paramètre, on a entré la date du champs INPUT (bien sûr, tu peux entrer en paramètre ce que bon te semble, toutes valeur issue du formulaire ou d'autre chose.
Ensuite le fichier PHP va faire son job (une requête et un résultat).
Par exemple, ici on considère que le résultat est un string, chaîne (dataType: 'text'). Si le fichier PHP renvoie un tableau, on mettra (dataType:'json') car JSON est le plus pratique pour encoder des tableaux et les récupérer dans le javascript.
Donc imaginons le fichier php RequeteAjax.php
if(isset($_GET['DATE']){
$lDate = $_GET['DATE'];
$lSql = "select name from ma_table where date='$date'";
//on continue mysql_query...bla bla bla...
//On imagine que ta requête renvoie uniquement une ligne donc là tu reçois un name de type string que tu nommes $name.
//On fait un simple echo de $name
echo $name;
}
Javascript va récupérer les données du fichier PHP (ici $name) et on les as dans la fonction success avec data. De fait, le alert(data) va t'afficher dans une popup le $name du fichier PHP.
Bien sûr, tu peux choisir d'afficher ton résultat dans une DIV.
Tu créés une DIV:
<div id="MaDivResult"></div>
Et dans la fonction javascript tu remplaces le alert(data) par:
[javascript]
success: function(data,textStatus){
$('#MaDivResult').html(data);
},
[/javascript]
Dans le cas où tu ramènes un tableau il faut dans le PHP utiliser la fonction json_encode() et dans le success du javascript utiliser notamment des boucles for pour récupérer les valeurs du tableau.