24 Novembre 2017 à 04:55:11

Auteur Sujet: Site de mariage - Formulaire d'inscription  (Lu 2614 fois)

cimbombom

  • Nouveau membre
  • *
  • Messages: 1
  • Points gagnés: 0
    • Voir le profil
Site de mariage - Formulaire d'inscription
« le: 11 Avril 2014 à 13:05:45 »
Bonjour,
 
J’aimerais créer un site web pour mon mariage qui aura lieu prochainement. Le site est déjà bien en place mais je rencontre un problème pour lequel j’espère trouver une solution grâce à votre aide :
 
Il y a un formulaire sur le site grâce auquel mes invités peuvent confirmer le choix du menu et leur présence. Evidemment, j’aimerais recevoir un mail quand un invité a rempli le formulaire.
 
Malheureusement, je n’y arrive pas. Je travaille sur Dreamweaver. La page HTML du formulaire est en lien avec un fichier javascript. Tout me semble nickel au niveau du codage. Pourtant, quand l’invité clique sur le bouton « envoyer », rien ne se passe.
 
Voici le code de la page HTML :

                <!-- add comment -->
                        <div class="add-comment contact-form">
                         
                            <div class="comment-form">
                            <form action="#" method="post" id="reservationForm" id="commentForm" />
                               
                                <div class="row field_text alignleft">
                                    <label class="label_title"><strong>PrEnom:</strong></label>
                                    <input type="text" name="prénom" id="prénom" value="" class="inputtext input_middle required" />
                                </div>
                               
                                <div class="row field_text alignleft omega">
                                    <label class="label_title"><strong>NOM:</strong></label>
                                    <input type="text" name="nom" id="nom" value="" class="inputtext input_middle required" />
                                </div>
                                                                           
                                <div class="clear"></div> 
                                                                           
                                                                            <div class="row field_text alignleft">
                                    <label class="label_title"><strong>Email:</strong></label>
                                    <input type="text" name="email" id="email" value="" class="inputtext input_middle required" />
                                </div>
                               
                                <div class="row field_text alignleft omega">
                                    <label class="label_title"><strong>TELEPhone:</strong></label>
                                    <input type="text" name="telephone" id="telephone" value="" class="inputtext input_middle required" />
                                </div>
                                                                           
                                <div class="clear"></div> 
                                                             
                               
                                <div class="row alignleft input_styled inlinelist omega">
                                                    <div class="rowRadio"><input type="radio" name="continent" value="radio_v1" id="radio_v1" checked="" /> <label for="radio_v1">OUI, JE VIENS</label></div>
                                                    <div class="rowRadio"><input type="radio" name="continent" value="radio_v2" id="radio_v2" /> <label for="radio_v2">NON, JE NE VIENS PAS</label></div>
                                                </div>
                               
                                <div class="clear"></div> 
                                                       
                                <div class="row rowSubmit">
                                <input type="submit" class="btn-submit" id="send" formaction="mail@mail.com" formmethod="POST" value="Envoyer" />
                                </div>
                            </form>
                            </div>
                        </div>
                <!--/add comment -->

Voici le code du fichier javascript :

jQuery(document).ready(function(){
          tfuse_reservations_form();
});
 
