Envoi partiel d'un formulaire selon un bouton radio

Version imprimable

1 pièce(s) jointe(s)

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.
Pièce jointe 602318

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:

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.

28/07/2021, 08h45
SpaceFrog

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

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:

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:

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:

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

Merci du coup de main, j'ai donc essayé mais sans succès :

Code:

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:

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.

28/07/2021, 15h24
NoSmoking

Citation:

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.
28/07/2021, 19h33
makimax

Désolé, mais je ne comprends vraiment pas. Je suis plus que noob...

La partie importante est celle-ci

Citation:

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:

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>

29/07/2021, 10h22
makimax

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 !
29/07/2021, 10h47
SpaceFrog

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

Citation:

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:

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 ;)