Tutoriel Vidéo jQuery : Poster un formulaire en Ajax

desbutes Il y a 2 jours Répondre

la pédagogie dans la peau!!! Encore bravo

Bap Il y a 22 jours Répondre

Super tuto mec !

lolo Il y a 28 jours Répondre

J'avais une erreur, le message si le champ pseudo est vide ne s'affichait pas avec ce code :
if(data!="ok") {
$(".error").empty().append(data);
j'ai remplacé par :
if(data!="ok") {
$("#error").empty().append(data);
et ça fonctionne...

lolo Il y a 29 jours Répondre

Super, mais on trouve les sources où ?

Nico Il y a 2 mois Répondre

Super !
C'est fou Jquery

Abdessamad Il y a 2 mois Répondre

Merci bq bonne tutorial

theptitprince Il y a 2 mois Répondre

Bonsoir à tous.
Superbe tuto! Cependant, pour les besoins de mon site, j'ai besoin d'afficher des pages générées par php... Hors, lorsque j'essaie de faire afficher ma page php, ça me fait une erreur (et donc ça n'affiche pas ma page, mais le message d'erreur...).
J'ai même téléchargé les fichiers mis a disposition sur le site, j'ai remplacé dans mes includes le html par php, etc, et rien... Erreur... Quelqu'un aurait-il une solution?

slyckers Il y a 3 mois Répondre

Bonjour,
J'adapte ce merveilleux script a un de mes formulaire Mais qd je veux cacher mon formulaire rien de va ! par contre si j'enlève le esle {} tout fonctionne mais sans que le formulaire ce cache :/
Une idée ?

$(function(){

$("#formcom").submit (function(){
$("#loader").show();
dateajout = $(this).find("input[name=dateajout]").val();
titre = $(this).find("input[name=titre]").val();
genre2 = $(this).find("select[name=genre2]").val();
pseudo = $(this).find("input[name=pseudo]").val();
url_mu = $(this).find("input[name=url_mu]").val();
$.post("addemande.php",{dateajout: dateajout, titre: titre, genre2: genre2, pseudo: pseudo, url_mu: url_mu}, function(data){
$("#loader").hide();

if(data !="Demande entre les mains d'un uploader !"); {

$(".erreur").empty().append(data); }

else {

$("#formcom").fadeOut(); }

});

return false;

});

});

loutoune54 Il y a 4 mois Répondre

Tutoriel excellent ! Explications très claires, très facile d'accès.

Merci !

polo03 Il y a 4 mois Répondre

Super tuto, qui m'à été bien utile !

kalagan Il y a 4 mois Répondre

Merci ,
Super tuto

Marius Il y a 6 mois Répondre

Super tuto

Jorand Il y a 8 mois Répondre

Merci Beaucoup .. SUPER tuto

mickael Il y a 8 mois Répondre

Bonjour, genial ton tuto il m'a bien aidé au travail
Cependant petite question:
Dans ton tuto les messages que l'on ecrit s'affichent les uns en dessous des autres. Comment je peux faire pour afficher le dernier message au dessus des autres ? (style facebook quoi)

Merci !

hesham Il y a 8 mois Répondre

est il possible de mettre le SELECT du php dans :
<div id="resultatAjax">
<PHP
$sql="SELECT...
?>
</div>
et après l'ajout du commentaire on fait Refresh de cette div ?
quelqu'un a déjà essayé ?

Paul Il y a 9 mois Répondre

Merci beaucoup !

graphiweb Il y a 9 mois Répondre

Peut t'on faire se tutoriel pour un site cakephp ?

guidecom Il y a 10 mois Répondre

Super tuto merci !

wallerand Il y a 10 mois Répondre

Excellent tuto! J'ai envie de dire comme d'hab' ...

Someone Il y a 10 mois Répondre

Excellent ton tuto ! Je vais l'appliquer pour mon site !

(P.S: je poste ce commentaire juste pour voir si t'as mis la même chose sur ton site... :p )

smarty Il y a 11 mois Répondre

Dommage qu'on a pas droit aux sources ... même pour les premium
merci pour la vidéo

Alex Il y a 1 an Répondre

Par rapport a la function(data)
Comment recuperer d'autres infos du fichier appelé ?
a part la valeur "ok" qui valide la fonction

Merci
Alex

bien Il y a 1 an Répondre

Très bien!

hellsingblack Il y a 1 an Répondre

Bonjour,

Est ce que ce tuto marche aussi pour les $_FILES ??

80giga Il y a 1 an Répondre

salut, moi aussi je ne vois pas le code source

substances Il y a 1 an Répondre

keller : j'ai un compte premium mais je ne vois pas de code source à télécharger ...

Xtuc Il y a 1 an Répondre

Super ce tuto!
Thanks

AzO Il y a 1 an Répondre

Super tuto merci

sylv Il y a 1 an Répondre

Merci!

notten13 Il y a 1 an Répondre

Salut !
Super tutoriel, comme d'habitude ! J'ai par contre un problème qui concerne mon site : en utilisant ce système de soumission par ajax, j'envoies les informations du formulaire à un script qui crée une image contenant le texte du formulaire entré par le visiteur et qui l'enregistre ; ensuite, dans le function(data) qui suit la requête ajax, je demande d'afficher cette image. Cela marche une fois, mais si je resoumets le formulaire avec un autre texte, une nouvelle image est bien enregistrée mais le navigateur n'actualise pas l'image... Une idée ?

Merci beaucoup et bonne continuation !

LeDoc Il y a 2 ans Répondre

La classe sérieux

mathias Il y a 2 ans Répondre

Très bon tutoriel !

toprod Il y a 2 ans Répondre

Bonjours , super tuto que j'ai déjà utilisé une fois sur un autre site

J'ai réessayer de faire un formulaire d'inscription tous va bien mais le probléme c'est que je veut uploader une image avec tous sa ,,, mais impossible puisque il faut mètre enctype="multipart/form-data" en html ,,, mais en jquery sa le prend pas en conte ,,, il y a une solution ? Si oui comment faire ?

Merci d'avance

Kamal Il y a 2 ans Répondre

mais vous avez oublié d'ajouter un script pour la validation de formulaire, par exemple si on a dans le formulaire de commentaire un champ e-mail .....ect

@+

ala_denvar Il y a 2 ans Répondre

Salut,
Merci pour se tuto !
AU fait, de même, j arrive pas a trouver les source !

kukuki Il y a 2 ans Répondre

Bonjour,
Je ne vois pas comment récupérer les sources, y en a t'il ? ou il faut obligatoirement écouter le tuto ?

sp4tz Il y a 2 ans Répondre

Salut, merci beaucoup pour ce tuto... Je l'ai utilisé et il fonctionne à merveille.
Cela dit, si on souhaite passer le formulaire via un lien et non un input type submit. on fait comment?

j'ai testé avec:<a href="#" onclick="javascript: envoisForm('form1')">
mais sans succès. Merci

Roromarin Il y a 2 ans Répondre

Bonjour !
J'ai découvert le site très récemment, et je voudrais avant tout te féliciter et te remercier pour ton site !

Je suis venu à bout de ce tutoriel, tout marche impeccablement bien (pourquoi je poste alors ?) , mais dans ton exemple, tu n'as pas mis le champ "id_billet" du tutoriel sur les commentaires en PHP.

J'ai essayé de l'ajouter par moi-même, mais lorsque j'affiche la valeur de ma variable "id_billet" du Javascript, il m'affiche "Undefined".

Je me pose donc la question de savoir si le problème vient du fait que c'est un input de type "hidden", ou si c'est parce que lorsque le script est exécuté, il ne connait pas encore la valeur du input, celui-ci étant déclaré bien plus bas dans le code ...

Si tu pouvais m'éclairer un peu sur le sujet, je t'en serais reconnaissant.
++ Romain.

s Il y a 2 ans Répondre

Merci c'est génial

jaco62 Il y a 2 ans Répondre

Salut , super tuto mais j'ai un petit problème , quand les champs son vide il y a bien l'erreur qui ce mes , et quand je remplis bien et qu'il n'y a pas d'erreur , ça s'ajoute bien a la base donnée mais il a rien qui ce rajoute sur la page ya juste écris le ok :/ pourtant j'ai retapez plusieurs fois mon code et ces toujours pareil :/ je vous mais mon script js :
si vous voyez des erreur dites le moi :

$(function(){
$("#formcom").submit(function(){
$("#loader").show();
pseudo = $(this).find("input[name=pseudo]").val();
contenu = $(this).find("textarea[name=contenu]").val();
$.post("addcom.php",{ pseudo: pseudo, contenu:contenu},function(data){
$("#loader").hide();
if(data!="ok"){
$(".error").empty().append(data);
}
else{
$("#resultatAjax").hide().append(pseudo+"à ecrit :<div>"+contenu+"</div>).slideDown();
$("#formcom").fadeOut();
}
});
return false;
});
});



si quelqu'un a une idée je suis preneur

thorg Il y a 2 ans Répondre

Génial et merci

Thibault Il y a 2 ans Répondre

Cool

Luzhal Il y a 2 ans Répondre

Salut encore bravo ! c'est génial !! Par contre moi j'ai un champ email pour que normalement avec l'ancien systeme de commentaire on voit le gravatar mais la comment faire pour afficher selon le mail de la personne

Baptiste Il y a 2 ans Répondre

As tu mit le lien vers ton fichier dans le header html?

Rafael Il y a 2 ans Répondre

Je n'est pas terminer de regarder ce tutos car même après alert(); il envoie quand même les information je me demandais si c'est normal.

Peut-on m'aider s'il vous plait

manimal Il y a 2 ans Répondre

Salut,
Bravo pour le tuto, c'est super bien fait par contre sur mon site ca ne fonctionne pas, j'ai toujours le "ok" du fichier addCom.php qui s'affiche et l'effet slideDown et fadeOut ne fonctionne pas non plus...
Si qqun peut m'aidé, je lui envois mes fichiers php.
Merci d'avance.

RoMaNo Il y a 2 ans Répondre

C'est super !

tuto Il y a 2 ans Répondre

youhouhou

tutu Il y a 2 ans Répondre

tutu

Brett Il y a 2 ans Répondre

EXCELLENT !!!
sans lequel je n'aurais jamais trouvé la solution a ce que je cherchais !!

un GRAND GRAND MERCI A TOI et BRAVO pour ces tuto

Legendary Il y a 2 ans Répondre

effet super, par contre c'est un des tutos, que j'ai jms reussi à faire fonctionner ! si qqun peut m'aider, je lui envoi mes fichiers php !
merci d'avance pour l'âme charitable

devil killer Il y a 2 ans Répondre

je kiff ce site

valentin45000 Il y a 2 ans Répondre

Bonjour,
Pourrait-on avoir les sources ?

Merci d'avance.
Cordialement.

dademberg Il y a 2 ans Répondre

cool

ValentinH Il y a 2 ans Répondre

Je me suis débrouiller avec la vidéo, merci beaucoup pour c'est super tutos !

ValentinH Il y a 2 ans Répondre

Bien le bonjour
Ne seriez vous pas ou pourrais-je télécharger les fichiers du tutoriel, en ayant payer la version premium ?
merci

salut Il y a 2 ans Répondre

merci

Flyer Il y a 2 ans Répondre

Super tuto pour pas changer.
J'aurai juste une petite question. Comment faire pour lancer une fonction PHP spécifique dans le fichier scriptPhp.php

matthieu Il y a 2 ans Répondre

Un magnifique tuto bravo

Feno Il y a 2 ans Répondre

Très bon tutos !

Feno Il y a 2 ans Répondre

dd Il y a 2 ans Répondre

dddd

alialoin Il y a 2 ans Répondre

super site, que je decouvre a peine,...bravooo....avec l'accent du sud

Marnik Il y a 2 ans Répondre

j'ai résolu le problème en rajoutant "var", si sa peut aider certains..
var pseudo = $(this).find("input[name=pseudo]").val();
var message = $(this).find("textarea[name=message]").val();

Marnik Il y a 2 ans Répondre

Il semble y avoir un problème de compatibilité IE avec ces lignes :

pseudo = $(this).find("input[name=pseudo]").val();
message = $(this).find("textarea[name=message]").val();

Comment régler ce problème ?

fab Il y a 2 ans Répondre

bo boulot

alex Il y a 2 ans Répondre

bravo

sami Il y a 2 ans Répondre

cool

moi Il y a 2 ans Répondre

Très bien

mm Il y a 2 ans Répondre

Bravo

smail Il y a 2 ans Répondre

Bravo

fumsteph Il y a 2 ans Répondre

Bon j'ai trouvé une pseudo solution.

En fait data ne semble pouvoir être qu'une chaine et non un objet (tableau ou autre). Du coup, je construit mon formulaire dans ma page php dans une variable $form. A la fin je fais un echo $form et j'interprete le tout avec jquery.

Pour ce la, j'ai un div vide dans le html <div id="form2"><div>

Et je le modifie via jquery en faisant $("#form2").html(data); ainsi jquery sais que les données de data sont du code html il ajoute ce code dans le div et mon formulaire apparait, c'est pas super propre, mais ça marche

++

toprod Il y a 2 ans Répondre

Wahou super tuto :D

C'est pas le premier tuto que je suit mais franchement la je suis obligé

Un GRAND merci

( je l'utilise sur mon site si vous voulez allez voir )

fumsteph Il y a 2 ans Répondre

Salut,

Super tuto Autant php je commence à maitriser, autant jquery je débute et les explications sont très claires.

Petite question, sinon c'est pas drôle, dans mon cas, j'ai fais un form qui va tester le login et le mot de passe de l'utilisateur, si c'est ko j'affiche ma div d'erreur, si c'est ok, ça m'affiche un autre formulaire.

Ma page php me renvoi des données sous form de tableau.

La question est : Comment puis-je récupérer les valeurs retourner par php et les insérer dans les champs de mon formulaire ?

Ex :

le form va demander à l'utilisateur de confirmer les données dans la base, je vais donc afficher un formulaire avec par exemple l'adresse mail dans un input. Je voudrais que la "value" de cette input soit celle retournée par ma page php $data["mail"];

merci de tes lumières
++

cyril6789 Il y a 2 ans Répondre

C'est absolument génial ! ça m'ouvre des horizons hallucinant !! c'est si simple en fait !
Merci pour tous ces tutos !

Nono Il y a 2 ans Répondre

Que dire à part MERCI !!!!!

Syl20 Il y a 2 ans Répondre

Exactement ce que je cherchais ! Encore un super tuto

zaula Il y a 2 ans Répondre

Hello, sais tu ce que peux donner ce code sous IE6 ?
Et si le javascript est désactivé ?
Merci

samidev Il y a 3 ans Répondre

l'effet slidedown et fadeout ne marche pas pour moi :s:s:s:s

Toph' Il y a 3 ans Répondre

Très bon tuto!
merci

lupyo Il y a 3 ans Répondre

Excellent tuto, Bravo !

Teddy Il y a 3 ans Répondre

Bonjour, un tuto sur les formulaires avec XMLhttpRequest est il prévu ? ce serait très utile !!!! Et encore brevo !

Maxime Il y a 3 ans Répondre

Bonjour, Pourrais t'on avoir un fichier ZIP contenant les sources ?
Cordialement

Mixta Il y a 3 ans Répondre

Slt,

comment je peux utiliser la fonction:
var $J = jQuery.noConflict();

Pour éviter les conflit avec mootools que j'utilise pour un autre script malheureusement je connait pas grand chose en javascript et en ajax.

Merci d'avance

knostra Il y a 3 ans Répondre

Salut,

Chez moi sa fonctionne pas à la première fonction j'ai un message d'erreur de firebug et sa ne fonctionne pas!

[message d'erreur] missing ) after argument list
[/message d'erreur]
[code]
<script type="text/javascript" src="js/lib/jquery-1.3.2.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#formreturn").submit(fonction(){
alert('test');
});

});
</script>

[/code]
aurai tu une idée s'il te plais?

damis Il y a 3 ans Répondre

merci

Benoit Il y a 3 ans Répondre

Bonjour, j'ai un petit problème avec ton tuto, parce que dans mon formulaire qui poste les commentaires, en plein milieu il y a un if/else pour afficher le numéro du commentaire (ça n'affiche pas l'id mais le numéro du commentaire pour que si il soit inférieur a 10 sa mette un 0 devant que ça fasse plus beau) et malheureusement je ne sais pas comment faire pour qu'il soit toujours actif (il est pareil que ton formulaire du site, pseudo mail site web et commentaire). Vu que c'est la première fois que je touche a du javascript bah je sais absolument pas comment faire.

Sapher Il y a 3 ans Répondre

merci, allez on le dl avec grab++, pour toujours l'avoir sous la main

Fedora Il y a 3 ans Répondre

desolé pour le retard cet fois Grafikart,
comme chaque fois un tres bon tuto , merci bien frere

Alexis Il y a 3 ans Répondre

Salut, franchement super ce tuto par contre si tu peux apporter une petite modif a ton code ca serai que lorsqu'il y a une erreur dans la soumission le loader se ferme quand meme car dans ton cas tu met le hide() dans le cas où la soumission se passe bien.

en tout cas encore bravo pour ce super tuto.

Alexis

pokemaster45 Il y a 3 ans Répondre

Salut tout le monde,moi j'ai un problème quand j'ai un champs vide il me l'indique sur une nouvelle page!!!Comment faire pour que le message soit au dessus de mon formulaire.

P.S:je précise que j'ai une div #error

Hilz Il y a 3 ans Répondre

Bravo, super tuto

MAFIAshow Il y a 3 ans Répondre

C'est pas mal!
merci pour le tuto.

super_g2 Il y a 3 ans Répondre

@pépère : je parle des urls données dans les commentaires des articles du BLOG (pas des coms des tutos), par exemple les url de l'article sur la meilleure façon de coder rapidement ^^

nice pour ton futur comparatif bonne idée, mais comme tu dis on ne se fait un avis qu'en essayant

Ravi Il y a 3 ans Répondre

Magnifique ^^

merci pour le tuto encore une fois

Sorrow Il y a 3 ans Répondre

Tuto excellent, serais tu enrhumer ? Ta voix est differente je trouve :P

super_g2 Il y a 3 ans Répondre

petite question sur "intype" : sa volonté de devenir une sorte de textmate pour windows veut-il signifier qu'il y a une autocomplétion et une gestion comme textexpander (snippets)?
sinon, bien bon ce petit tuto ^^
tiens, en parlant de coms, ta transition vers WP (pour la partie blog) a "défoncé" toutes les urls lachées en coms justement par les membres...
tjs au top mon petit rongeur laveur de légumes

allez, pour le fun, Seven c'est bien?

Babou Il y a 3 ans Répondre

Merci, pour ce super tuto
Sa va me servir sa, c'est sûr !! :D

DevAddict Il y a 3 ans Répondre

Ah cool, enfin ce que j'attendais. Merci Jojo, tu rox du petit poney

Salazar Il y a 3 ans Répondre

Je l'avais déjà vu sur dailymotion

C'est E-X-C-E-L-L-E-N-T

chataoui Il y a 3 ans Répondre

bravoooooooooooooooooo

ZebulogaZ Il y a 3 ans Répondre

Super tuto comme d'hab Allez hop sur mon site :D

GraphKiller Il y a 3 ans Répondre

Super ! Thinks ! Sa va me servir pour mon site