11540 sujets

JavaScript, DOM et API Web HTML5

Slider Jquery UI pour submit un formulaire

Salut à tous,

Je suis tombé sur une "nouvelle" sorte d'envoie de formulaire qui utilise un slider.
Voici l'exemple : http://theymakeapps.com/users/add

J'ai décidé d'utiliser le slider "Snap to Increment" proposé par jQuery UI pour imiter celui de l'exemple.
Je suis assez novice en jQuery et je ne sais pas du tout comment m'y prendre.

Voici le code jQuery :
$(function() {
    $( "#slider" ).slider({
      value:100,
      min: 0,
      max: 500,
      step: 50,
      slide: function( event, ui ) {
        $( "#amount" ).val( "$" + ui.value );
      }
    });
    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
  });
  </script>


Dans l'idéal, il faudrait que la valeur maximale (500 dans ce cas-ci) corresponde à l'envoie du formulaire.

En résumé : valeur 500 = submit form.

Si vous manquez d'information quant au code ou à l'idée, n'hésitez pas.
Merci d'avance pour votre aide.
Modifié par Brosqki (21 Apr 2013 - 14:28)
La fonction que tu dois utiliser est change avec une condition qui retounera un .submit à 500 

        change: function(event, ui) {
            if (ui.value == '500') {  $('#form').submit(); } 
        }

Modifié par tazzkiller (21 Apr 2013 - 19:02)
Merci beaucoup pour ton aide

Voici donc le code modifié : 

$(function() {
    $( "#slider" ).slider({
      value:25,
      min: 0,
      max: 200,
      step: 25,
  		change: function(event, ui) {
        if ( $( "#amount" ).val( "$" + ui.value ) == '500' ) {
            $("#form").submit();
        }
        }
    });
    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
  	});


Mais rien ne se passe.

Peut être que le soucis vient de l'HTML ?

<form method="POST" enctype="multipart/form-data" action="do_sendform.php">
			<input type="text" name="nom" placeholder="Nom et prenom" required="required">
			<input type="mail" name="mail" placeholder="Adresse mail" required="required">
			<input type="tel" name="phone" placeholder="Telephone">
			<textarea name="message" rows="5" cols="30" placeholder="Cher Brian," required="required"></textarea>
			<div id="slider"></div>
			</form>
j'ai modifier la code que je t'ai laissé au dessus mais si tu ne definis pas l'id form a ton form jquery ne pourra pas executer le submit
jQuery :

$(function() {
    $( "#slider" ).slider({
      value:25,
      min: 0,
      max: 200,
      step: 25,
  		change: function(event, ui) {
            if (ui.value == '500') {  $('#form').submit(); } 
        }
    });
    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
  	});


HTML : 

<form id="form" method="POST" enctype="multipart/form-data" action="do_sendform.php">
			<input type="text" name="nom" placeholder="Nom et prenom" required="required">
			<input type="mail" name="mail" placeholder="Adresse mail" required="required">
			<input type="tel" name="phone" placeholder="Telephone">
			<textarea name="message" rows="5" cols="30" placeholder="Cher Brian," required="required"></textarea>
			<div id="slider"></div>
			</form>


Rien ne se passe.

Tu peux tester à cette adresse (Dans contact)
-> http://briangouwy.be/Avril/index.html


Edit : Au temps pour moi, le problème venait simplement de la valeur 500, alors que j'avais modifié le script et mis la valeur maximale à 200. Maintenant ça fonctionne.

Un tout grand merci!

Prochaine étape : Ne pas dirigé sur une autre page après l'envoie du formulaire. Je ferais surement un nouveau post si j'ai besoin d'aide.
Modifié par Brosqki (21 Apr 2013 - 19:28)
pour ne pas rediriger vers la page du formulaire il te suffit juste de faire :


$('#form').submit(function() {
return false;
});
J'ai pas vraiment compris,

