code jQuery trop ancien ou erreur ?

Version imprimable

Bonjour à tous

Je suis un novice en jquery et j'ai trouvé un petit tuto sympathique mais qui date de 2014.
Concrètement je code en PHP mais le PHP ne permet pas d'envoyer un form de recharger automatiquement et d'afficher directement les nouvelles données sans gêner l'utilisateur.
Voici le code de la page php :

Code:

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
<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <script src="../public/jquery.js"></script>
    <script src="../public/test_chargement_auto.js"></script>
    <title></title>
</head>
<body>
<form class="form" action="<?php $_SERVER['REQUEST_URI']; ?>" method="post" id="registrationForm" class="formulaire">
                        <div class="input-group">
                        <div class="col-6">
 
 
 
 
                                <label class="" for="numero_piece">
                                    <h4>Numéro de pièce</h4></label>
                                <input type="text" class="numero_piece" name="numero_piece" id="numero_piece"  title="enter your first name if any." >
 
 
                        </div>
                        <div class="col-6">
 
 
                                <label for="intitule_piece">
                                    <h4>Intitulé</h4></label>
                                <input type="text" class="intitule_piece" name="intitule_piece" id="intitule_piece" placeholder="last name" title="enter your last name if any." >
 
                        </div>
                    </div>
 
                    <button  type="submit" name="valider"><i class=" submit "></i> Valider</button>
                </form>

et celui de la page jquery :

Code:

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function(){
	$('.formulaire').submit(function(){
		var num = $('.numero_piece').val();
		var intitule = $('.intitule_piece').val();
 
		alert (num + intitule);
 
 
	})
 
});

Vous voyez des erreurs ?

Cordialement, stéphane

17/10/2022, 14h13
Toufik83
Bonjour,

Lorsque vous soumettez le formulaire, la page est rechargée et donc => perte de JS, pour éviter ceci, vous devriez empêcher la soumission classique du formulaire avec event.preventDefault() :
Code:

1 2 3 4 5 6 $('.formulaire').submit(function(e){ e.preventDefault();// ICI var num = $('.numero_piece').val(); var intitule = $('.intitule_piece').val(); alert (num + intitule); });
17/10/2022, 14h24
SpaceFrog

Code:

<form class="form" action="<?php $_SERVER['REQUEST_URI']; ?>" method="post" id="registrationForm" class="formulaire">
17/10/2022, 14h28
belote3131

c'est fait mais ça ne fonctionne toujours pas,
pour la classe ça ne change rien non plus (notez que j'en avais 2)
17/10/2022, 14h47
Toufik83

L'alert() ne se déclenche pas?
17/10/2022, 14h55
belote3131

nope ça ne se déclenche pas, pourtant si je fais un test sur la même page avec un alert sans la fonction il se déclenche
17/10/2022, 15h01
Toufik83

Aucune erreur dans la console du navigateur ?

Code:

1
2
3
4
5
6
7
$(document).ready(function(){
	$('.formulaire').submit(function(){
		var num = $('.numero_piece').val();
		var intitule = $('.intitule_piece').val(); 
		alert (num + intitule); 
	});
});

Il faut refermer le document ready

17/10/2022, 15h06
belote3131

aucune erreur et si je fais un var dump mon post est bien soumis
17/10/2022, 15h07
SpaceFrog

Il y a forcément une erreur en console au chargement de la page si le ready n'est pas fermé ...
17/10/2022, 15h07
belote3131

il est déjà fermé fait défiler ma page jusqu'au bout tu verras
17/10/2022, 15h10
SpaceFrog

JQuery est bien chargé ?

Pour moi ça fonctionnne ... (avec un seuls attribut class )

https://jsfiddle.net/v1L485xg/

alors sur ce point je ne suis pas un expert mais quand j'ai essayé ce code
Code:

1 2 3 4 5 6 7 8 9 window.onload = function() { if (window.jQuery) { // jQuery is loaded alert("Yeah!"); } else { // jQuery is not loaded alert("Doesn't Work"); } }
ça disait yeah

J'ai download cette version : https://code.jquery.com/jquery-3.6.1.js

17/10/2022, 15h18
SpaceFrog

Il y a forcément un truc que tu ne nous dis pas (par ignorance ;) ) car le code test fonctionne.
inspecte la console, les onglets réseau et console.

Ou alors tu fais comme je fais régulièrement, je ne teste pas les bons fichiers, je passe des heures à modifier mes scripts, mais au moment de tester je n'affiche pas le bon fichier ... :aie:

Ou encore explore la piste du cache ...
Vérifie que tu vois bein ton script JQuery dans les sources de la page
17/10/2022, 15h25
belote3131

D'accord je vais essayer de chercher, merci pour votre aide en tout cas, oui je le vois bien dans les sources, en effet ça doit être un truc totalement futile en plus

edit : ça fonctionne j'ai juste supprimé le e.preventDefault();// ICI que tu m'avais demandé de rajouter
Ils me disaient que ce n'était pas une fonction, donc c'était sans doute un truc modifié avant comme les 2 classes

Merci à vous
17/10/2022, 15h38
SpaceFrog
Citation:

en effet ça doit être un truc totalement futile en plus

Oui donc vu d'ici, pas facile de t'aider beaucoup plus... :(
essaye des choses simples comme mettre un alert au load ...

soit dans un ready
Code:

1 2 3 $(document).ready(function(){ alert ('Jquery chargé'); });
ou autre syntaxe:
Code:

1 2 3 $(function(){ alert('Jquery Chargé'); });
17/10/2022, 15h46
Toufik83
Citation:

Envoyé par belote3131

edit : ça fonctionne j'ai juste supprimé le e.preventDefault();// ICI que tu m'avais demandé de rajouter
Ils me disaient que ce n'était pas une fonction

Surement parce que vous avez oublié le paramètre e de la fonction submit :
Code:

1 2 .submit(function(e){ e.preventDefault();// ICI

Bonjour,

Citation:

Envoyé par SpaceFrog

Pour moi ça fonctionnne ... (avec un seuls attribut class )

Tout à fait
Soit le code :
Code:

1 2 3 4 5 6 7 8 9 10 $(document).ready(function() { $('.formulaire').submit(function(e) { e.preventDefault(); alert("Formulaire"); }); $('.form').submit(function(e) { e.preventDefault(); alert("BINGO !!"); }); });
la construction :
Code:

1 2 3 <form class="formulaire" class="form" action=""> <button type="submit" name="valider"> Valider</button> </form>
... affichera « Formulaire »

la construction :
Code:

1 2 3 <form class="form" class="formulaire" action=""> <button type="submit" name="valider"> Valider</button> </form>
... affichera « BINGO !! ».

Le code HTML présentant deux attributs class n'est pas valide, « Error : Duplicate attribute class »,et jQuery travaille sur du HTML conforme.