Récupérer un champ input avec AJAX

Version imprimable

Bonjour,
après quelques tentative je n'arrive pas à récupèrer la valeur de mon champ input :

Code:

<input type="text" name="firstname" class="form-control" id="firstname" required>

à l'aide d'une requette ajax j'ai un fichier index.php qui contient mon formulaire et à la suite j'ai une balise <script></script> où j'effectue ma requette AJAx
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 <script> // var firstname = document.getElementById("firstname").value; $('.form-group').blur(function() { var firstname = $(this).attr('value'); $.ajax({ type: "POST", url: "script.php", data: {'firstname':firstname}, success: function(msg){ alert(msg); } }); }); </script>
Merci d'avance

20/03/2016, 10h25
NoSmoking

Bonjour,
~~ne s’agirait-il pas plutôt de $('.form-group').blur(function() ?~~
ne s’agirait-il pas plutôt de $('.form-control').blur(function() ?

Tant qu'à faire autant récupérer la valeur via var firstname = $(this).val();.
20/03/2016, 15h35
SplitX26

Merci pour ta réponse.
Cependant lorsque j'appuie sur le bouton :

Code:

<input type="submit" class="btn btn-primary" value= "Ok">

La valeur firstname du champ n'est pas récupèré.
J'ai dans mon script.php :
$firstname=$_POST['firstname'];

De plus quand je tape firstname dans la console pour voir ça valeur voici ce qu'il me retourne :

Code:

<input type="text" name="firstname" class="form-control" id="firstname" required="">
20/03/2016, 20h36
SplitX26

Citation:

Envoyé par NoSmoking

Bonjour,
ne s’agirait-il pas plutôt de $('.form-group').blur(function() ?

[/C].

Quand t'a cette phrase je ne l'ai pas compris c'est exactement ce que j'ai mis non ?
20/03/2016, 22h02
NoSmoking

Citation:

...c'est exactement ce que j'ai mis non ?

:oops: je me suis planté je voulais mettre $('.form-control').blur(function() !!! (c'est corrigé)

Ce que je ne comprends pas c'est :
- est ce que tu soumets ton formulaire (bouton submit), dans ce cas le formulaire doit avoir une method="POST",
ou
- est ce que tu fais exclusivement de l'Ajax

Voici le code de ma page index.php :

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
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
 
    <title>Boostrap</title>
 
 
    <script src="js/script.js"></script>
    <link href="css/bootstrap.min.css" rel="stylesheet">
 
  </head>
  <body>
 
    <div class="container-fluid">
	<div class="row">
		<div class="col-md-12">
 
      <div id="alert" class="alert alert-success"  >module fermé par <?php echo $firstname; ?>   !</div>
 
			<div class="jumbotron">
				<h1>
					Titre Website
				</h1>
				<p>
				Zone de text 1
        <!-- Modal -->
        <p>
           <button type="button" class="btn btn-primary" data-toggle="modal" data-target="#myModal">Learn more</button>
        </p>
           <div class="modal fade" id="myModal" role="dialog">
             <div class="modal-dialog">
 
               <div class="modal-content">
                 <div class="modal-header">
                   <button type="button" class="close" data-dismiss="modal">&times;</button>
                   <h4 class="modal-title">Modal Header</h4>
                 </div>
                 <div class="modal-body">
                   <p>When you click on the 'Ok' button it should be display a message with your first name in the top of page</p>
                   <form method="post" id="form" class="form-group" action='index.php'>
 
 
                    <label  for="usr">Firstname:</label>
 
                    <input type="text" name="firstname" class="form-control" id="firstname" required>
 
                 </div>
                 <div class="modal-footer">
                   <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                   <input type="submit" class="btn btn-primary" onClick="show();" value= "Ok">
 
                 </form>
 
                 </div>
               </div>
 
             </div>
           </div>
			</div>
		</div>
	</div>
  <div class="row">
 
<div class="col-xs-6 col-sm-3">Block 1</div>
<div class="col-xs-6 col-sm-3">Block 2</div>
<div class="col-xs-6 col-sm-3">Block 3</div>
<div class="col-xs-6 col-sm-3">Block 4</div>
 
 
</div>
</div>
 
    <script src="js/bootstrap.min.js"></script>
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
    <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
    <script>
//    var firstname = document.getElementById("firstname").value;
$('.form-group').blur(function()
{
 var firstname = $(this).val();
 $.ajax({
   type: "POST",
   url: "script.php",
   data: {'firstname':firstname},
   success: function(msg){
     alert(msg);
 
   }
 });
});    </script>
 
 
  </body>
</html>

21/03/2016, 11h45
mathieu

est ce que vous pourriez répondre aux questions de NoSmoking parce qu'on ne sait pas ce que vous voulez faire.
expliquez ce que vous obtenez avec le code actuel et ce que vous souhaitez avoir comme résultat
21/03/2016, 13h56
NoSmoking

Code:

$('.form-group')

se réfère à la <form> et une <form> ne prend pas le focus, contrairement à c'est élément <input>, <textarea>etc... ...donc elle ne peut pas le perdre ;)

Code:

$(this).val();

se réfère également à la <form> et une <form> n'a pas de propriété value, contrairement à ...(voir ci dessus pour la suite)
21/03/2016, 20h38
SplitX26

je souhaite tout simplement récupére le texte tapé dans mon champ input et l'afficher dans mon message d'alerte au debut de ma page à la fermeture du modal

j'ai essayé autre chose mais le champ recupérer est "undefined" maintenant

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
$(function(){
           $("#form").submit(function(event){
               var firstname = $("#firstname").val();
                   $.ajax({
                       type : "POST",
                       url: "script.php", 
                       data: $(this).serialize(),
                       success : function() {
                           $("#form").html("<p>Formulaire bien envoyé</p>");
                       },
                       error: function() {
                           $("#form").html("<p>Erreur d'appel, le formulaire ne peut pas fonctionner</p>");
                       }
                   });
 
 
               return false;
           });
       });

26/03/2016, 17h11
NoSmoking

Citation:

...le champ recupérer est "undefined"

tu nous parles de quel champ là !?!