Sujet Précédent Sujet Suivant

Bug incomprhensible avec jquery / materialize

Fermé
ephelya Messages postés 289 Date d'inscription mercredi 28 septembre 2011 Statut Membre Dernière intervention 20 juin 2023 - 22 janv. 2020 à 12:40
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 - 23 janv. 2020 à 06:57
Bonjour,

J'ai un souci avec un formulaire dont voici le code 
    <form class="col s12">
      <div class="row et1">
        <div class="input-field col s12" id="fname">
          <input id="first_name" type="text" class="validate">
          <label for="first_name"><?php echo FNAME;?></label>
          <span class="helper-text" data-error="wrong" data-success="right"></span>
          </div>
        <div class="input-field col s12" id="lname">
          <input id="last_name" type="text" class="validate">
          <label for="last_name"><?php echo LNAME;?></label>
          <span class="helper-text" data-error="wrong" data-success="right"></span>
        </div>
          <input type="text" class="datepicker">          
          <label for="last_name"><?php echo LNAME;?></label>
      </div>
        
        <div class='link' id='et1'><?php echo NEXT; ?></div>
    </form>


Je voudrais tout simplement récupérer l'ensemble des valeurs des inputs, 

   
 $(".link").click(function () {
        var inputs = $(".et1 input").val();
        $(inputs).each(function(i, e) {
            console.log("value "+i+": "+e);
        });
        console.log("test inputs "+inputs);
    });


mais il n'y a rien à faire, dans la console j'obtiens seulement "test inputs jean"
Je ne comprends pas où je me trompe, il n'y a pas plus basique pourtant...
Merci d'avance pour votre aide !

Configuration: Macintosh / Firefox 72.0

7 réponses

Réponse 1 / 7
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
22 janv. 2020 à 13:25 
$(".et1").find('input').val()

0
Réponse 2 / 7
ephelya Messages postés 289 Date d'inscription mercredi 28 septembre 2011 Statut Membre Dernière intervention 20 juin 2023 2
22 janv. 2020 à 13:32
Bonjour Jordane, merci pour t réponse mais ça me sort toujours "test inputs Jean"
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
22 janv. 2020 à 13:34
Pardon je n'avais pas fait attention il faut que tu enlèves le. Val
0
ephelya Messages postés 289 Date d'inscription mercredi 28 septembre 2011 Statut Membre Dernière intervention 20 juin 2023 2 > jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024
22 janv. 2020 à 15:02
Bon, en fait mo problème n'est pas résolu du tout. A la base je faisais cette boucle tt simplement pr récupérer les varables et les renvoyer en ajax vers le script d'inscription, mais ça ne récupérait que le premier champ. Mon code a un peu changé, mais j'ai toujours un pbpour récupérer toutes les valeurs et je ne peux rien envyer en ajax.
Mon formulaire : 
    <form class="col s12">
      <div class="row et1">
        <div class="input-field col s12" id="fname">
          <input id="first_name" type="text" class="validate">
          <label for="first_name"><?php echo FNAME;?></label>
          <span class="helper-text" data-error="wrong" data-success="right"></span>
          </div>
        <div class="input-field col s12" id="lname">
          <input id="last_name" type="text" class="validate">
          <label for="last_name"><?php echo LNAME;?></label>
          <span class="helper-text" data-error="wrong" data-success="right"></span>
        </div>
        <div class="input-field col s12" id="login">
          <input id="login" type="text" class="validate">
          <label for="login"><?php echo _LOGIN;?></label>
          <span class="helper-text" data-error="wrong" data-success="right"></span>
        </div>
        <div class="input-field col s6" id="pwd">
          <input id="pwd" type="password" class="validate">
          <label for="pwd"><?php echo PWORDD;?></label>
          <span class="helper-text" data-error="wrong" data-success="right"><?php echo CONDS_PWD; ?></span>
        </div>          
        <div class="input-field col s6" id="pwd2">
          <input id="pwd2" type="password" class="validate">
          <label for="pwd2"><?php echo PWORDD;?></label>
          <span class="helper-text" data-error="wrong" data-success="right"><?php echo CONFIRM_PWD; ?></span>
        </div> 
    </div>
        
        <div class='link' id='et1'><?php echo NEXT; ?></div>
    </form>


