Forum : Changer valeur d'un input text

Réponse acceptée

OK donc tu vas d'abord devoir initialiser un tableau associatif dans ton JS avec en clé, le nom du pays et en valeur l'indicatif téléphonique du pays. Tu vas devoir écouter l'évènement javascript 'change' sur ton select. Lorsque cet évènement est appelé, tu peux lancer du code JS. Il te faudra donc récupérer la valeur de ton select, analyser dans ton tableau quel est l'indicatif correspondant et ensuite l'ajouter à ton input. Si tu utilises jQuery, il te faut regarder du côté de ces éléments :

http://api.jquery.com/on/
http://api.jquery.com/val/
http://api.jquery.com/text/

Maenhyr

Salut, quel sont les champs option de ton select ? Renvoient ils l'indicatif ou bien un id de pays ?

Immuane

Auteur

Salut. Ils renvoient le nom du pays

Immuane

Auteur

Merci pour ta réponse
J'ai fais :

<script type="text/javascript">
var indicatif = new Array();
indicatif[0] = "";
indicatif[1] = "+33";
indicatif[2] = "+41";
</script>

Et (en simplifiant):

<form name="formulaire">
<select name="pays" onChange="phone.value=indicatif[this.selectedIndex];">
<option value="">Choisir</option>
<option value="France">France</option>
<option value="Suisse">Suisse</option>
</select>
<input type="text" name="phone">
</form>

J'ai simplifié le code car le formulaire est assez long ...

Je ne sais pas si c'est ce que tu avais en tête mais ce petit bout de code fonctionne correctement.

Maenhyr

Je l'aurais écris différemment mais c'est vraiment l'esprit de ce que je t'avais proposé. Il y a toujours plusieurs façons de le coder. C'est pour cela que je ne t'ai pas donné directement ma réponse, c'est bien de comprendre comment faire, on progresse mieux.

Voici ma méthode, elle nécessite plus de code mais elle a l'avantage de décorréler la partie HTML du JS.

Partie HTML

<form name="formulaire">
    <select name="pays" id="pays">
        <option value="">Choisir</option>
        <option value="France">France</option>
        <option value="Suisse">Suisse</option>
    </select>
    <input type="text" name="phone" id="phone">
</form>

Partie JS

<script type="text/javascript">
jQuery(function( $ ) {
    var indicatifs = "", "+33", "+41", ...];

    $(document).on('change', '#pays', function(){
        $('#phone').val(indicatifs[this.selectedIndex]);
    });
});
</script>

L'avantage de cette méthode est que si tu changes ton code HTML, le JS n'est pas impacté. L'inconvénient c'est qu'il y a plus de code à écrire. J'ai utilisé jQuery car c'est une librairie très répandue mais elle n'est pas nécessaire dans ton cas. Seulement si tu l'utilises, ça peut être utile.

Il n'y a pas de méthode absolue, la mienne n'est pas forcément meilleure que la tienne, ça va dépendre du contexte. Si tu sais que ton code ne bougera pas, la tienne est plus simple donc mieux. Si tu penses que tu va modifier le comportement de ce formulaire, il vaut mieux opter pour un comportement moins dépendant du code HTML.

Immuane

Auteur

Merci pour ta réponse et explication c'est vrai qu'en cherchant un peu on trouve tout ce qu'on veut mais étant vraiment novice en JS je ne savais pas trop pas ou commencer. Et au final je me rend compte que c’était tout simple...
Je pense que je vais utiliser ta méthode mais il faudra que je l'adapte un peu pour pouvoir récupérer les indicatifs venant d'une base de données.

En tout cas merci pour le temps que tu as pris pour répondre ! :)

kimou

Bonjour
Je suis vraiment nul.
Est-ce que quelqu'un peut me donner plus de detail,comment faire au niveau de Jquerry pour la deuxième solution
merci.

Changer valeur d'un input text

7 réponses