Bug incomprhensible avec jquery / materialize

ephelya Messages postés 282 Date d'inscription   Statut Membre Dernière intervention   -  
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   -
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
  
$(".et1").find('input').val()

0
Réponse 2 / 7
ephelya Messages postés 282 Date d'inscription   Statut Membre Dernière intervention   2
 
Bonjour Jordane, merci pour t réponse mais ça me sort toujours "test inputs Jean"
0
jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
Pardon je n'avais pas fait attention il faut que tu enlèves le. Val
0
ephelya Messages postés 282 Date d'inscription   Statut Membre Dernière intervention   2 > jordane45 Messages postés 38486 Date d'inscription   Statut Modérateur Dernière intervention  
 
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 282 Date d'inscription   Statut Membre Dernière intervention   2 > ephelya Messages postés 282 Date d'inscription   Statut Membre Dernière intervention  
 
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 282 Date d'inscription   Statut Membre Dernière intervention   2
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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 282 Date d'inscription   Statut Membre Dernière intervention   2
 
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 282 Date d'inscription   Statut Membre Dernière intervention   2
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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 282 Date d'inscription   Statut Membre Dernière intervention   2
 
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 38486 Date d'inscription   Statut Modérateur Dernière intervention   4 752
 
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

Iptv beug
leogauthier15 -
bazfile -

1 réponse
Problème IPTV SMARTER
eneleh49 -
glandu -

1 réponse
Smart IPTV met un temps fou à charger depuis que je suis passé à la fibre
Ancaro13 -
glandu -

3 réponses
Bug de chaîne IPTV
GeraltDeRiv13 -
bazfile -

1 réponse
J'ai un problème avec la géolocalisation Snapmap
Solex1986 -
Dougy -

5 réponses