Mon script 
$(".link").click(function () {
        var inputs =$(".et1").find('input');
        console.log("test "+$("#last_name").val());
        console.log("test "+$("#first_name").val());
        console.log("test "+$("#login").val());
        $(inputs).each(function(i, e) {
            $("#"+$(e).attr("id")+" span").text($(e).attr("data-success"));
            
            if ($(e).attr("id") == 'last_name') {var lname = $(e).val();}
            if ($(e).attr("id") == 'first_name') {var fname = $(e).val();}
            if ($(e).attr("id") == 'login') {var login = $(e).val();}
            if ($(e).attr("id") == 'pwd') {var pwd = $(e).val();}  
            console.log("test2 "+$(e).val()+" :"+$(e).val());
        });
        console.log("lname "+lname+" fname"+fname+" login"+login+" pwd"+pwd);
        $.ajax({ 
            type: "POST",
            dataType: 'json',
            url: "<?php echo HOME; ?>ajx/ajax.php", 
            data: {lname:lname, fname: fname, login:login, pwd:pwd},
            error : function(x,err){
                    alert(err);
                },
            success: function(data){
                console.log("regist ok "+data);
                //location.reload(); 
            }
         });
    });


et vilà ce qui sort ds la console... 
test dupont rosetomate.com:159:17
test jean rosetomate.com:160:17
test rosetomate.com:161:17
test2 jean :jean rosetomate.com:169:21
test2 dupont :dupont rosetomate.com:169:21
test2 monlogin :monlogin rosetomate.com:169:21
test2 pwd :pwd 2 rosetomate.com:169:21
lname [object HTMLDivElement] fname[object HTMLDivElement] login[object HTMLDivElement] pwd[object HTMLDivElement] rosetomate.com:171:17
TypeError: 'click' called on an object that does not implement interface HTMLElement.
jquery-2.1.1.min.js:4:13162


0
ephelya Messages postés 289 Date d'inscription mercredi 28 septembre 2011 Statut Membre Dernière intervention 20 juin 2023 2 > ephelya Messages postés 289 Date d'inscription mercredi 28 septembre 2011 Statut Membre Dernière intervention 20 juin 2023
Modifié le 22 janv. 2020 à 15:08
c'est quoi son problème avec le login ?? je précise qu'en changeant la dénomination de l'id le pb est exctement le même...
0
Réponse 3 / 7
ephelya Messages postés 289 Date d'inscription mercredi 28 septembre 2011 Statut Membre Dernière intervention 20 juin 2023 2
22 janv. 2020 à 13:56
Super, merci beaucoup. Maintenant ça me sort :

value 0: [object HTMLInputElement]
value 1: [object HTMLInputElement]
test inputs [object Object]

Je vais pouvoir m'en débrouiller ! :-)
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
22 janv. 2020 à 15:02
Dans tes console.log utilise les virgules au lieu de concatener ..
par exemple 
console.log("value "+i+": "+e);

devient : 
console.log("value "+i,e);
0
Réponse 4 / 7
ephelya Messages postés 289 Date d'inscription mercredi 28 septembre 2011 Statut Membre Dernière intervention 20 juin 2023 2
22 janv. 2020 à 15:05
Je pris cette habitude de séparer avec du texte pcq lorsque je teste une série de valeurs qui renvoient des chiffres c'est compliqué de savoir à quelle variable les données correspondent. C'est vrai que ds le cas présent ça ne sert à rien mais c'est un réflexe et ça facilite ma lecture ;-)
0

Vous n’avez pas trouvé la réponse que vous recherchez ?

