Récupérer et afficher input

**Talsaj** · 14/01/2019, 12h21

Bonjour à vous, vu le nombre de sujets qui parlent de ça vous allez croire que j'ai fait aucune recherche, mais pourtant j'en ai fait, ce que je veux faire est très simple, récupérer un input et l'afficher dans la console pour commencer serait très bien, mais je sais pas si je dois écouter le bouton d'envoi ou non etc, je vous montre le code de test qui ne marche pas. Merci à ceux qui prendront le temps de lire.

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
<html>
    <head>
        <meta charset="UTF-8">
 
    </head>
 
    <body>
        <script> 
 
                $("#submit").click(function() {
                    var valeur = document.getElementById("nom").value;
                    console.log(valeur); 
                })
            
 
        </script>
 
 
 
<form action="">
    <label>Nom </label> : <input id="nom" type="text"> <br/>
    <label>Prenom </label> : <input id="prenom" type="text">
    <a href=""><input value="Réserver" id="submit" type="submit" ></a>
  </form>
 
  </body>
  </html>

**SpaceFrog** · 14/01/2019, 13h56

Tu utilises JQuery ...
pourquoi continuer avec document.getElementById ?

A mon avis ton problème vient du fait que tu n'inhibe pas l'envoi du forom ...

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
$("#submit").click(function(e) {
                   e.preventDefault();
                    var valeur = $('#nom').val();
                    console.log(valeur); 
                })

**Talsaj** · 14/01/2019, 14h08

Merci pour ta réponse, je m'embrouille parfois entre javascript et jquery, mais ça ne marche toujours pas, voici le code actuel.

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
<html>
    <head>
        <meta charset="UTF-8">
        <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    </head>
 
    <body>
        <script> 
 
                $("#submit").click(function(e) {
                    e.preventDefault();
                    var valeur = $("#nom").val();
                    console.log(valeur); 
                })
            
 
        </script>
 
 
 
<form action="">
    <label>Nom </label> : <input id="nom" type="text"> <br/>
    <label>Prenom </label> : <input id="prenom" type="text">
    <a href=""><input value="Réserver" id="submit" type="submit" ></a>
  </form>
 
  </body>
  </html>

**SpaceFrog** · 14/01/2019, 14h19

si tu jetais un oeil en console ...

La condition pour pouvoir attribuer un event sur un element du DOM c'est qu'il soit instancié ...
Ce n'est pas le cas dasn ton code car le scritp est avant l'element dans ton code

Il faut donc soit placer ton script APRES l'élement dans le html
ou
mettre ton script dans un ready, qui ne s'exécutera que lorsque l'intégralité du DOM sera instancié ...

**Talsaj** · 14/01/2019, 14h21

En effet ça marche mieux, merci à toi et bonne journée.

Récupérer et afficher input

JavaScript

Vue hybride

Discussions similaires

Partager

Partager