Pb désactivation de champs de formulaire

11 septembre 2019 à 13:48:56

Bonjour,

j'ai un formulaire qui affiche un tableau dont les lignes sont reproduites par une boucle :

<?php 
$i=0;
$nb_lignes=10;
?>

<form action="insert.php" method="POST" enctype="multipart/form-data" name="form1" id="form1">
<table cellspacing="5" width="100%">
        <thead>
            <tr>
                <th>Date</th>
                <th>Objet</th>
                <th>Lieu(x)</th>
                <th>N° Dossier(s)</th>
				<th>Nb Km</th>
                <th>Nb Repas</th>
                <th>Autres frais</th>
            </tr>
        </thead>
		<tbody>

<?php for ($i=0; $i<$nb_lignes; $i++) { ?>
			<tr style="font-size:13px; color:#666;">
				<td> <input type="text" size="8" class="datepicker" id="datepicker<?php echo $i; ?>" name="date_frais<?php echo $i; ?>" placeholder="Date"></td>
				<td> <input type="radio" id="tsb<?php echo $i; ?>" name="objet_frais<?php echo $i; ?>" value="bureau" checked> Bureau</br>
				<input type="radio" id="dep" name="objet_frais<?php echo $i; ?>" value="déplacement"> Déplacement</td>
				<td> <input type="text" size="20" id="lieu" name="lieu<?php echo $i; ?>" placeholder="Commune"></td>
				<td> <input type="text" size="15" id="num_dossier" name="num_dossier<?php echo $i; ?>" placeholder="N° de dossier"></td>
				<td> <input type="text" size="3" id="nb_km" name="nb_km<?php echo $i; ?>" placeholder="Nb"></td>
				<td> <input type="text" size="1" id="nb_repas" name="nb_repas<?php echo $i; ?>" placeholder="Nb"></td>
				<td> <input type="text" size="5" id="frais_div" name="frais_div<?php echo $i; ?>" placeholder="montant"></td>
			</tr>
			<?php } ?>
		</tbody>
    </table>
<input type="hidden" id="nb_lignes" name="nb_lignes" value="<?php echo $nb_lignes;?>" />
<p align="right"><input type="submit" name="Submit" id="fermer" value="" /></p>
</form>

Je souhaite que lorsque le bouton radio "objet_frais" est sélectionné sur "Bureau", les champs 'lieu', 'nb_km' ,'nb_repas' soit désactivés.

J'ai trouvé un script pour cela, mais je dois mal m'y prendre dans son intégration car il n'a aucun effet.

//DATEPICKER

jQuery(document).ready(function(){
	jQuery(function() {
	jQuery('input').filter('.datepicker').datepicker({minDate: new Date('<?php echo date('Y').'-'.$mois_sel; ?>'), stepMonths: 1});
	});
});

//CHAMPS DISABLED

var form1_inputs = ['lieu','nb_km','nb_repas'];
document.body.onload = function(){
document.getElementById('bureau').onclick = function() {
   if (this.checked) {
         for(var i in form1_inputs){
           if(document.querySelectorAll("input[name='" + form1_inputs[i] + "']").length > 1){
             var radios = document.querySelectorAll("input[name='" + form1_inputs[i] + "']");
             for(var j in radios){
               if(typeof radios[j].setAttribute === 'function'){
                 radios[j].checked = false;
                 radios[j].setAttribute("disabled", "");
               }
             }
           }
           document.querySelector("input[name='" + form1_inputs[i] + "']").value = "";
           document.querySelector("input[name='" + form1_inputs[i] + "']").setAttribute("disabled", "");
       }
   }
};
  
document.getElementById('deplacement').onclick = function() {
         for(var i in form1_inputs){
           if(document.querySelectorAll("input[name='" + form1_inputs[i] + "']").length > 1){
             var radios = document.querySelectorAll("input[name='" + form1_inputs[i] + "']");
             for(var j in radios){
               if(typeof radios[j].setAttribute === 'function'){
                 radios[j].checked = false;
                 radios[j].removeAttribute("disabled");
               }
             }
           }
           document.querySelector("input[name='" + form1_inputs[i] + "']").removeAttribute("disabled");
       }
};
};

Auriez-vous une idée ?

Merci pour l'aide

lindadu01

11 septembre 2019 à 15:39:44

BOnjour, ton erreur vient de là :

<input type="radio" id="tsb<?php echo $i; ?>" name="objet_frais<?php echo $i; ?>" value="bureau" checked> Bureau</br>

et de là:

document.getElementById('bureau').onclick = function() {

Ton radio bouton n'a pas pour id 'bureau' mais "tsbx" et à pour valeur "bureau", donc il faut soit que tu change l'id de ton bouton soit que tu puisse récupérer le bouton de type radio ayant pour valeur bureau, je sais pas si c'est possible par contre

Parfois, arrêter 5 minutes son développement permet de mieux repartir face à un problème ;)

LC9

11 septembre 2019 à 16:51:50

Bonjour et merci pour la réponse,

en effet, j'avais laissé d'anciens id pour les boutons radio. J'ai donc rectifié ainsi :

<?php 
$i=0;
$nb_lignes=10;
?>

<form action="insert.php" method="POST" enctype="multipart/form-data" name="form1" id="form1">
<table cellspacing="5" width="100%">
        <thead>
            <tr>
                <th>Date</th>
                <th>Objet</th>
                <th>Lieu(x)</th>
                <th>N° Dossier(s)</th>
				<th>Nb Km</th>
                <th>Nb Repas</th>
                <th>Autres frais</th>
            </tr>
        </thead>
		<tbody>

<?php for ($i=0; $i<$nb_lignes; $i++) { ?>
			<tr style="font-size:13px; color:#666;">
				<td> <input type="text" size="8" class="datepicker" id="datepicker<?php echo $i; ?>" name="date_frais<?php echo $i; ?>" placeholder="Date"></td>
				<td> <input type="radio" id="bureau<?php echo $i; ?>" name="objet_frais<?php echo $i; ?>" value="bureau" checked> Bureau</br>
				<input type="radio" id="deplacement<?php echo $i; ?>" name="objet_frais<?php echo $i; ?>" value="déplacement"> Déplacement</td>
				<td> <input type="text" size="20" id="lieu" name="lieu<?php echo $i; ?>" placeholder="Commune"></td>
				<td> <input type="text" size="15" id="num_dossier" name="num_dossier<?php echo $i; ?>" placeholder="N° de dossier"></td>
				<td> <input type="text" size="3" id="nb_km" name="nb_km<?php echo $i; ?>" placeholder="Nb"></td>
				<td> <input type="text" size="1" id="nb_repas" name="nb_repas<?php echo $i; ?>" placeholder="Nb"></td>
				<td> <input type="text" size="5" id="frais_div" name="frais_div<?php echo $i; ?>" placeholder="montant"></td>
			</tr>
			<?php } ?>
		</tbody>
    </table>
<input type="hidden" id="nb_lignes" name="nb_lignes" value="<?php echo $nb_lignes;?>" />
<p align="right"><input type="submit" name="Submit" id="fermer" value="" /></p>
</form>

Et j'ai rajouté un if dans le javascript qui semblait manquer pour l'id 'deplacement'.

//CHAMPS DISABLED

var form1_inputs = ['lieu','nb_km','nb_repas'];
document.body.onload = function(){
document.getElementById('bureau').onclick = function() {
   if (this.checked) {
         for(var i in form1_inputs){
           if(document.querySelectorAll("input[name='" + form1_inputs[i] + "']").length > 1){
             var radios = document.querySelectorAll("input[name='" + form1_inputs[i] + "']");
             for(var j in radios){
               if(typeof radios[j].setAttribute === 'function'){
                 radios[j].checked = false;
                 radios[j].setAttribute("disabled", "");
               }
             }
           }
           document.querySelector("input[name='" + form1_inputs[i] + "']").value = "";
           document.querySelector("input[name='" + form1_inputs[i] + "']").setAttribute("disabled", "");
       }
   }
};
  
document.getElementById('deplacement').onclick = function() {
	if (this.checked) {
         for(var i in form1_inputs){
           if(document.querySelectorAll("input[name='" + form1_inputs[i] + "']").length > 1){
             var radios = document.querySelectorAll("input[name='" + form1_inputs[i] + "']");
             for(var j in radios){
               if(typeof radios[j].setAttribute === 'function'){
                 radios[j].checked = false;
                 radios[j].removeAttribute("disabled");
               }
             }
           }
           document.querySelector("input[name='" + form1_inputs[i] + "']").removeAttribute("disabled");
       }
    }
};
};

Malheureusement, ça ne fonctionne toujours pas et j'ai du mal à trouver ce qui ne va pas...

D'autres idées ?

Merci

lindadu01

13 septembre 2019 à 16:54:39

BOnjour

Cela reste normal dans la mesure ou il n'y a pas d'élément avec un ID "bureau", vos ID sont de la forme "bureauX", "bureauY" etc...

Il faudrait faire une boucle pour avoir :

document.getElementById('bureau' & i).onclick = function() {

avec i variant de 1 à x

Parfois, arrêter 5 minutes son développement permet de mieux repartir face à un problème ;)