Je rajoute ça au code que tu m'as fourni, ou c'est une nouvelle fonction à ajouter plus loin dans le script ?
tu remplaces le .submit existant par celui la, par contre rien ne signalera à l'internaute que le formulaire a été envoyé malgré que celui ci soit bien parti !! donc je te conseil de te tourner vers un jquery de modal dialog afin de l'en informer
Ce que je comptais faire en fait, c'est styliser le slider, et en dessous du slider au bout à droite (en dessous de la valeur 200), afficher "Envoyer" et une fois que la valeur est atteinte (en faisant glisser le curseur), celui-ci se changerait en "Envoyé".

Je sais pas si c'est ce dont tu voulais parler ?

Par contre, j'ai essayé d'envoyer le formulaire, et rien ne fonctionne...
Je suis en train de me rendre compte que ce que je souhaite faire est beaucoup plus complexe que ce que je pensais au départ.

En effet, je viens de me rendre compte qu'il fallait ne pas être redirigé sur une autre page lors de l'envoie, que les saisies devaient être réinitialisées, et le slider remis à son point de départ. Tout ça sans rafraîchir la page. Du coup, je pense que ça va nécessiter une petite injection d'Ajax.
Modifié par Brosqki (21 Apr 2013 - 23:33)
tu as un problème avec la fermeture de tes parenthèses et accolades remplace ton code :

$(function() {
    $( "#slider" ).slider({
      value:25,
      min: 0,
      max: 200,
      step: 25,
  		change: function(event, ui) {
            if (ui.value == '200') {  $('#form').submit(function() {
			return false;
			});
        }
    });
    $( "#amount" ).val( "$" + $( "#slider" ).slider( "value" ) );
  	});



par celui la :


    $( "#slider" ).slider({
      value:25,
      min: 0,
      max: 200,
      step: 25,
  		change: function(event, ui) {
            if (ui.value == '200') {  $('#form').submit(function() {
			return false;
			});
        }
    }
  	});


je t'ai retirer une parti que tu ne dois pas avoir besoin comme le $(function() au début et ta ligne .val sur #amount qui n'existe pas dans ton code html ... et d'ailleurs je me demande bien à quoi peuvent servir tes steps dans le slider ?
Modifié par tazzkiller (21 Apr 2013 - 23:35)
Oui j'avais fini par remarquer cette accolade qui manquait.

J'ai finalement décidé de retirer cette fonction, car de toute manière, aucun mail ne m'est envoyé et que les alerte de champs de saisie obligatoire ne s'affiche pas lorsque les champs sont laissés vides.
Si tu veux pouvoir utiliser le système de vérification jquery il te faut mettre un bouton submit en display:none et non pas faire un .submit mais un .trigger('click') sur ce bouton et la je pense que la verification ce fera.
C'était sur cette idée que je partais à la base justement.

J'ai donc modifié le code : 

$( "#slider" ).slider({
      value:25,
      min: 0,
      max: 200,
      step: 25,
  		change: function(event, ui) {
            if (ui.value == '200') {  $('input[type=submit]').trigger('click');
        	}
        } 
    });


Les champs sont correctement signalés, maintenant, l'envoie du mail ne se fait pas.

J'ai bien une page php appelée do_sendform.php qui est faite, avec ce code s'y trouvant :

<?php 
$nom = $_POST["nom"];
$mail = $_POST["mail"];
$phone = $_POST["phone"];
$message = $_POST["message"];

$msg = "Sender Name:\t$nom\n";
$msg .= "Sender E-Mail:\t$mail\n";
$msg .= "Sender Phone:\t$phone\n";
$msg .= "Message:\t$message\n\n";

$recipient = "brian.gouwy@gmail.com";
$subject = "Sith Web";

$mailheaders = "From: My Web Site <> \n";
$mailheaders .= "Reply-To: $mail\n\n";

mail($recipient, $subject, $msg, $mailheaders);
?>


Ce code fonctionnait très bien avec mon ancien site, donc je vois pas du tout d'où provient l'erreur.
pourtant le formulaire chez moi est bien envoyé et ta page me retourne bien les variables de celui ci ....
Oui, j'ai regardé mes spams.

Je viens de faire un test avec mon ancien formulaire, et je ne reçois plus d'email non plus. Je comprends pas du tout d'où vient l'erreur.
Sujet clos
Aller à