Récupérer et afficher input

Version imprimable

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:

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>

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:

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

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

Code:

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>

14/01/2019, 14h19
SpaceFrog

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é ...
14/01/2019, 14h21
Talsaj

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