8768 sujets

Développement web côté serveur, CMS

[Résolu] Jquery : foncions à paramètres.

Bonjour,
je viens vers vous car moi même je ne trouve plus...
Ce qui fait mon code :
1.vérifie si les boutons radio ont été bien cochés
2. si c'est pas le cas, il affiche un message erreur ce les boutons radio en question
2. si tout va bien ils supprime le message d'erreur si affiché.

Voici mon Jquery code:

$send435 = $('#send435'), // id de mon bouton valider le formulaire	
	$send435.click(function(){
        var valid= true;
		var $qone = $('input[name=qone]:checked').val();//mes boutons radio
		var $qtwo = $('input[name=qtwo]:checked').val();//mes boutons radio	 
		if($qone == null){
    	     $("#test1").next($erreur).css('display', 'block'); 
			 $("#test1").next($erreur).fadeIn().text("!! Please rate each of the criteria");
             valid=false;
			}
			else {$("#test1").next($erreur).fadeOut(); }
		
		if($qtwo == null){
				 $("#test2").next($erreur).css('display', 'block'); 
				 $("#test2").next($erreur).fadeIn().text("!! Please rate each of the criteria");
				 valid=false;
			}
			else {$("#test2").next($erreur).fadeOut();}
		return valid;
        });


Mon problème est le suivant, j'en ai plains de formulaires et de boutons à vérifier de la même manière donc ce que je voulais faire c'est d'effectuer cette vérification dans une fonction jquery ... Sauf que je n'arrive pas correctement et pour l'instant rien ne marche...

Voici mon code: 
var $send435 = $('#send435'), // id de mon bouton valider le formulaire
        $erreur = $('.erreur'); // <div> qui affiche message erreur

	var $test1 = $('#test1'); //  <fieldset id="test2">
	
	$send435.on( "click",  {
	champ: $('input[name=qone]:checked').val(),
	content: $test1
	}, verif);

	function verif(champ, content){
		 var valid= true;
		 if(champ == null){ // si le champ est vide
    	    content.next($erreur).css('display', 'block'); 
			content.next($erreur).fadeIn().text("!! Please rate each of the criteria yas");
            valid=false;
         }else {
				content.next($erreur).fadeOut();
				}
    }



Merci de vos lumières!
Teste les éléments du formulaire quand un événèment submit se produit.
<!DOCTYPE html>
<html lang="en">
<head>
	<title>Clique-moi partout</title>
	<meta charset="utf-8" />
</head>
<body>
<?php
	if(filter_has_var(INPUT_POST, 'radio-1')) {
?>
	<div>Tu es un être merveilleux  <?php echo str_repeat('&#10084; ', 10); ?></div>
<?php
	exit;
} else {
?>
	<form id="form1" method="post">
		<p><strong>Tu cliques bien partout !</strong></p>
<?php
	$entries = explode(' ', '1 2 3 4');
	foreach($entries as $k) { ?>
		<div>
			<p>Choix <?php echo $k; ?> :
<?php
		foreach(explode(' ', 'a b c') as $value) {
			$id = "id-radio-$k-$value";
			echo <<< RADIO
			<input id="$id" type="radio" name="radio-$k" value="$value" /><label for="$id">$value</label>\n
RADIO;
		}
?>
			</p>
		</div>
<?php
	}
}
?>
		<div>
			<label for="blaze">Ton blaze, man</label>
			<input id="blaze" name="blaze" value="" required />
		</div>
		<div>
			<input type="reset" />
			<input type="submit" />
		</div>
	</form>
	<script type="text/javascript">
		'use strict';
		document.getElementById('form1').addEventListener('submit', function(event) {
			const form1 = this;
			const result = ['<?php echo implode("','", $entries); ?>'].reduce(
				function(previousValue, name) {
					const inputName = 'radio-' + name;
					if(form1.elements[inputName].value == '' ) {
						console.log(inputName + ' pas coché');
						return previousValue + 1;
					} else {
						return previousValue;
					}
				},
				0
			);
			if(result > 0) {
				event.preventDefault();
				alert("T'as pas coché " + result + " cases !!!");
			}
		});
	</script>
</body>
</html>
Merci Bazooka07 ton code marche très bien. Coool

Mais j'insiste de le faire en Jquery Smiley biggrin . C'est le passage de paramètres qui a un problème dans mon code. Je suis pas du tout sûre de comment faire...?
AMHA, JQuery ne t'apportera pas grand chose de plus, à part de pouvoir jouer avec fadeIn/fadeOut, qu'on peut remplacer aisément avec des transitions en CSS3.

Tu commets 3 errreurs dans ton raisonnement :
- tu veux écouter les évènements 'click' sur un bouton au lieu d'écouter l'évènement 'submit' sur le formulaire
- tu veux contrôler tous les boutons radios, ce qui fait beaucoup, au lieu de contrôler les éléments nommés du formulaire
- tu imagines que je peux avoir des affinités avec Jquery; Et ben non, si on peut faire plus simple. Donc, n'insiste pas Smiley fache
Merci Bazooka07.

Les avantages de mon code par rapport au tien qui est un peu vieille école (ce qui n’empêche bien faite !), c'est que en passant par jquery:
- j’évite la fenêtre pop-up // pas trop aimé par les navigateurs...
- je peux personnaliser les messages d'erreur en fonction des boutons radio
-et je ne recharge pas la fenêtre à chaque 'submit' (si il y a des erreurs)...

Donc plus simple ne veut pas toujours dire mieux Smiley fache

Quelqu'un en Jquery ??? Smiley cligne
Oulala !!

* Il n 'y a aucune fenêtre popup dans l'exemple que je t'ai donné. C'est juste la fonction standard alert() de Javascript accepté par n'importe quel navigateur
https://developer.mozilla.org/fr/docs/Web/API/Window/alert
C'est clair qu'au point de vue esthétique, on peut faire mieux. Mais c'est du "quick and dirty".
Si tu n'es pas convaincu-e , on peut mettre une div cachée par défaut et qui s'affiche en cas d'erreur.
* Aucun souci pour avoir un message personnalisé avec alert() ou une div
* Aucun envoi ne se fait tant que le formulaire n'est pas correctement rempli.

A l'époque de IE6, c'était indispensable de connaître JQuery, compte tenu des incompatibilités entre navigateurs.
Aujourd'hui le contexte est beaucoup plus serein : les navigateurs sont beaucoup plus respectueux des standards du Web, Javascript a beaucoup de fonctions pour faire le taf, CSS3 a dégagé Flash.
Cela devient de plus en plus "has been" de vouloir imposer JQuery.
De plus, il rallonge le temps de réponse d'une page web.

Une autre remarque Smiley lol
et pour afficher le message d'erreur sous chaque suite de boutons radio, genre:
*btn 1 *btn2 * btn3
! Merci de choisir une valeur
*btn 1 *btn2 * btn3
! Merci de choisir une valeur
...
je ne veux pas qu'un message global, je veux un message par liste...

Tu le fais comment sans JQuery ? Smiley cligne
et une question avec :

Comment tu as pu mélanger deux langages dans du javascript tu as mis du PHP!

['<?php echo implode("','", $entries); ?>'].reduce(


I am lost ! Smiley eek
Modifié par justrundesign (22 May 2018 - 09:28)
Mélange , quel mépris par ceux qui n'y entendent rien Smiley fache
On utilise du PHP pour générer du code Javascript.
Tout ce qui est entre "<?php" et "?>" est interprété par le moteur PHP sur ton serveur avant d'envoyer du HTML pur et dur.
Arrivé sur ton PC, ton navigateur ne voit que du javascript.
Tapes Ctrl-U sur ton clavier pour afficher le source de la page HTML
tu viens de m'ouvrir les oreilles et changer ma vie! Smiley lol

ok!
je crée le fichier liée javascript à ma (ta) page et j'y copie mon code jusqu'à là entre <script type="text/javascript">...</script>
et puis ça ne marche plus ...
Tout ce qui est entre "<?php" et "?>" n'est plus interprété par le moteur PHP car il est dans le fichier .js et plus .php...

c'est pour cette raison je parlais de' mélanger', même si j'avoue le mot pas très choisi, mais le principe est là, dans ma logique on peut pas d'insérer du PHP dans du javascript pur ?

Mais peut-être que tu pourras encore me baigner de ta lumière Bazooka07 Smiley cligne
Modifié par justrundesign (22 May 2018 - 12:38)
justrundesign a écrit :

c'est pour cette raison je parlais de' mélanger', même si j'avoue le mot pas très choisi, mais le principe est là, dans ma logique on peut pas d'insérer du PHP dans du javascript pur ?


Non, tu ne peux pas insérer du code PHP dans du javascript pure. Par contre l'inverse oui, tu peux "générer" du javascript pure dans un fichier .php via du code php style 
echo "<script> blabla </script>";


Tu peux mélanger tout les langage (PHP, HTML, CSS, JAVASCRIPT) à partir du moment où tu donnes l'extension .php à ton fichier.

Dans index.php tu peux avoir tout le code partager dans le lien github
Modifié par JENCAL (22 May 2018 - 13:02)
justrundesign a écrit :
J'aime ça!

Mais ça veut dire que Jquery est mort ? comme à l'époque Flash...


Non pas du tout.
JENCAL a écrit :
Tu peux mélanger tout les langage (PHP, HTML, CSS, JAVASCRIPT) à partir du moment où tu donnes l'extension .php à ton fichier.


Intéressant ! Smiley party
Modifié par justrundesign (22 May 2018 - 14:10)
Sujet clos
Aller à