Bouton radio au chargement de page et action AJAX
Résolu/Ferméemrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 9 avril 2024 - 2 oct. 2022 à 19:10
- Bouton radio au chargement de page et action AJAX
- Action - Guide
- Télécharger film d'action gratuitement et rapidement - Télécharger - TV & Vidéo
- Supprimer une page word - Guide
- Action fans - Accueil - Guide arnaque
- Station de radio - Télécharger - Médias et Actualité
3 réponses
30 sept. 2022 à 09:51
Merci pour ces infos Jordan... Je vais tester ça !
C'est quoi :
.each(function(i,el)
Entre temps je viens d'écrire ça pour la validation du formulaire :
// ########################### VALIDATION FORMULAIRE ############################# function valider() { // Si chaine_contrat n'est pas vide, on envoit le formulaire if (chaine_contrat.value != "") { return true; } // Si chaine_contrat est vide on affiche un message d'erreur : else { alert("Il n'y a pas de prestation sur ce contrat !"); return false; } }
Du coup je n'ai pas d'autre choix que d'ajouter un ALERT ! :-(
Je me pose une question, bien que cela fonctionne :
Comment Javascript connait-il chaine_contrat.value ?
J'ai relu en diagonale les instructions JavaScript et toutes les mentions de chaine_contrat sont dans des fonctions, il n'a donc aucun moyen de connaitre sa valeur, comment se fait-il que je n'ai pas un message d'erreur ?
29 sept. 2022 à 23:36
Bonjour
Déjà, j'ai l'impression que tu as écrit autant d'appels Ajax que tu as de boutons.... Alors qu'il aurait été plus simple et plus efficace de ne faire qu'un seul appel en fonction du bouton cliqué..
Le problème, c'est que vu que tu ne nous montre qu'un petit extrait de ton code , nous ne pourrons pas t'aider à le corriger ou à l'améliorer...
Mais oui, dans le principe, il faudrait faire l'appel Ajax une fois la page chargée pour pouvoir récupérer les données relatives au bouton sélectionner.
30 sept. 2022 à 09:03
Bonjour Jordan...Merci une nouvelle fois pour ton aide !
Tu as parfaitement raison pour les appels Ajax, j'ai suivi un tuto pour ces instructions et comme mon niveau en Javascript est extrêmement faible, j'ai fait un copier/coller pour tous les boutons !
Ce qui donne :
// ############## REMPLISSAGE DU SELECT PRESTATIONS SELON GÎTE CHOISI ########## $(function() { $('#village').click(function() { if ($('#village').is(':checked')) { var ContratType = $(this).val(); $.ajax({ type: 'POST', url: 'prestations_data.php', data: 'ContratType=' + ContratType, success: function(html) { $('#prestation').html('<option value="">Sélectionnez une catégorie</option>'); document.getElementById("descriptif").value = ''; $('#gite').html(html); } }); } }); $('#jardin').click(function() { if ($('#jardin').is(':checked')) { var ContratType = $(this).val(); $.ajax({ type: 'POST', url: 'prestations_data.php', data: 'ContratType=' + ContratType, success: function(html) { $('#prestation').html('<option value="">Sélectionnez une catégorie</option>'); $('#gite').html(html); document.getElementById("descriptif").value = ''; } }); } }); $('#chambre').click(function() { if ($('#chambre').is(':checked')) { var ContratType = $(this).val(); $.ajax({ type: 'POST', url: 'prestations_data.php', data: 'ContratType=' + ContratType, success: function(html) { $('#prestation').html('<option value="">Sélectionnez une catégorie</option>'); $('#gite').html(html); document.getElementById("descriptif").value = ''; } }); } }); $('#repas').click(function() { if ($('#repas').is(':checked')) { var ContratType = $(this).val(); $.ajax({ type: 'POST', url: 'prestations_data.php', data: 'ContratType=' + ContratType, success: function(html) { $('#prestation').html('<option value="">Sélectionnez une catégorie</option>'); $('#gite').html(html); document.getElementById("descriptif").value = ''; } }); } }); $('#gite').change(function() { var batimentID = $(this).val(); if (batimentID != '') { $.ajax({ type: 'POST', url: 'prestations_data.php', data: 'id_batiment=' + batimentID, success: function(html) { $('#prestation').html(html); document.getElementById("descriptif").value = ''; } }); } else { $('#prestation').html('<option value="">Sélectionnez une catégorie</option>'); document.getElementById("descriptif").value = ''; } }); $('#prestation').change(function() { var prestationID = $(this).val(); if (prestationID) { $.ajax({ type: 'POST', url: 'prestations_data.php', data: 'prestation=' + prestationID, success: function(data2) { document.getElementById("descriptif").value = data2; } }); } else { document.getElementById("descriptif").value = ''; } }); });
J'ai bien conscience que l'on peut faire plus simple, mais comme ça fonctionnait, je n'ai pas cherché plus loin ! :-(
30 sept. 2022 à 09:18
Dans l'idéal, il faudrait leur ajouter une "class" à tes boutons pour pouvoir les manipuler tous via ton js.
par exemple, vu que tu as déjà, sur au moins l'un d'eux la class "JARDIN", tu pourrais ajouter la class "CHOIX"
ce qui donnerait
class="JARDIN CHOIX" ( d'où l'importance de ne pas utiliser des class avec des espaces comme déjà expliqué .. puisque chaque "class" est séparée par un espace... )
Et au niveau JS, tu peux ensuite cibler tous les boutons qui ont la class "choix" et boucler dessus pour faire la vérification. (aussi bien au click .. qu'au lancement de la page)
Un truc du genre
$('.choix').click(function() { //on réactualise la liste après le click actualiseListe(); }); function actualiseListe(){ $('.choix').each(function(i,el){ if ($(el).is(':checked')) { var ContratType = $(el).val(); $.ajax({ type: 'POST', url: 'prestations_data.php', data: 'ContratType=' + ContratType, success: function(html) { $('#prestation').html('<option value="">Sélectionnez une catégorie</option>'); document.getElementById("descriptif").value = ''; if($(el).id == "village" ) { $('#gite').html(html); } } }); } }); } //on actualise la liste au chargement de la page actualiseListe();
Si ça ne fonctionne pas, regarde les éventuelles erreurs affichées dans la console .. et n'hésites pas à nous partage le code COMPLET de la page pour qu'on puisse réellement t'aider à corriger.
Modifié le 30 sept. 2022 à 09:22
En fait, si je fais tout ce mic-mac c'est parce que je ne contrôle qu'une partie de mon formulaire (tous les INPUT nom, prénom, date, checkbox, etc.... avec des type="number" des min="0" et des onkeypress="return chiffres(event);"
Par contre, une partie de ce formulaire n'est pas contrôlable, du moins je ne sais pas faire : c'est celle dans laquelle l'utilisateur peut ou non ajouter des prestations dans une chaîne de type :
chaine_contrat.value += "|" + ref_prestation + ";" + text_prestation + ";" + text_descriptif + ";" + ref_prix + ";" + ref_quantite;
Du coup l'utilisateur peut valider son formulaire et la page suivante vérifie que $_POST["chaine_contrat"] n'est pas vide !
Dans le cas où elle le serait, on retourne sur le formulaire pour obliger l'utilisateur à mettre au moins une prestation dans $_POST["chaine_contrat"]...
Il existe surement un moyen en Javascript pour empêcher cette validation si chaine_contrat.value est vide ce qui m'éviterai les $_SESSION et retour sur formulaire !
Là aussi, je ne sais pas faire sans utiliser un truc du style alert('Il n'y a pas de prestation sur ce contrat !');
EDIT : En fait je n'ai pas mené de réflexion sur cette possibilité... pour moi, le plus simple au départ était un retour sur formulaire, mais depuis il s'est beaucoup compliqué, enrichi et du coup je constate les limites du retour !
30 sept. 2022 à 09:26
Je vais travailler là dessus, ça m'évitera bien des problèmes je pense :
Source : https://openweb.eu.org/articles/validation_formulaire
30 sept. 2022 à 09:31
Oui, ça peut être une solution..
Intercepter le "submit" du formulaire
Tester si les champs voulus sont remplis
Si oui, poursuivre le submit, si non.. bloquer le submit et avertir l'utilisateur qu'il manque des informations.
mais bon.. ça ne change rien quand au code que je t'ai fourni et le fait de gérer automatiquement tous les boutons au lieu d'écrire un code pour chaque clic...
30 sept. 2022 à 10:00
oulaaa...
Donc.. en jquery .each sert à boucler ( comme un forEACH en php)
Pour ce qui est chaine_contrat .. il faut, en javascript, cibler un élément ( via son id ou un attribut..)
par exemple, vu que tu fais du jquery,
tu pourrais utiliser :
et pour ce qui est de l'alert .. ben non.. ce n'est pas la seule possibilité ...
Tu peux remplacer l'alert par un message écrit dans un élément de ta page .. ou mettre le champ vide avec un fond de couleur rouge ... ou.. tout ce que tu veux d'autre...
2 oct. 2022 à 19:10
Je vais essayer effectivement autre chose que l'alert, ce sera plus sympa
Merci pour ces précisions et pour ton aide précieuse...