Prb pour récupérer la valeur d'un Input

Par Antoine Brsslt, il y a 11 ans

Récuperer la valeur d'un input

Bonjour à tous, je n'arrive pas à récupérer la valeur d'un input en JQuery.
Le script génère une Modale box quand la souris de l'utilisateur franchis la fenêtre (par le haut)
Le script en live ici (http://antoine-data.tk/cryptogrammes/)

Voilà mon code

L'HTML

<div data-cookie="true" data-maxamount="3333333333" data-mintime="" id="beforeyougo" class="glue_popup"> <div class="glue_close" >X</div> <div class="glue_content">  <div class="glue_title">Vous partez déja ? </div> <form> <input type="email" id="pegus-newsletter-email" placeholder="Entrez votre email" value=""> <input id='permalink' type="hidden" value="http://antoine-data.tk/cryptogrammes/wp-content/plugins"> <button id="pegus-newsletter-button"> S'inscrire </button> </form>  </div> </div>

Le Script Jquery

(function ( $ ) { $.glue = function( options ) { var defaults = { layer : "", trigger : [ 'top', //'left', //'right', //'bottom', //'all' ], delay : 0, interval : 0, mintime : 0, maxtime : 0, maxamount : 0, cookie : false, bgclickclose : true, escclose : true, onleave : function (e) {}, disableleftscroll : true // chrome disable }; var settings = $.extend( {}, defaults, options ); $(settings.layer).hide(); var startuptime = new Date().getTime(); var windowHeight = $(window).height(); var windowWidth = $(window).width(); var offsetbind = false; var howmanytimes = 0; var lasttime = 0; var chromealert = true; var lastx, lasty = 0; if (/Chrome/.test(navigator.userAgent)) { var chrome = true; if ($(document).width() > windowWidth && settings.disableleftscroll == true) { chromealert = false; } } var conth = parseFloat($(settings.layer).css("height")); var contw = parseFloat($(settings.layer).css("width")); var reqsettings = { backgroundcss: {'z-index':'1000','display':'none'}, boxcss: {'z-index':'1000','position':'fixed','left':'50%','top':'50%','height': (conth) + 'px','width': (contw ) + 'px', 'margin-left':(-contw/2)+'px', 'margin-top':(-conth/2) + 'px'} }; $.extend(true, settings, reqsettings); $(document).bind('mousemove',function(e) { lastx = e.pageX; lasty = e.pageY; }); $(document).bind('mouseleave', function(e) { setTimeout(function(){ontheleave(e);}, settings.delay); }); if (chrome) { $(document).unbind("mouseleave"); chromefix(); } function chromefix() { offsetbind = false; $(document).bind('mousemove.bindoffset',function(e) { if (offsetbind) { $(document).bind('mouseleave', function(e) { setTimeout(function(){ontheleave(e);}, settings.delay); }); $(document).unbind("mousemove.bindoffset"); } offsetbind = true; }); } $(window).resize(function(e) { windowHeight = $(window).height(); windowWidth = $(window).width(); }); function ontheleave(e) { if (e.pageX == -1 && e.pageY == -1) { var clienty = -lasty + $(document).scrollTop(); var clientx = lastx - $(document).scrollLeft(); } else { var clienty = -e.pageY + $(document).scrollTop(); var clientx = e.pageX - $(document).scrollLeft(); } var ey1 = (-windowHeight / windowWidth) * clientx; var ey2 = ((windowHeight / windowWidth) * clientx) - windowHeight; var leaveside; if (clienty >= ey1) { if (clienty >= ey2) { leaveside = "top"; } else { leaveside = "right"; } } else { if (clienty >= ey2) { leaveside = "left"; } else { leaveside = "bottom"; } } if (/Firefox[\/\s](\d+\.\d+)/.test(navigator.userAgent)) { if (clienty < 0 && clienty > -windowHeight && clientx > 0 && clientx < windowWidth) { return; } } if ($.inArray(leaveside, settings.trigger) != -1 || $.inArray('all', settings.trigger) != -1) { var recenttime = new Date().getTime(); if ((recenttime-startuptime) >= settings.mintime) { if ((recenttime-startuptime) <= settings.maxtime || settings.maxtime == 0) { if (howmanytimes < settings.maxamount || settings.maxamount == 0) { if ((recenttime-lasttime) >= settings.interval || settings.interval == 0) { if (chromealert) { var cookiehowm = getamount("ck_glue_visit"); if (settings.cookie == false || (settings.cookie == true && (cookiehowm < settings.maxamount || settings.maxamount == 0))) { settings.onleave.call(this, leaveside); if (settings.layer != "") { showbox(); } howmanytimes++; if (settings.cookie == true) { cookiehowm++; document.cookie="ck_glue_visit="+cookiehowm+"; path=/"; } lasttime = new Date().getTime(); } } } } } } } if (chrome) { $(document).unbind("mouseleave"); chromefix(); } } function showbox() { if ($.data(document.body, "glue_var") != 1) { $.data(document.body, "glue_var", 1); $('<div class="glue_block_layer"></div>').appendTo('body').css(settings.backgroundcss).fadeIn(300); $('<div class="glue_container"></div>').appendTo('body'); $(settings.layer).clone().show().css(settings.boxcss).appendTo(".glue_container"); if (settings.bgclickclose) { $('.glue_block_layer').click(function(){ gl_cl(); }); } if (settings.escclose) { $("body").keyup(function(e){ if(e.which == 27){ gl_cl(); } }); } } } }; function getamount(cname) { var name = cname + "="; var ca = document.cookie.split(';'); for(var i=0; i<ca.length; i++) { var c = ca[i]; while (c.charAt(0)==' ') c = c.substring(1); if (c.indexOf(name) != -1) return c.substring(name.length,c.length); } return 0; } function gl_cl() { $('.glue_container').fadeOut( function() { $(this).remove(); }); $('.glue_block_layer').fadeOut( function() { $(this).remove(); }); $.removeData( document.body, "glue_var" ); } $.glue_close = function() { gl_cl(); } }( jQuery ));

L'initialisation

(function ( $ ) { var cookie = $('#beforeyougo').data('cookie'); var maxamount = parseInt($('#beforeyougo').data('maxamount')); var mintime = $('#beforeyougo').data('mintime'); $.glue({ layer: '#beforeyougo', maxamount: maxamount, cookie: cookie, mintime: mintime, }); $("html").on('click', '.glue_close', function(){ $.glue_close(); }); // Inscription à la newsletter en Ajax $("html").on('click', '#pegus-newsletter-button', function(e){ e.preventDefault(); var email = $("#pegus-newsletter-email").val(); var permalink = $("#permalink").val(); console.log(email); console.log(permalink); }); }( jQuery ));

Le problème

Avec console.log(email); je devrais récupérer la valeur de l'input saisi par l'utilisateur. Et ce n'est pas le cas.

Je n'ai aucune piste, alors un petit coup de main ne serait pas de refus.

Pour info vous pouvez voir le script en live ici :
(http://antoine-data.tk/cryptogrammes/)

Si vous ouvrez votre console vous verez que l'input saisis ne retourne rien dans la console

Merci beaucoup de votre aide :)

Antoine

2 réponses

antho07,

il y a 11 ans

Bonjour,

Il s'agit d'un problème de double id dans le code.
En effet le formulaire et la box sont présents deux fois dans la page.

Je m'explique:

Au début, nous avons effectivement une fois la box dans la page:

Lorsque que l'on sort de la fenêtre le bout de code suivant est exécuté:

function showbox() { if ($.data(document.body, "glue_var") != 1) { $.data(document.body, "glue_var", 1); $('<div class="glue_block_layer"></div>').appendTo('body').css(settings.backgroundcss).fadeIn(300); $('<div class="glue_container"></div>').appendTo('body'); $(settings.layer).clone().show().css(settings.boxcss).appendTo(".glue_container"); // ICI if (settings.bgclickclose) { $('.glue_block_layer').click(function(){ gl_cl(); }); } if (settings.escclose) { $("body").keyup(function(e){ if(e.which == 27){ gl_cl(); } }); } } }

Or la ligne marquée "ICI" ci-dessus clone un élement dans lequel le formulaire est déjà présent :

Si bien qu'ensuite deux inputs email sont présents avec le même id :

Or , un id étant censé être unique (cf norme w3c) , le sélecteur jquery $('#form-newsletter-email") s'arrête au premier élement trouvé qui n'est pas celui affiché à l'écran, ce qui explique le problème.

Cordialement

Antho

Antoine Brsslt,

il y a 11 ans

Antho Merci Merci Merci !

Je n'avais pas vu ce doublement :) J'ai donc ajouté une classe au 2nd input et maintenant je peut récupérer la valeur :)

Merci encore de ton aide :) :)