Transmission de données AJAX/JQUERY/PHP

flant Messages postés 63 Date d'inscription Statut Membre Dernière intervention -
maka54 Messages postés 698 Date d'inscription Statut Membre Dernière intervention - 31 oct. 2012 à 13:39

Bonjour,
J'ai un petit problème avec mon code suivant:

index.php
------------
<!DOCTYPE html>
<html>
<head>
<title>Ajax Database</title>
</head>
<body>
<input type="submit" id="name-submit" class="name" value="Ive" ><br/>
<input type="submit" id="name-submit" class="name" value="Alex" ><br/>
<input type="submit" id="name-submit" class="name" value="Bruno" >
<div id="name-data"></div>
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
$('input#name-submit').click(function(){
var name = $('input.name').val();
if ($.trim(name) !=''){
$.post('reception.php', {name : name}, function (data){
$('div#name-data').text(data);
});
}
});
</script>
</body>
</html>
--------------------------
reception.php
----------------------------
<?php
if (isset($_POST['name']) === true && empty($_POST['name']) === false){
echo $_POST['name'];
}

Le problème est que si je clique sur Ive le contenu de value Ive s'affiche mais quand je clique sur les autres Alex et Bruno c'est toujours Ive qui s'affiche.
Comment faire pour qu'en cliquant Alex, Bruno il affiche Alex, Bruno.
Merci d'avance.

Afficher la suite

A voir également:

Transmission de données AJAX/JQUERY/PHP
Fuite données maif - Guide
Supprimer les données de navigation - Guide
Easy php - Télécharger - Divers Web & Internet
Trier des données excel - Guide
Sauvegarde des données - Guide

3 réponses

Réponse 1 / 3

carabde Messages postés 60 Date d'inscription Statut Membre Dernière intervention 30

Bonjour, voici une solution sans passer par ajax

<!DOCTYPE html>
<html>
<head>
<title>Ajax Database</title>
<script src="jquery.js" type="text/javascript"></script> 

</head>
<body>
<input type="submit"  class="name" value="Ive" ><br/>
<input type="submit"  class="name" value="Alex" ><br/>
<input type="submit"  class="name" value="Bruno" >
<div id="name-data"></div>
<script type="text/javascript">
$('input.name').click(function(){
var name = $(this).val();
if ($.trim(nam) !=''){
$.post('reception.php', {valeur:name}, function(data){
$('div#name-data').text(data);
});
}
});
</script> 
</body>
</html>  

 
reception.php
<?php

$q=$_POST["valeur"]; 
echo $q;

?>

Si vous voulez étudier Jquery voici un lien:
http://apprendre-creer-sites.com/jquery/
Carabde

maka54 Messages postés 698 Date d'inscription Statut Membre Dernière intervention 80

Bonjour, voici une solution sans passer par ajax

Pourrais tu développer davantage ?

Réponse 2 / 3

bigbybob

Bonjour,

Le problème vient de là :

var name = $('input.name').val();

En fait tes 3 boutons ont la même classe "name", ce qui fait que tu récupère toujours le premier.

Maintenant t'as 2 solutions, soit tu différencie tes boutons en changeant la classe. Mais ça t'obligera à faire une vérification dans ton code javascript.

On va donc partir du principe que tes boutons ont des class="b1" pour le premier, class="b2" pour le second, class="b3" pour le dernier

 var b1 = $('input.b1').val();    
var b2 = $('input.b2').val();    
var b3 = $('input.b3').val();    

var name = "";  
if(b1){  
 name = b1;  
}else if(b2){  
 name = b2;  
}else if(b3){  
 name = b3;  
}

Je pense qu'il est aussi possible de faire un truc du genre

var name = $('input.name').get(0).val();

var name1 = $('input.name').get(1).val();

var name2 = $('input.name').get(2).val();

Puis faire les même verif qu'au dessus

Ou sinon, plus simplement, tu fais un <input type="text" id="nom"/>
et tu le récupère comme ça :

var name = $('#nom).val();

maka54 Messages postés 698 Date d'inscription Statut Membre Dernière intervention 80

ou alors on utilise $(this) pour faire reference a l'element cliqué

et il faut remplacer $('input#name-submit') par $('input.name'), un id doit etre unique

$('input.name').click(function(){ 
  var name = $(this).val(); 
  if ($.trim(name) !=''){ 
    $.post('reception.php', {name : name}, function (data){ 
      $('div#name-data').text(data); 
    }); 
  } 
});

Réponse 3 / 3

flant Messages postés 63 Date d'inscription Statut Membre Dernière intervention 5

Merci beaucoup ça résous le problème.

Discussions similaires

Erreur la zone de données passée à un appel système est insu

probléme avec ajax svp

Barre de données en pourcentage (maintenir 100% comme max)

je tombe sur le service de diffusion des donnees?que faire?

TNT base de donnees vide!!

Votre réponse

Discussions similaires