function tfuse_reservations_form(){
          var my_error;
          jQuery("#send").bind("click", function(){
 
          my_error = false;
          jQuery("#reservationForm input, #reservationForm textarea, #reservationForm radio, #reservationForm select").each(function(i)
          {
                                      var surrounding_element = jQuery(this);
                                      var value               = jQuery(this).attr("value");
                                      var check_for                       = jQuery(this).attr("id");
                                      var required                          = jQuery(this).hasClass("required");
 
                                      if(check_for == "email"){
                                               surrounding_element.removeClass("error valid");
                                               baseclases = surrounding_element.attr("class");
                                               if(!value.match(/^\w[\w|\.|\-]+@\w[\w|\.|\-]+\.[a-zA-Z]{2,4}$/)){
                                                         surrounding_element.attr("class",baseclases).addClass("error");
                                                         my_error = true;
                                               }else{
                                                         surrounding_element.attr("class",baseclases).addClass("valid");
                                               }
                                      }
 
                                      if(required && check_for != "email"){
                                               surrounding_element.removeClass("error valid");
                                               baseclases = surrounding_element.attr("class");
                                               if(value == ""){
                                                         surrounding_element.attr("class",baseclases).addClass("error");
                                                         my_error = true;
                                               }else{
                                                         surrounding_element.attr("class",baseclases).addClass("valid");
                                               }
                                      }
 
 
                               if(jQuery("#reservationForm input, #reservationForm textarea, #reservationForm radio, #reservationForm select").length  == i+1){
                                               if(my_error == false){
                                                         jQuery("#reservationForm").slideUp(400);
 
 
                                                         var $datastring = "ajax=true";
                                                         jQuery("#reservationForm input, #reservationForm textarea, #reservationForm radio, #reservationForm select").each(function(i)
                                                         {
                                                                  var $name = jQuery(this).attr('name');
                                                                  var $value = encodeURIComponent(jQuery(this).attr('value'));
                                                                  $datastring = $datastring + "&" + $name + "=" + $value;
                                                         });
 
 
                                                         jQuery(".ajax_form #send").fadeOut(100);
 
                                                         jQuery.ajax({
                                                            type: "POST",
                                                            url: "./rsvp.php",
                                                            data: $datastring,
                                                            success: function(response){
                                                            jQuery("#reservationForm").before("<div class='ajaxresponse' style='display: none;'></div>");
                                                            jQuery(".ajaxresponse").html(response).slideDown(400);
                                                            jQuery("#reservationForm #send").fadeIn(400);
                                                            jQuery("#reservationForm input, #reservationForm textarea, #reservationForm radio, #reservationForm select").val("");
                                                                     }
                                                                  });
                                                         }
                                      }
 
                            });
                             return false;
          });
}

Voici comment je les ai reliés dans Dreamweaver :



Et enfin le visuel de la page en question :



Je n'ai pas su où mettre l'adresse e-mail d'envoi dans le code Javascript. Autre chose, je m'étonne de voir un rsvp.php dans le code javascript alors que j'ai une page rsvp.html (celle du formulaire) et rsvp.js (celle du code java).

Sur demande je peux vous transmettre les deux fichiers.

Sauriez-vous me dire ce qui cloche ? Est-ce mieux de faire un formulaire PHP ?
 
Merci d’avance 1000x, ça m’embêterait de ne pas pouvoir mettre cette page sur mon site !

mathias

  • Rédacteur Modérateur
  • Intarissable
  • *****
  • Messages: 1287
  • Points gagnés: 4
    • Voir le profil
    • KERII : Création de solutions informatiques
Re : Site de mariage - Formulaire d'inscription
« Réponse #1 le: 14 Avril 2014 à 09:05:46 »
Bonjour;

Je n'ai pas eu le temps encore de regarder de près le code, toutefois je souhaite porter l'attention sur le fait que le Javascript c'est bien, toutefois il peut être désactivé dans le navigateur des visiteurs.

Aviez-vous une raison particulière d'utiliser javascript plutôt que PHP ?

Cordialement.
Administrateur système et réseau | Ingénieur R&D | Webmaster

Président | fondateur de KERII : Création de solutions informatiques

cycy

  • Nouveau membre
  • *
  • Messages: 1
  • Points gagnés: 0
    • Voir le profil
Re : Site de mariage - Formulaire d'inscription
« Réponse #2 le: 14 Avril 2014 à 22:25:27 »
Bonjour,

Pour envoyer un mail (sans passer par script côté serveur / php) alors il faut mettre l'adresse email au niveau de la balise form :
<form action="MAILTO:someone@example.com" method="post" id="reservationForm" id="commentForm" />

Publicité interdite : Liens modérés

mathias

  • Rédacteur Modérateur
  • Intarissable
  • *****
  • Messages: 1287
  • Points gagnés: 4
    • Voir le profil
    • KERII : Création de solutions informatiques
Re : Site de mariage - Formulaire d'inscription
« Réponse #3 le: 15 Avril 2014 à 08:31:09 »
Pour mieux comprendre comment MAILTO fonctionne dans le cadre de <form> je vous suggère vivement de regarder par ici
Support Microsoft
Administrateur système et réseau | Ingénieur R&D | Webmaster

Président | fondateur de KERII : Création de solutions informatiques

zola14

  • Nouveau membre
  • *
  • Messages: 1
  • Points gagnés: 0
    • Voir le profil
    • Windows Phone
Re : Site de mariage - Formulaire d'inscription
« Réponse #4 le: 24 Décembre 2014 à 14:04:55 »
Bonjour,

Le mailto peut être la meilleure alternative au javascript si votre site est hébergé sur un serveur qui ne supporte pas le PHP. Sinon le php est assez simple à mettre en place.

Nous tenir au courant ;o)
Passionné de Web et de l'informatique ;o)