Posez votre question
Réponse 5 / 7
ephelya Messages postés 289 Date d'inscription mercredi 28 septembre 2011 Statut Membre Dernière intervention 20 juin 2023 2
22 janv. 2020 à 20:30
je me permets un up pcq le pb n'est pas réglé, j'ai répondu plus haut au message précédent
0
Réponse 6 / 7
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
22 janv. 2020 à 20:55
Faire une boucle... pour ensuite faire des IF sur chaque variable... quel intéret ???
Autant, directement initialiser les variables en te servant des ID de tes input 

var fname = $("first_name").val();
var lname = $("last_name").val();
var login = $("login").val();
var pwd = $("pwd").val();
var pwd2 =$("pwd2").val();

$.ajax({
  type: "POST",
  dataType: 'json',
  url: "<?php echo HOME; ?>ajx/ajax.php",
  data: {lname:lname, fname: fname, login:login, pwd:pwd},
  error : function(x,err){
    alert(err);
  },
  success: function(data){
    console.log("regist ok ",data);
    //location.reload();
  }
});


Le souci concernant le login vient du fait que tu utilises le même ID pour deux éléments html 
<div class="input-field col s12" id="login">

et 
<input id="login" type="text" class="validate">


Change l'id de ta DIV !!


NB: A l'avenir, merci de préciser le LANGAGE dans les balises de code afin d'avoir la coloration syntaxique et l'indentation !
Explications disponibles ici :
https://codes-sources.commentcamarche.net/faq/11288-les-balises-de-code

.
0
Réponse 7 / 7
ephelya Messages postés 289 Date d'inscription mercredi 28 septembre 2011 Statut Membre Dernière intervention 20 juin 2023 2
Modifié le 23 janv. 2020 à 02:54
aucun intérêt en effet, c'est juste que j'avais besoin d'autre chose au départ avec la boucleetque par ailleurs je n'arrivais pas à récupérer les valeurs d'input dc j'en ai profité pr faire le test.
Comme je l'ai précisé le pb ne vient pas de l'id. Avant que je rajoute des champs, ça déconnaii déjà avec la variable last_name, et par ailleurs j'ai essayé avec "ident" et le résultat est. exactement le même : 

test dupont rosetomate.com:158:17
test jean rosetomate.com:159:17
test rosetomate.com:160:17
test2 jean :jean rosetomate.com:168:21
test2 dupont :dupont rosetomate.com:168:21
test2 identifiznt :identifiznt rosetomate.com:168:21
test2 pwd :pwd 2 rosetomate.com:168:21
lname [object HTMLDivElement] fname[object HTMLDivElement] ident[object HTMLDivElement] pwd[object HTMLDivElement] rosetomate.com:170:17
TypeError: 'click' called on an object that does not implement interface HTMLElement.
:
(désolée, je ne sais pas quel type de code choisir pr afficher la console,s'il y en a un)
0
jordane45 Messages postés 38145 Date d'inscription mercredi 22 octobre 2003 Statut Modérateur Dernière intervention 25 avril 2024 4 650
23 janv. 2020 à 06:57
mais si le problème vient des id tu as plusieurs fois les mêmes id sur différents éléments HTML un ID c'est un identifiant.
il doit être unique !
donc si tu as un id pwd pour ton input tu ne dois pas avoir id pwd pour la DIV idem pour les autres champs !

par contre j'ai fait une petite erreur lorsque j'ai écrit le code j'ai oublié de mettre les dièse pour choisir les éléments 
var fname = $("#first_name").val();
var lname = $("#last_name").val();
var login = $("#login").val();
var pwd = $("#pwd").val();
var pwd2 =$("#pwd2").val();


et pour ce qui concerne les balises de code vu que ton code c'est du JavaScript il faut choisir JS
Quand ton code concerne le html il faut choisir HTML... Tout simplement
0

Discussions similaires

Problème Facebook rencontre
Margalle -
Jpf -

17 réponses
Problème musiques étranges sur story instagram
somnorun -
SN -

21 réponses
Iptv beug
leogauthier15 -
bazfile -

1 réponse
Problème avec "Facebook Rencontre"
xouxou77 -
4.Kat3ur -

7 réponses
Problème IPTV SMARTER
eneleh49 -
glandu -

1 réponse