IdentifiantMot de passe
Loading...
Mot de passe oublié ?Je m'inscris ! (gratuit)
Navigation

Inscrivez-vous gratuitement
pour pouvoir participer, suivre les réponses en temps réel, voter pour les messages, poser vos propres questions et recevoir la newsletter

JavaScript Discussion :

[AJAX] Aide pour amélioration de code dans le cas où javascript pas accepter


Sujet :

JavaScript

  1. #1
    Membre actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2007
    Messages
    282
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Gers (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Octobre 2007
    Messages : 282
    Points : 229
    Points
    229
    Par défaut [AJAX] Aide pour amélioration de code dans le cas où javascript pas accepter
    Bonsoir.
    J'ai un formulaire pour s'inscrire pour recevoir ma newsletter. Jusque la pas de problème. C'est que du PHP et de l'HTML. Par contre, je nous souhaite pas rechercher la page que le formulaire une fois que l'utilisateur clique sur valider.
    En surfant sur internet, j'ai remarqué qu'il y avait une possibilité de valider un formulaire (et par la même occasion de faire lancé un script) sans recharger la page. J'avais deja fait sa avec une méthode lourde en ajax et pas fonctionnelle à 100%. En faisant des recherches sur notre amis "google", j'ai lu qu'il y avait une possibilité avec la librairy jquery qui est très utilisé (surtout par moi ) et que l'on pouvait faire ce que je souhaite avec $.post(url,params,callback). (source: http://jquery.developpeur-web2.com/documentation/ajax/$.post.php ).

    Voici mon code html correspondant au formulaire:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    <div id="formnewsletter">
    <form action="" method="post">
    Tape ton adresse mail:
    <input type="text" name="adresse" id="adresse"/>
    <input type="submit" value="S'inscrire"/>
    </form>
    </div>
    et voici mon code qui permet de faire ce que je souhaite:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    //initialisation du code
    $(document).ready(function()
    {
    //Lorsque on clique sur le bouton submit présent dans le div id="formnewsletter" faire ....
    	$("#formnewsletter").submit(function()
    	{
    		//recuperation de la valeur qui de l'id #adresse
    		var s = $("#adresse").val();
    		//verification de la syntaxe de l'adresse mail
    		//faire plutot avec système de regex
    		var place = s.indexOf("@",1); //decoupage en partie de l'adresse tapé par rapport à @
    		var point = s.indexOf(".",place+1); //decoupage en partie après @ et redecoupage par rapport au point
    		//si la première partie est plus grande que 1, puis que la seconde est supérieure à 2 et qu'après le point il y ait plus de deux caractère alors ...
    		if ((place > -1)&&(s.length >2)&&(point > 1))
    		{
    			//lancement de la requete ajax pour envoyer l'adresse dans le fichier newsletter.php qui enregistrera les nouveaux abonnés
    			$.ajax({
    				url: "newsletter.php",
    				type: "POST",
    				data: {adresse: s},
    				success: function (data)
    				{
    					//renvoie du message pour confirmer ou infirmer l'inscription
    					$("#formnewsletter").html=data;
    					//document.getElementById("formnewsletter").innerHTML=data;
    				}
    			});
    			return false;
    		}
    		else
    		{
    			$("#formnewsletter").html='<i>Entrez une adresse mail valable</i><form action="" method="post">Tape ton adresse mail:<input type="text" name="adresse" id="adresse"/><input type="submit" value="S\'inscrire"/>';
    		}
     
    	});
    });
    Cependant mon problème est que je souhaiterais que dans le cas où le javascript est désactivé, que le formulaire fonctionne avec pour action la page newsletter.php . Si je le met directement dans mon action du formulaire, il y a un problème en ce sens que je suis rediriger vers ma page newsletter.php que le javascript soit activé ou non.
    En schéma, je veux que si le javascript est activé que ce soit la méthode en ajax prenne l'exécution de la page newsletter.php et dans le cas inverse, que le formulaire envoye les informations vers la page newsletter.php

    Je ne sais pas si je suis clair, si vous avez des problèmes à comprendre, n'hésitez pas.

  2. #2
    Membre expérimenté
    Avatar de ryan
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2003
    Messages
    956
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2003
    Messages : 956
    Points : 1 316
    Points
    1 316
    Billets dans le blog
    1
    Par défaut
    Yop!

    Quelque chose du genre:
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    <div id="formnewsletter">
    <form action="newsletter.php" method="post">
    Tape ton adresse mail:
    <input type="text" name="adresse" id="adresse"/>
    <input type="submit" onclick="alert('foo'); return false;" value="S'inscrire"/>
    </form>
    </div>
    Si Javascript est activé, alert('foo') est exécuté mais pas l'action du formulaire.
    Si Javascript est désactivé, alert('foo') n'est pas exécuté mais l'action du formulaire l'est bien.
    Un ascenseur est une machine qui passe quand même la moitié de son temps à descendre.

  3. #3
    Membre actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2007
    Messages
    282
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Gers (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Octobre 2007
    Messages : 282
    Points : 229
    Points
    229
    Par défaut
    Merci pour ta réponse mais j'avais deja essayé ceci.
    J'explique comment le code actuel fonctionne.
    Le formulaire est relié au javascript jquery.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
    5
    6
    7
    8
     
    <div id="formnewsletter">
    <form action="" method="post">
    Tape ton adresse mail:
    <input type="text" name="adresse" id="adresse"/>
    <input type="submit" value="S'inscrire"/>
    </form>
    </div>
    Quand l'utilisateur clique sur le bouton, le code javascript et exécute les actions que je souhaite faire. L'action est lancé grace a cette instruction:
    $("#formnewsletter").submit(function()......

    Voila, cependant si le javascript est desactivé rien ne fonctionne. Je voudrais donc que dans le cas où le javascript est désactivé, que l'action du formulaire soit newsletter.php .

  4. #4
    Membre expérimenté
    Avatar de ryan
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2003
    Messages
    956
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Localisation : Belgique

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Multimédia et Internet

    Informations forums :
    Inscription : Juin 2003
    Messages : 956
    Points : 1 316
    Points
    1 316
    Billets dans le blog
    1
    Par défaut
    Yop!

    Je voudrais donc que dans le cas où le javascript est désactivé, que l'action du formulaire soit newsletter.php .
    Et en précisant simplement cette action dans la balise FORM, ça ne fonctionne pas comme tu le souhaites?
    Un ascenseur est une machine qui passe quand même la moitié de son temps à descendre.

  5. #5
    Membre actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2007
    Messages
    282
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Gers (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Octobre 2007
    Messages : 282
    Points : 229
    Points
    229
    Par défaut
    Non car dans le cas où le javascript est activé, je suis redirigé vers la page redirection.
    En gros si javascript activé alors pas redirection sinon redirection.

  6. #6
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Points : 2 351
    Points
    2 351
    Par défaut
    Salut,

    Il faut renseigner l'action de la balise form, ton soucis réside dans l'empêchement
    de l'envoi "naturel" du formulaire lorsque javascript fonctionne.

    Ce que propose ryan va dans ce sens (l'idée du return false dans un évènement)

    Cependant c'est l'évènement submit qu'il faut empêcher.

    Avec Jquery tu peux facilement empêcher le traitement par défaut avec la
    méthode preventDefault de l'objet event.

    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    1
    2
    3
    4
     
    $("#formnewsletter").submit( function(event) {
      event.preventDefault(); // empêche le traitement par défaut de l'évenement
    });
    Si ton code fait plus d'une ligne, c'est que tu as mal choisi ton langage !

  7. #7
    Rédacteur

    Avatar de Bovino
    Homme Profil pro
    Développeur Web
    Inscrit en
    Juin 2008
    Messages
    23 647
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : France, Gironde (Aquitaine)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : High Tech - Éditeur de logiciels

    Informations forums :
    Inscription : Juin 2008
    Messages : 23 647
    Points : 91 418
    Points
    91 418
    Billets dans le blog
    20
    Par défaut
    Code : Sélectionner tout - Visualiser dans une fenêtre à part
    <div id="formnewsletter">
    Il est peut-être aussi préférable d'associer le submit() au formulaire plutôt qu'à sa div conteneur !
    Pas de question technique par MP !
    Tout le monde peut participer à developpez.com, vous avez une idée, contactez-moi !
    Mes formations video2brain : La formation complète sur JavaScriptJavaScript et le DOM par la pratiquePHP 5 et MySQL : les fondamentaux
    Mon livre sur jQuery
    Module Firefox / Chrome d'intégration de JSFiddle et CodePen sur le forum

  8. #8
    Rédacteur
    Avatar de marcha
    Homme Profil pro
    Développeur Web
    Inscrit en
    Décembre 2003
    Messages
    1 571
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 53
    Localisation : Suisse

    Informations professionnelles :
    Activité : Développeur Web

    Informations forums :
    Inscription : Décembre 2003
    Messages : 1 571
    Points : 2 351
    Points
    2 351
    Par défaut
    ooops, bien vu Bovino :-)
    Si ton code fait plus d'une ligne, c'est que tu as mal choisi ton langage !

  9. #9
    Membre actif
    Homme Profil pro
    Développeur Web
    Inscrit en
    Octobre 2007
    Messages
    282
    Détails du profil
    Informations personnelles :
    Sexe : Homme
    Âge : 37
    Localisation : France, Gers (Midi Pyrénées)

    Informations professionnelles :
    Activité : Développeur Web
    Secteur : Administration - Collectivité locale

    Informations forums :
    Inscription : Octobre 2007
    Messages : 282
    Points : 229
    Points
    229
    Par défaut
    Impeccable, sa marche à 100%.
    J'aurais du mieux lire la doc jquery.
    Merci pour tous.

+ Répondre à la discussion
Cette discussion est résolue.

Discussions similaires

  1. [XL-2016] Besoin d'aide pour améliorer un code vba
    Par chrisl0 dans le forum Macros et VBA Excel
    Réponses: 9
    Dernier message: 17/02/2017, 11h19
  2. Besoin d'aide pour améliorer un code zoom sur image
    Par ROMAIN4 dans le forum Mise en page CSS
    Réponses: 10
    Dernier message: 01/12/2016, 11h49
  3. [XL-2007] Besoin d'aide pour améliorer mon code copier-coller
    Par capi81 dans le forum Macros et VBA Excel
    Réponses: 3
    Dernier message: 31/07/2014, 17h14
  4. Aide pour disséquer deux fonctions dans mon code
    Par joomoo79 dans le forum Général JavaScript
    Réponses: 2
    Dernier message: 05/11/2008, 17h53
  5. [VBA-E] Aide pour éxécuter mon code en cliquant sur un bouton dans excel.
    Par pauletta22 dans le forum Macros et VBA Excel
    Réponses: 53
    Dernier message: 29/05/2006, 14h47

Partager

Partager
  • Envoyer la discussion sur Viadeo
  • Envoyer la discussion sur Twitter
  • Envoyer la discussion sur Google
  • Envoyer la discussion sur Facebook
  • Envoyer la discussion sur Digg
  • Envoyer la discussion sur Delicious
  • Envoyer la discussion sur MySpace
  • Envoyer la discussion sur Yahoo