11540 sujets

JavaScript, DOM et API Web HTML5

Afficher une liste d'emails récupérer avec JQuery

Salut à tous,

Je suis débutant sur JQuery, mon sujet est le suivant :
je développe un projet de parrainage. J'aimerais que lorsque l'utilisateur enregistré les emails de ses amis, ces derniers apparaissent dans une lightbox ou un truc du genre avec un scroll, et quel'utilisateur ait la possibilité d'effacer un email.

Je ne sais pas comment faire, j'aimerais avoir un piste ou vos conseils, merci.
Salut Smiley cligne

Désolé, c'est une réponse bateau, mais :

http://api.jquery.com/

http://www.siteduzero.com/informatique/tutoriels/jquery-ecrivez-moins-pour-faire-plus

http://www.siteduzero.com/informatique/tutoriels/simplifiez-vos-developpements-javascript-avec-jquery

http://pckult.developpez.com/tutoriels/javascript/frameworks/jquery/introduction/

---

Essayes de te contenter du plus simple dans un premier temps :

- Lors de l'ajout d'une adresse mail, venir insérer le contenu dans une autre "div" et vider le contenu de "l'input" ayant permis de donner l'adresse mail.

Lors du déplacement de la valeur de ton "input", venir insérer en plus, un petit texte après qui indique "supprimer" (faire un lien).

Ca commencera à se rapprocher de ce que tu souhaites ?

Ensuite, tu pourras revenir ici pour avancer un peu plus si tu as des questions, car on ne donne pas de code tout fait par ici, à moins qu'une âme super charitable te le fasse Smiley ravi
j'ai un soucis, j'utilise la méthode append() mais il n'affiche l'ajout qu'une seconde et puis ça disparaît, je ne sais pas à quoi cela est du
voici mon code :

<html>
<head><title>Test avec JQuery</title>
<link rel="stylesheet" href="../css/style.css">
</head>

<body>
<div id="container">
<table>
<tr>
<td> De manière manuelle : </td>
</tr>
<tr>

<td>
<table>
<form name="manuel" method="POST" action="">
<tr>
<td> email : </td>
<td> <div id="emaili"><input type="text" name="email"> </input> </div></td>
</tr>
<tr>
<td> </td>
<td> <span id="ajouter"> <input type="submit" value="ajouter"> </input> </span> </td>
<td> <span id="recuperer"> <input type="submit" value="recuperer emails"> </input> </span> </td>
</tr>

</form>
</table>
</td>

</tr>
</table>


<script src="../js/jquery.js"></script>
<script src="../js/test.js"></script>
</div>
</body>

</html>

et mon code js :

$(document).ready(function()
{

$('#ajouter').click(function(){
var email = $('input').val();
alert("email"+email);
$('#container').append('<div id="cadre">' +email+ '<div><a href="#" id="hide">' +"x"+ '</a></div> </div>');

});


});
voici le code css, si tu en as besoin :

#cadre{
position:absolute;
border:2px solid #000;
background:#FFF;
}

#hide
{
position:absolute;
top:0;
right:0;
color:#000;
text-decoration:none;
font-size:20px;
}
Je ne donne pas la réponse directement, à toi de comprendre d'où viens ton erreur.

Je te laisse juste un indice, c'est dans cette condition que ça coince :

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


Essaye de réfléchir en sélecteur CSS (car c'est ce que tu fais), si tu crée cette régle:

input { border: 5px solid blue }


Où s'applique cette règle ?

Sur un seul input précis, ou sur tous, ou un mais tu ne sais pas lequel exactement ?

P.S: vérifie ta structure HTML, il ne me semble pas complètement correcte

.
Modifié par Super_baloo8 (10 Mar 2013 - 18:55)
Sujet clos
Aller à