Input type number

cs_Elberton Messages postés 25 Date d'inscription mercredi 20 août 2008 Statut Membre Dernière intervention 28 septembre 2019 - Modifié le 30 sept. 2019 à 13:41
 pinballWizard - 14 nov. 2019 à 09:44
Bonjour, j'ai un soucis avec un type number.
J'ai un formulaire avec des boutons radio.
En fonction de la radio choisi un autre champ apparait.

Le souci est que le 1er champs conges, la valeur du number est vide.
Alors que le second est bon.

Je pense avoir fait une erreur quelques part mais je ne trouve pas.
function ShowTab (E)
{
document.getElementById("tab1").style.display = (E == 1) ? 'block' : 'none';
document.getElementById("tab2").style.display = (E == 2) ? 'block' : 'none';
}



<html><head></head><body>

<form id="cet" action="conges.php" METHOD=POST ENCTYPE="multipart/form-data"  class="form-horizontal">

    
Sélectionner le compte à débiter:
<input type="radio" id="conges" name="compteadebiter" value="conges" onclick="ShowTab(1)"> <label for="conges">Conges</label>
<div id="tab1" align="right"style="display: none;">

  Nombre d'heure à transférer :<input type="number" form="cet" id="conges" name="nbtransfertconges" min="0" max="" step=""> 
</div>


<input type="radio" id="reliquat" name="compteadebiter" value="reliquat" onclick="ShowTab(2)"><label for="reliquat">Reliquat</label>
<div id="tab2" align="right"style="display: none;">
  
  
  

  Nombre d'heure à transférer :<input type="number" form="cet" name="nbtransfertconges" min="0" max="" step="">
</div>

    
<input type="hidden" name="usermod" value="" />
    <INPUT TYPE="submit" VALUE="Valider" style="width: 100px">
    </form></body></html>

1 réponse

Il semble que vous appelez deux éléments input de type number avec le même nom. Il faut savoir que lors de l'envoi des données vers le serveur, même si l'un des élément n'est pas affiché, il sera tout de même envoyé. Il y a donc un conflit de noms.
D'autre part, vous écrivez METHOD=POST, avec HTML5, il faut éviter d'écrire les valeurs d'attributs non encadrées par des guillemets.
0
Salut,
@JPRV6 :
_Euh non justement c'est depuis HTML5 que l'on peut s'en passer des guillemets dans les attributs il me semble. Ce qui est perturbant(et est l'erreur possible) c'est qu'il y ait les 2 notations, avec guillemets et sans guillemets dans le même élément...
_Quand au name c'est normal qu'il soient identiques pour plusieurs radio...sinon comment savoir qu'ils sont associés?

Par contre les balises label sont mal placées, elles ne doivent être placées avant et non après(et est manquante pour votre dernier champ affiché, le champ masqué on s'en fout je pense):
https://www.w3schools.com/tags/tag_label.asp

Pour l'erreur corriger en mettant soit sur tous les attributs des guillemets soit aucuns(ce qui est tout à fait valable depuis HTLM5).
Sans connaître ce que dit la console côté erreur je ne voit pas et n'ai pas le temps de tester le code, rajoutez quelque console.log pour vérifier le comportement est bien celui voulu.

édit: si ça marche pas en corrigeant le HTML essayez comme ceci:
document.getElementById("tab1").style.display = (parseInt(E) == 1) ? 'block' : 'none';
mais bon je ne vois pas pourquoi ça serais l'erreur vu que les 2 côté de la comparaison sont censés être des nombres.
édit2:mettez ça plutôt dans une règle de la balise style que directement dans la balise
style="display: none;
, peut-être un problème de priorité en tout cas plus propre et plus clair de ne pas utiliser l'attribut style sauf en dernier recours...
0
Rejoignez-nous