IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

Envoi partiel d'un formulaire selon un bouton radio


Sujet :

JavaScript

  1. #1
    Nouveau membre du Club
    Homme Profil pro
    Dessinateur industriel
    Inscrit en
    février 2021
    Messages
    80
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Dessinateur industriel
    Secteur : Industrie

    Informations forums :
    Inscription : février 2021
    Messages : 80
    Points : 31
    Points
    31
    Par défaut Envoi partiel d'un formulaire selon un bouton radio
    Bonjour,
    J'ai un formulaire simple mais je souhaite récupérer dans l'URL un seul paramètre (dev_id ou grp_id) qui correspond au choix.
    Nom : Envoi sélection en formulaire.png
Affichages : 80
Taille : 3,6 Ko

    Exemples :
    Si le bouton radio est sur les Devices et que le choix est le device 12, j'aimerai avoir en URL uniquement ?dev_id=12Si le bouton radio est sur les Groupes et que le choix est le groupe 21, j'aimerai avoir en URL uniquement ?grp_id=21Je ne veux pas avoir ?choix=dev&dev_id=12&grp_id=21Et cerise sur le gâteau si le Select qui n'est pas sélectionné par le bouton radio soit Disable en temps réel.


    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    <!doctype html>
    <html lang="fr">
    <head>
      <meta charset="utf-8">
      <title>Test</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
     
    <?php
    $choix = isset($_GET['choix']) ? $_GET['choix'] : NULL;
    $dev_id = isset($_GET['dev_id']) ? $_GET['dev_id'] : NULL;
    $grp_id = isset($_GET['grp_id']) ? $_GET['grp_id'] : NULL;
    ?>
     
    <form>
        <input type="radio" name="choix" value="dev" <?php echo ('dev' !== $choix) ? "" : "checked";?>>
        <select name="dev_id">
            <option <?php if($choix == 11) { ?> selected="selected" <?php } ?> value="11">Device 11</option>
            <option <?php if($choix == 12) { ?> selected="selected" <?php } ?> value="12">Device 12</option>
            <option <?php if($choix == 13) { ?> selected="selected" <?php } ?> value="13">Device 13</option>
        </select>
        <input type="radio" name="choix" value="grp" <?php echo ('grp' !== $choix) ? "" : "checked";?>>
        <select name="grp_id">
            <option <?php if($choix == 21) { ?> selected="selected" <?php } ?> value="21">Groupe 21</option>
            <option <?php if($choix == 22) { ?> selected="selected" <?php } ?> value="22">Groupe 22</option>
        </select>
        <input type="submit">
    </form>
     
    </body>
    </html>

    Je ne sais pas si je poste dans la bonne section. Merci de votre aide.

  2. #2
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 935
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 935
    Points : 65 295
    Points
    65 295
    Billets dans le blog
    1
    Par défaut
    Ma première idée serait sur le change du select de modifier le value du bouton radio coché ...

    Si par contre tu veux vraiment supprimer les data inutiles de l'url get, il faudra passer par le onsubmit du form pour mettre un attribut disabled sur les éléments du form que tu ne veux pas voir dans l'url, ou directement les supprimer ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  3. #3
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 495
    Points : 38 863
    Points
    38 863
    Par défaut
    Bonjour,
    Citation Envoyé par SpaceFrog
    Ma première idée serait sur le change du select de modifier le value du bouton radio coché ...
    je suis bien d'accord !

    Néanmoins dans ce cas j'opterais pour une autre approche en traitant les données côté serveur, donc sans JavaScript.

    Pour ce faire je modifierais les value des <input> pour les faire correspondre aux name des <select> :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    <input type="radio" name="choix" value="dev_id">
    <select name="dev_id">
      <option></option>
      <option></option>
      <option></option>
    </select>
    ensuite côté serveur, lecture du choix et affectation des données, quelque chose comme :
    Code php : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    <?php
    $choix = isset($_GET["choix"]) ? $_GET["choix"] : null;
    $dev_id = "";
    $grp_id = "";
     
    if ($choix) {
      // contient dev_id ou grp_id
      if ($choix == "dev_id") {
        $dev_id = $_GET["dev_id"];
      }
      elseif ($choix == "grp_id") {
        $grp_id = $_GET["grp_id"];
      }
    }
    ?>
    puis génération du code HTML, quelque chose comme :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    <input type="radio" name="choix" value="dev_id" <?php echo $dev_id ? "checked" : "";?>>  
    <select name="dev_id">
      <option <?php if($dev_id == 11) { ?> selected="selected" <?php } ?> value="11">Device 11</option>
      <option <?php if($dev_id == 12) { ?> selected="selected" <?php } ?> value="12">Device 12</option>
      <option <?php if($dev_id == 13) { ?> selected="selected" <?php } ?> value="13">Device 13</option>
    </select>
    <input type="radio" name="choix" value="grp_id" <?php echo $grp_id ? "checked" : "";?>>
    <select name="grp_id">
      <option <?php if($grp_id == 21) { ?> selected="selected" <?php } ?> value="21">Groupe 21</option>
      <option <?php if($grp_id == 22) { ?> selected="selected" <?php } ?> value="22">Groupe 22</option>
    </select>
    mais on a surement pas tout le contexte côté serveur. !!

  4. #4
    Nouveau membre du Club
    Homme Profil pro
    Dessinateur industriel
    Inscrit en
    février 2021
    Messages
    80
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Dessinateur industriel
    Secteur : Industrie

    Informations forums :
    Inscription : février 2021
    Messages : 80
    Points : 31
    Points
    31
    Par défaut
    Merci du coup de main, j'ai donc essayé mais sans succès :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    <!doctype html>
    <html lang="fr">
    <head>
      <meta charset="utf-8">
      <title>Test</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
     
    <?php
    $choix = isset($_GET["choix"]) ? $_GET["choix"] : null;
    $dev_id = "";
    $grp_id = "";
     
    if ($choix) {
      // contient dev_id ou grp_id
      if ($choix == "dev_id") {
        $dev_id = $_GET["dev_id"];
      }
      elseif ($choix == "grp_id") {
        $grp_id = $_GET["grp_id"];
      }
    }
    ?>
     
    <form>
        <input type="radio" name="choix" value="dev_id" <?php echo ('dev' !== $choix) ? "" : "checked";?>>
        <select name="dev_id">
            <option <?php if($choix == 11) { ?> selected="selected" <?php } ?> value="11">Device 11</option>
            <option <?php if($choix == 12) { ?> selected="selected" <?php } ?> value="12">Device 12</option>
            <option <?php if($choix == 13) { ?> selected="selected" <?php } ?> value="13">Device 13</option>
        </select>
        <input type="radio" name="choix" value="grp_id" <?php echo ('grp' !== $choix) ? "" : "checked";?>>
        <select name="grp_id">
            <option <?php if($choix == 21) { ?> selected="selected" <?php } ?> value="21">Groupe 21</option>
            <option <?php if($choix == 22) { ?> selected="selected" <?php } ?> value="22">Groupe 22</option>
        </select>
        <input type="submit">
    </form>
     
    </body>
    </html>

    J'ai trouvé un scrip qui désactive le Select opposé donc il ne se retrouve pas dans l'URL. Il reste l'info du bouton radio mais le plus important était de ne pas avoir les deux infos de Select en même temps.

    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    41
    42
    43
    44
    45
    46
    47
    <!doctype html>
    <html lang="fr">
    <head>
      <meta charset="utf-8">
      <title>Test</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
     
    <?php
    $choix = isset($_GET['choix']) ? $_GET['choix'] : NULL;
    $dev_id = isset($_GET['dev_id']) ? $_GET['dev_id'] : NULL;
    $grp_id = isset($_GET['grp_id']) ? $_GET['grp_id'] : NULL;
    ?>
     
    <script type="text/javascript">
        function EnableDisableSelectBox() {
            var chkDev = document.getElementById("chkDev");
            var selectGrp = document.getElementById("selectGrp");
            selectDev.disabled = chkDev.checked ? false : true;
            selectGrp.disabled = chkGrp.checked ? false : true;
            if (!selectGrp.disabled) {
                selectGrp.focus();
            }
            if (!selectDev.disabled) {
                selectDev.focus();
            }
        }
    </script>
    <form>
        <input type="radio" name="choix" id="chkDev" value="dev" <?php echo ('dev' !== $choix) ? "" : "checked";?> onclick="EnableDisableSelectBox()" />
        <select name="dev_id" id="selectDev">
            <option <?php if($choix == 11) { ?> selected="selected" <?php } ?> value="11">Device 11</option>
            <option <?php if($choix == 12) { ?> selected="selected" <?php } ?> value="12">Device 12</option>
            <option <?php if($choix == 13) { ?> selected="selected" <?php } ?> value="13">Device 13</option>
        </select>
        <input type="radio" name="choix" id="chkGrp" value="grp" <?php echo ('grp' !== $choix) ? "" : "checked";?>  onclick="EnableDisableSelectBox()" />
        <select name="grp_id" id="selectGrp">
            <option <?php if($choix == 21) { ?> selected="selected" <?php } ?> value="21">Groupe 21</option>
            <option <?php if($choix == 22) { ?> selected="selected" <?php } ?> value="22">Groupe 22</option>
        </select>
        <input type="submit">
    </form>
     
     
    </body>
    </html>

    Je bascule donc sur résolu.
    Je vais aussi regardé la piste des librairies de SelectPicker (je découvre le code) pour peut être n'avoir qu'un seul Select.

  5. #5
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 495
    Points : 38 863
    Points
    38 863
    Par défaut
    Merci du coup de main, j'ai donc essayé mais sans succès :
    simplement car tu n'as pas pris en compte la modification du code HTML et que tu continues d'utiliser $choix pour tes tests.

  6. #6
    Nouveau membre du Club
    Homme Profil pro
    Dessinateur industriel
    Inscrit en
    février 2021
    Messages
    80
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Dessinateur industriel
    Secteur : Industrie

    Informations forums :
    Inscription : février 2021
    Messages : 80
    Points : 31
    Points
    31
    Par défaut
    Désolé, mais je ne comprends vraiment pas. Je suis plus que noob...

  7. #7
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 495
    Points : 38 863
    Points
    38 863
    Par défaut
    La partie importante est celle-ci
    Pour ce faire je modifierais les value des <input> pour les faire correspondre aux name des <select> :
    qui entraine une gestion de l'affichage différente de ce que tu fais, au final ton code devrait être :
    Code html : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    39
    40
    <!doctype html>
    <html lang="fr">
    <head>
      <meta charset="utf-8">
      <title>Test</title>
      <link rel="stylesheet" href="style.css">
    </head>
    <body>
    <?php
    $choix = isset($_GET["choix"]) ? $_GET["choix"] : null;
    $dev_id = "";
    $grp_id = "";
     
    if ($choix) {
      // contient dev_id ou grp_id
      if ($choix == "dev_id") {
        $dev_id = $_GET["dev_id"];
      } elseif ($choix == "grp_id") {
        $grp_id = $_GET["grp_id"];
      }
    }
    ?>
    <form>
      <!-- c'est ici que cela change -->
      <input type="radio" name="choix" value="dev_id" <?php echo $dev_id ? "checked" : "";?>>
      <select name="dev_id">
        <option <?php if($dev_id == 11) { ?> selected="selected" <?php } ?> value="11">Device 11</option>
        <option <?php if($dev_id == 12) { ?> selected="selected" <?php } ?> value="12">Device 12</option>
        <option <?php if($dev_id == 13) { ?> selected="selected" <?php } ?> value="13">Device 13</option>
      </select>
      <input type="radio" name="choix" value="grp_id" <?php echo $grp_id ? "checked" : "";?>>
      <select name="grp_id">
        <option <?php if($grp_id == 21) { ?> selected="selected" <?php } ?> value="21">Groupe 21</option>
        <option <?php if($grp_id == 22) { ?> selected="selected" <?php } ?> value="22">Groupe 22</option>
      </select>
      <!-- fin du changement -->
      <input type="submit">
    </form>
    </body>
    </html>

  8. #8
    Nouveau membre du Club
    Homme Profil pro
    Dessinateur industriel
    Inscrit en
    février 2021
    Messages
    80
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Ille et Vilaine (Bretagne)

    Informations professionnelles :
    Activité : Dessinateur industriel
    Secteur : Industrie

    Informations forums :
    Inscription : février 2021
    Messages : 80
    Points : 31
    Points
    31
    Par défaut
    Merci NoSmoking mais j'ai toujours les 3 paramètres dans l'URL, mon souhait est de n'avoir que celui du select retenu car c'est bien soit l'un, soit l'autre.
    J'ai tenté d'ajouter des "disabled" sur les select mais forcément cela n'est pas dynamique et donc ne fonctionne pas non plus.
    Peut-être pas possible sans javascript.
    Merci du coup de main dans tous les cas !

  9. #9
    Rédacteur/Modérateur

    Avatar de SpaceFrog
    Homme Profil pro
    Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Inscrit en
    mars 2002
    Messages
    38 935
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 71
    Localisation : Royaume-Uni

    Informations professionnelles :
    Activité : Développeur Web Php Mysql Html Javascript CSS Apache - Intégrateur - Bidouilleur SharePoint
    Secteur : Industrie

    Informations forums :
    Inscription : mars 2002
    Messages : 38 935
    Points : 65 295
    Points
    65 295
    Billets dans le blog
    1
    Par défaut
    Tu peux alors inhiber le submit, concatener toi même l'url en get et en faire un self.location.href, tu maitrisera ainsi l'url ...
    Ma page Developpez - Mon Blog Developpez
    Président du CCMPTP (Comité Contre le Mot "Problème" dans les Titres de Posts)
    Deux règles du succès: 1) Ne communiquez jamais à quelqu'un tout votre savoir...
    Votre post est résolu ? Alors n'oubliez pas le Tag

    Venez sur le Chat de Développez !

    réalisations :www.oxygen-translations.fr|www.saftair.fr| www.ouestisol.fr | www.sistac-alizay.fr | www.acoustishop.fr | www.litt.fr | www.ouestventil.fr
    Humour

  10. #10
    Modérateur

    Avatar de NoSmoking
    Homme Profil pro
    Inscrit en
    janvier 2011
    Messages
    15 495
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : France, Isère (Rhône Alpes)

    Informations forums :
    Inscription : janvier 2011
    Messages : 15 495
    Points : 38 863
    Points
    38 863
    Par défaut
    mon souhait est de n'avoir que celui du select retenu car c'est bien soit l'un, soit l'autre.
    même si je n'en voie pas franchement l'intérêt car « ce qui est simple doit rester simple ! ».

    Pour une telle réalisation tu devras effectivement passer par du JavaScript, je te propose donc ce script à ajouter en fin du code HTML, celui que je t'ai fourni
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    <script>
    function disableSelect() {
      const oSelect = document.querySelectorAll("select");
      oSelect.forEach((el) => {
        el.disabled = !el.previousElementSibling.checked;
      });
    }
    // ajout événement sur les « radio »
    const oChoix = document.querySelectorAll("[name='choix']");
    oChoix.forEach((el) => {
      el.addEventListener( "click", () => {
        disableSelect();
        el.nextElementSibling.removeAttribute("disabled");
      });
    });
    // mise à jour à l'ouverture
    disableSelect();
    </script>
    pas plus de commentaire que cela, si tu as des questions n'hésite pas

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. Afficher/cacher une liste selon des boutons radios
    Par Machin3000 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 21/01/2008, 18h26
  2. action de formulaire selon le bouton radio?
    Par anis_el_madani dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 17/05/2007, 10h00
  3. Formulaire dynamique et bouton radio
    Par Analfabete dans le forum Général JavaScript
    Réponses: 4
    Dernier message: 05/01/2007, 20h56
  4. Réponses: 3
    Dernier message: 09/08/2006, 08h25
  5. executer un fct selon le bouton radio
    Par BigBarbare dans le forum Général JavaScript
    Réponses: 1
    Dernier message: 16/06/2006, 10h50

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo