Bonjour,

Peut-on obliger un événement du genre « change » à s’exécuter avant un submit général ?

Je m’explique :

Imaginez un formulaire avec un bouton submit, un champ « valeur saisie » et un champ « valeur calculée ».

Un événement JQuery « change » est placé sur le champ « valeur saisie » pour que, lorsque la valeur change, un appel AJAX soit effectué pour calculer et renvoyer une valeur dans « valeur calculée ».

Imaginons pour faire simple que ce calcul (côté serveur) fasse « valeur calculée = valeur saisie + 1 » et, au submit, on enregistre dans une base de donnée le champ valeur saisie et le champ valeur calculée .

Imaginons qu’on frappe « 5 » dans le champ « valeur saisie » :

Le fonctionnement se passe bien lorsque, après changement de la valeur saisie, on clique autre part (mais pas sur le bouton submit ») dans la fenetre : dans ce cas l’événement « change » est détecté et tout se passe normalement, la valeur calculée passe à 6. Si on cliquait à ce moment là sur le bouton submit les valeurs enregistrées en BdD seraient les bonnes (« 5 » et « 6 »).

Replaçons le curseur dans le champ « valeur saisie » et remplaçons « 5 » par « 6 » sans cliquer en dehors du champ. Si on clique maintenant sur le bouton submit alors que le curseur était encore dans le champ « valeur saisie », alors l’appel AJAX ne s’effectue pas : on va enregistrer « 6 » et « 6 » dans la BdD.

La question est donc : comment faire pour obliger le système à exécuter l’événement «  change »AVANT d’exécuter le submit ?

Bonjour

Et si tu utilises ONBLUR à la place de ONCHANGE ?

Avec blur c'est pareil.

Pour info, avec "change" j’ai ajouté des traces JQuery pour voir ce qui se passe :

$(document).ajaxStart(function() {

console.log('Méthode ajaxStart exécutée');

});

$(document).ajaxSend(function(ev, req, options){

console.log('Méthode ajaxSend exécutée, ');

});

$(document).ajaxStop(function(){

console.log('Méthode ajaxStop exécutée');

});

$(document).ajaxSuccess(function(ev, req, options){

console.log('Méthode ajaxSuccess exécutée');

});

$(document).ajaxComplete(function(ev, req, options){

console.log('Méthode ajaxComplete exécutée');

});

$(document).ajaxError(function(ev, req, options, erreur){

console.log('Méthode ajaxError exécutée, ');

console.log('erreur : ' + erreur');

});

La partie ajax :

$.ajax({

type: 'POST',

url: ‘http://…adresse du traitement php',

data: donnees,

datatype: 'application/json; charset=utf-8',

timeout: 3000,

success: function(reponse) {

console.log(‘!!! AJAX Success !!!’) ;

},

error: function() {

console.log('La requête AJAX n\'a pas abouti');

}

});

 Résultat :

Lorsque tout se passe bien (donc lorsque je sors du champ en cliquant dans la fenetre mais pas sur le bouton submit) :

 Méthode ajaxStart exécutée

Méthode ajaxSend exécutée

!!! AJAX Success !!!

Méthode ajaxSuccess exécutée

Méthode ajaxComplete exécutée

Méthode ajaxStop exécutée

Lorsqu’on clique sur submit directement alors que le curseur est encore dans le champ :

Méthode ajaxStart exécutée

Méthode ajaxSend exécutée

La requête AJAX n'a pas abouti

... puis la page se raffiche (conséquence du submit() )

-
Edité par Jean-NoelLeSergent 12 juillet 2018 à 15:42:30

Bonjour,

Pour déclencher des évènements tu peux peut-être utiliser .trigger() de jQuery:

http://api.jquery.com/trigger/

Avec, tu peux simuler ce que tu veux