code jQuery trop ancien ou erreur ?

**belote3131** · 17/10/2022, 13h47

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 html :

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
<!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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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

**Toufik83** · 17/10/2022, 14h13

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 :

Sélectionner tout - Visualiser dans une fenêtre à part

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);
});

**SpaceFrog** · 17/10/2022, 14h24

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<form class="form" action="<?php $_SERVER['REQUEST_URI']; ?>" method="post" id="registrationForm" class="formulaire">

**belote3131** · 17/10/2022, 14h28

c'est fait mais ça ne fonctionne toujours pas,
pour la classe ça ne change rien non plus (notez que j'en avais 2)

**Toufik83** · 17/10/2022, 14h47

L'alert() ne se déclenche pas?

**belote3131** · 17/10/2022, 14h55

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

**Toufik83** · 17/10/2022, 15h01

Aucune erreur dans la console du navigateur ?

**SpaceFrog** · 17/10/2022, 15h04

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

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

code jQuery trop ancien ou erreur ?

jQuery

Vue hybride

Discussions similaires

Partager

Partager