Envoi partiel d'un formulaire selon un bouton radio

**makimax** · 27/07/2021, 23h33

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 : 143
Taille : 3,6 Ko

Nom : Envoi sélection en formulaire.png
Affichages : 143
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.

**SpaceFrog** · 28/07/2021, 08h45

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

**NoSmoking** · 28/07/2021, 11h01

Bonjour,

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

**makimax** · 28/07/2021, 14h48

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.

**NoSmoking** · 28/07/2021, 15h24

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.

**makimax** · 28/07/2021, 19h33

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

**NoSmoking** · 29/07/2021, 08h46

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>

**makimax** · 29/07/2021, 10h22

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 !

**SpaceFrog** · 29/07/2021, 10h47

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

**NoSmoking** · 29/07/2021, 15h22

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

Envoi partiel d'un formulaire selon un bouton radio

JavaScript

Discussions similaires

Partager

Partager