Envoi de données sans cliquer sur un bouton d’envoi

Je veux créer une table avec des lignes pleines d’entrées. L’idée est que chaque ligne d’entrées est liée à un object sur le backend. Je souhaite qu’une ligne soit “soumise” dès que l’utilisateur n’y entre plus de données.

Je suis principalement un ingénieur back-end qui bafouille avec le front-end, alors je me demande quelles sont les approches pour obtenir l’effet suivant:

Je souhaite appeler une “action” dorsale (au sens de MVC) lorsqu’un utilisateur cesse de saisir dans une ligne en cours et passe ensuite à la ligne suivante.

J’ai lu sur onblur et onfocusout, mais aucun ne semble faire ce que je veux. Onblur est entrée par entrée et onfocusout est déclenché chaque fois qu’une entrée est laissée, même si un utilisateur effectue une tabulation sur la même ligne. De plus, onfocusout n’est pas encore supporté par firefox.

Mon application est Grails, mais je suis disposée à contourner la pratique standard de g: form (grails) et à utiliser une sorte de solution javascript. Je ne sais tout simplement pas ce que ce serait.

Toute discussion serait utile, car j’essaie d’en apprendre davantage sur les solutions frontales en général. S’il existe des frameworks javascript qui facilitent cela, faites-le moi savoir.

vous pouvez utiliser javascript pour soumettre un formulaire quand vous le souhaitez. Vous pouvez attacher la fonction de formulaire de soumission à n’importe quel événement (comme dans l’idéal utilisateur, rendre flou tout autre événement de votre choix). Ensuite, si l’un des événements se produit, vous pouvez appeler cette fonction qui soumettra le formulaire. voir l’exemple ci-dessous

function idealUser(){//you call that function according to requirement setTimeout(function(){ submitForm(); },5000); } function submitForm(){ document.getElementByID('formId').submit(); }

Vous pouvez stocker les valeurs de départ de chaque ligne en javascript. Ajoutez une fonction pour l’événement onfocus aux lignes pour vérifier si la ligne sélectionnée est modifiée.

Ensuite, lorsque la ligne sélectionnée est modifiée, le JS peut vérifier si une autre ligne a des valeurs différentes des valeurs enregistrées. Si une ligne qui n’est pas au point a des valeurs différentes de celles qui ont été précédemment enregistrées, soumettez les informations de ligne modifiées au système dorsal.

Mettez également à jour les valeurs de ligne stockées dans le fichier js après l’envoi de la modification au serveur.

Validez et soumettez en sortant de la rangée du tableau.

Voici du code et une démo. J’ai déclenché un clic de bouton lorsque vous quittez la ligne, mais vous pouvez utiliser ajax pour appeler le code côté serveur.

 $("table").on("blur", ".row", function(e){ //check if all input fields are filled var cols = $(this).find(".col"); var filled = true; cols.each(function(i, v){ if($(v).val().length==0){ filled = false; } }); //if not moving out of the last input field then don't submit if(e.target !== $(this).find("input").last()[0]){ return; } //If filled sortinggger click for submission if(filled){ //in reality, you may use ajax here to call your backend code $("#submit-btn").sortinggger("click"); } }); $("#submit-btn").on("click", function(){ alert("Submit Clicked!"); });