Mise à jour du formulaire à chaque modification

Question

Je souhaite implémenter un formulaire qui envoie des données dès que les utilisateurs le modifient.

Exemple:

Un modérateur est l'édition d'un des articles, il modifie les valeurs d'une sélection. Quand il le fait ajax envoie la demande à une page dynamique pour changer ce champ. Peut-être après les changements si tout allait bien, la page devrait afficher une petite boîte avec "mise à jour complète ..."

Serait-ce possible? Quelle est la meilleure façon de le faire?

(je peux utiliser jQuery)

Answer 1

Vous êtes sur place avec les trucs jQuery AJAX là. La seule chose dont je ferais attention est le nombre de requêtes AJAX que vous faites. Par exemple, si vous avez une zone de texte, vous ne voulez pas mettre à jour chaque touche; la charge AJAX sur votre serveur sera énorme. Dans ce cas, mettez à jour toutes les 10 secondes environ. Pour des choses comme les boîtes de sélection, utilisez simplement $("#selectbox").change() et placez un appel AJAX à l'intérieur de celui-ci.

Answer 2

Assurez-vous qu'il est possible que vous ayez un événement de flou sur toutes les entrées qui déclenche un appel ajax pour cette boîte spécifique ou le formulaire entier si vous le souhaitez. Ce qui me préoccupe, c'est si vous voulez vraiment soumettre cela souvent et ensuite je m'inquiète aussi de la validation. Vous pouvez également l'avoir soumettre le formulaire entier plutôt que juste la boîte si vous le souhaitez. Mais honnêtement je n'aime pas du tout cette idée juste mon opinion

Answer 3

Vous voudrez probablement utiliser jQuery de toute façon, car il semble que ce serait plus facile pour cela.

Selon les événements que vous souhaitez appeler, l'ajax dépend du sélecteur que vous utilisez. Je commencerais probablement par créer une fonction qui appelle l'ajax et ensuite utiliser un sélecteur pour faire une boucle sur chaque élément que vous voulez changer (via un nom de tag ou une classe etc) puis onblur ou change, quelle que soit la suite, appelle votre ajax en passant le formulaire paramètres.

 
function callAjax(form) 
{ 

    $.ajax({ 
     type: "POST", 
     url: "/yourscript.php", 
     data: $(form).serialize(), // Send all the data from the form 
     success: function(msg) 
     { 
      // Show a success message, or whatever 
     } 
    }); 

} 
$("form input").blur(function() 
{ 

    callAjax($("form")); 

}); 

Quelque chose comme ça

Edit: Comme il est indiqué ci-dessus, il est peut-être une idée de ne pas appeler une demande événement jamais flou parce que cela pourrait mettre beaucoup de charge sur le serveur. Vous seriez mieux loti attacher l'événement à la forme soumettre de sorte que le ci-dessus serait:

 
$("form").submit(function() 
{ 

    callAjax($("form")); 

    return false; 

});