Bonjour,
Je voudrais savoir comment réaliser un système pour Formulaire, quand on à rien écrit dans le textarea ou input, le bouton <submit> n'est pas cliquable.
Merci de votre aide

Salut,

Tu peux faire une fonction qui va vérifier si l'input est remplit (avec if(document.getElementById('test').value != "") par exemple).
Si tel est le cas, alors tu changes l'attribut du bouton submit (avec document.getElementById('monSubmit').disabled = false).

Oui mais c'est exactement le code ou il faut le modifier car je suis nul en JS

Petit exemple rapide :

<script type="text/javascript">
function verifInput(id, idSubmit) {
	if(document.getElementById(id).value != "")
		document.getElementById(idSubmit).disabled = false;
}
</script>

<form name="test" action="check.php" method="post">
	<input type="text" id="inputTest" onchange="verifInput(this.id, 'btnSubmit');" />
	<input type="submit" name="btnSub" disabled="true" id="btnSubmit" />
</form>

Merci

Est-ce que ça fonctionne avec plusieurs input ?

Qu'entends-tu par plusieurs input ?
En désactiver plusieurs à la fois, ou appliquer cette "technique" à d'autre input ?

tu avait sa sinon
http://www.editeurjavascript.com/scrip [...] res_2_185.php

Je veux dire, tant que trois input n'ont pas été remplis, on ne peut pas cliquer

Citation : tilimac

tu avait sa sinon
http://www.editeurjavascript.com/scrip [...] res_2_185.php

Yuck, c'est moche !
Je ne détaillerais pas, voir le tutoriel sur les bonnes pratiques en javascript.

Pour ce qui est de ton besoin, saches que tu ne pourras pas obliger l'utilisateur à le faire et qu'un utilisateur sans javascript pourra passer sans les cocher. Il faut donc une vérification côté serveur pas la suite.

Enfin, je te conseil de mettre une class "needed" à tes éléments et de vérifier avec une boucle que tous les éléments ayant cette class sont cochés.
https://developer.mozilla.org/En/DOM/d [...] tsByClassName
Par contre elle n'est pas par défaut sur tous les navigateur donc il faut la recoder si elle n'existe pas.

if (!document.getElementsByClassName){
  document.getElementsByClassName = function(){
    // une implémentation de la fonction
  }
}

Bonjour à tous,

Je remonte le sujet car j'ai la même problématique pour un champ de recherche (j'aimerais que le bouton ne soit pas actif si l'utilisateur n'a rien rentré dans le champ).

J'ai testé cette solution donnée plus haut qui me semblait être idéale :

Citation : DjLeChuck

Petit exemple rapide :

<script type="text/javascript">
function verifInput(id, idSubmit) {
	if(document.getElementById(id).value != "")
		document.getElementById(idSubmit).disabled = false;
}
</script>

<form name="test" action="check.php" method="post">
	<input type="text" id="inputTest" onchange="verifInput(this.id, 'btnSubmit');" />
	<input type="submit" name="btnSub" disabled="true" id="btnSubmit" />
</form>

Sauf que d'après mes tests, le bouton reste désactivé que le champ texte soit rempli ou non.

A priori, au chargement de la page il est désactivé (disabled=true), mais la condition value != "" ne semble pas s'effectuer avec le onchange. Du coup le bouton n'est jamais activé (disabled=false). Pour être certain, j'ai fais un copier-coller de ce code : vous verrez que le bouton Envoyer ne s'active jamais...

Faut-il une adaptation de ce code ou avez-vous une autre idée ?

Il faut faire un :
onKeyPress= ou onPressKey= (un truc du genre XD) au lieu de onchange.
Parce que le onchange c'est plutôt pour un select

EDIT : Essaye en mettant disabled="disabled" dans le submit et disabled="" dans la fonction JS

onblur="tafonction();"

Je n'ai pas eu le temps d'aller fouiller du coté de onblur mais merci pour la suggestion.

Merci aussi pour la solution du disabled="disabled" et du onkeypress car cela fonctionne pour ce dont j'ai besoin avec un petit effet non dérangeant :

<?php
<script type="text/javascript">
function verifInput(id, idSubmit) {
	if(document.getElementById(id).value != "")
		document.getElementById(idSubmit).disabled = "";
}
</script>

<form name="test" action="check.php" method="post">
	<input type="text" id="inputTest" onkeypress="verifInput(this.id, 'btnSubmit');" />
	<input type="submit" name="btnSub" disabled="disabled" id="btnSubmit" />
</form>
?>

Le petit effet dont je parle c'est que ça reste désactivé en rentrant un seul caractère, ça ne s'active qu'à partir du second. Bon en même temps ça m'arrange parce que lancer une recherche avec 1 caractère c'est pas une bonne idée.

Passe en onBlur

Tu peux mettre onkeyup sinon

Ah bin effectivement avec le onkeyup ça marche nickel

Promis, dès que j'ai le temps j'irai essayer de comprendre quelque chose à onblur

onblur = lorsqu'on perd le focus
edit: tiens, au passage, est-ce que l'auteur peut passer en résolu ? enfin si c'est bon =)

Ouais c'est fait