Bonjour,
j'ai un formulaire banal sous bootstrap 5 avec deux champs de saisie.
- auteur
- observation
Le formulaire a pour id="formObservation";
Sous le formulaire, il y a une div qui a pour id="observationsInfo";
cette div est remplie par une requête sql classique en pdo.
Voici d'ailleurs son while:
<div class="activity-item d-flex">
<div class="activite-label" style="text-transform:uppercase;">'.$auteur.' </div>
<div class="activity-content">'.$row['observation'].'</div>
</div>
Un bouton type submit envoi la saisie vers monsieur ajax que voici:
$('#formObservation').submit(function(e) {
e.preventDefault();
var auteur = $('#auteur').val();
var observations = $('#observations').val();
$.ajax({
type: "POST",
url: 'assets/inc/AjoutObservations.php',
data: $(this).serialize(),
success: function(json) {
$('#auteur').val('');
$('#observations').val('');
$('#observationsInfo').load('observations.php #observationsInfo');
}
});
})
La page php est chargée, je saisi mon nom, mes observations puis le clique sur "Ajouter".
Les infos sont correctement envoyées à la base de données, les champs de saisie sont vidés et ma nouvelle saisie apparaît sous la liste des observations déjà présentes.
En plus, la nouvelle saisie s'affiche sans recharger la page!
Mais voilà, le bonheur ne dure que le temps d'une saisie!
Si je rentre une nouvelle saisie dans mes deux champs et que je clique sur "Ajouter", la page se recharge et aucune saisie n'est prise en compte.
Il faut que je recharge une nouvelle fois la page pour pouvoir faire une souvelle saisie fonctionnelle....
Mon souci se trouve, à mon avis, dans les instructions que j'ai mise, ou homises dans mon SUCCESS.
Pouvez-vous m'aider?
Merci
Hexa