Bouton radio au chargement de page et action AJAX

Résolu
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 - Modifié le 29 sept. 2022 à 22:35
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 - 2 oct. 2022 à 19:10

Bonsoir à tous,

J'ai un formulaire sur lequel j'ai deux INPUT (radio + checkbox) stylisés comme des boutons ON/OFF et leurs actions sont gérées par Javascript. J'ai un problème si je reviens en correction sur ce formulaire ! La partie php fonctionne bien, les variables de session les concernant contiennent bien les bonnes valeurs (testé avec un echo)...

On va déjà commencer par l' INPUT !
C'est une suite de boutons radio qui agissent, selon leur état sur un SELECT. Au retour sur le formulaire, le bouton qui avait été sélectionné est bien "allumé" par contre le SELECT ne voit rien !

Je ne sais pas comment faire pour qu'au chargement de la page, le SELECT tienne compte du choix qui avait été fait initialement avant validation du formulaire...

<div class="gite">
  <label for="gite">TYPE :</label>
  <input type="radio" id="village" name="batiment" class="bt-radio" value="1" <?php
if (isset($batiment) AND $batiment == 1){
    echo 'checked';
}?> required="required">
  <label for="village">VILLAGE</label>
  <input type="radio" id="jardin" name="batiment" class="bt-radio" value="2" <?php
if (isset($batiment) AND $batiment == 2){
    echo 'checked';
}?>>
  <label for="jardin">JARDIN</label>
  <input type="radio" id="chambre" name="batiment" class="bt-radio" value="5" <?php
if (isset($batiment) AND $batiment == 5){
    echo 'checked';
}?>>
  <label for="chambre">CHAMBRE</label>
  <input type="radio" id="repas" name="batiment" class="bt-radio" value="3" <?php
if (isset($batiment) AND $batiment == 3){
    echo 'checked';
}?>>
  <label for="repas">TABLE D'HÔTES</label>
</div>


... / ...

<select class="input-formulaire contrat-nom" name="gite" id="gite">
  <option value="" selected>Sélectionnez un type de contrat...</option>
</select>

Le Javascript qui gère le remplissage du SELECT agit SEULEMENT au clic du bouton radio : 

$(function(){
    $('#village').click(function() {
        if($('#village').is(':checked')){
            var ContratType = $(this).val();
            $.ajax({
                type:'POST',
                url:'prestations_data.php',
                data:'ContratType='+ContratType,

...etc

 Je pense qu'il faudrait au chargement de la page vérifier l'état des boutons radio et lancer l'instruction ajax qui interroge la bdd si un bouton est activé, mais je ne vois pas bien comment m'y prendre...

Merci d'avance pour vos lumières !
Linux / Chrome 106.0.0.0

3 réponses

emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
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 ?

1
jordane45 Messages postés 36880 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 31 janvier 2023 4 478
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 :

$("#id_de_l_element_a_verifier").val()

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...

1
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16 > jordane45 Messages postés 36880 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 31 janvier 2023
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...

0
jordane45 Messages postés 36880 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 31 janvier 2023 4 478
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.


.
Cordialement,
Jordane

0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
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 ! :-(

0
jordane45 Messages postés 36880 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 31 janvier 2023 4 478 > emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023
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.

0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
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 !

0
emrh Messages postés 427 Date d'inscription mardi 9 décembre 2014 Statut Membre Dernière intervention 16 janvier 2023 16
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

0
jordane45 Messages postés 36880 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 31 janvier 2023 4 478
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...

0