Récupérer un champ input avec AJAX

**SplitX26** · 20/03/2016, 05h56

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

Code :

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

   <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 :

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

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

**NoSmoking** · 20/03/2016, 10h25

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();.

**SplitX26** · 20/03/2016, 15h35

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

Code :

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

                   <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 :

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

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

**SplitX26** · 20/03/2016, 20h36

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 ?

**NoSmoking** · 20/03/2016, 22h02

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

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

**SplitX26** · 20/03/2016, 22h29

Voici le code de ma page index.php :

Code :

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
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>

**mathieu** · 21/03/2016, 11h45

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

**NoSmoking** · 21/03/2016, 13h56

Code :

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

$('.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 :

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

$(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)

**SplitX26** · 21/03/2016, 20h38

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

**SplitX26** · 22/03/2016, 16h44

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

Code :

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
$(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;
           });
       });

**NoSmoking** · 26/03/2016, 17h11

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

tu nous parles de quel champ là !?!

Récupérer un champ input avec AJAX

AJAX

Discussions similaires

Partager

Partager