Débutant. Passage de paramètres avec jQuery. sélecteur(?)

Bonjour,

cette question va sans doute paraître triviale pour les plus expérimentés en jQuery, voire même javascript. Cependant, je continue mon apprentissage de ce langage et de ce framework. Et je suis tombé sur un os. J'en appelle donc à votre aide.

Background.

J'ai un formulaire classique sur ma page. J'utilise un fichier js pour passer les données remplies dans le formulaire via ajax qui appelle un script php de traitement des données. En fait, mon fichier js est construit de la même façon que celui dont j'ai déjà eu de l'aide ici. Seulement, mon tableau $_POST est vide dans le fichier script php.
La différence avec le formulaire qui marchait réside sans doute dans le fait que le formulaire actuel contient plus de balises en son sein.

Voilà les différents codes des pages

devis.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
 
<head>
        <title>XXXXXXXX</title>
        <script type="text/javascript" src="js/jquery-1.4.2.js"></script>
        <script type="text/javascript" src="js/formulaire.js"></script>
        ...
        <link rel="stylesheet" type="text/css" href="style.css" />
</head>
 
	...
<div id="bloc-central">
 
            <h1>Formulaire de devis</h1>
 
            <div id="bloc-devis">
                <form name="devis" action="devis.php" method="POST">
                    <fieldset class="devis">
                        <legend>Vos coordonnées</legend>
                        <table>
                            <tbody>
                                <tr><td>Votre nom : </td><td><input type="text" class="texte obligatoire textInput" name="nom" value="" /></td></tr>
                                <tr><td>Votre email : </td><td><input type="text" class="mail obligatoire textInput" name="email" value="" /></td></tr>
                                <tr><td>Votre numéro de téléphone : </td><td><input type="text" class="tel textInput" name="phone" value="" /></td></tr>
                            </tbody>
                        </table>
                    </fieldset>
                    <input type="submit" class="send" value="Envoyer" name="Send" disabled="disabled"/>
                </form>
            </div>
</div>

formulaire.js

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$(document).ready( function () {
    $("[id^='bloc-devis']").submit(function(){
        var str= $(this).serialize();
        $.ajax({ // fonction permettant de faire de l'ajax
            type: "POST",
            url: "ajax/validForm.php", 
            data: str, 
            async: false,
            success: function(msg){ // si l'appel a bien fonctionné
                if(msg==1) // si la connexion en php a fonctionnée
                {
                    alert('Votre email a bien été envoyé');
                }
                else // si la connexion en php n'a pas fonctionnée
                {
                    alert('Un problème a eu lieu lors du traitement de votre demande'+'\n\n'+msg);
                }
           }
        });
        return false;
    });
});

validForm.php

Code:

1
2
3
4
5
6
7
8
 
...
function debug($nomvar,$dbgvar) {
	//Fonction qui débug n'importe quelle variable dans un fichier htm
}
 
debug('POST', $_POST)
//Résultat : # 16-07-2010 - 14:39:29 Debug de la variable POST : array ( )

Ma question.

Je pense que le problème vient soit du sélecteur soit de la définition de la variable str avec 'this'. Que dois je mettre pour pouvoir transmettre mon tableau vers validForm.php?

Je vous remercie d'avance pour le temps que vous passerez à lire et/ou à répondre à ma question.

j'imagine que ton ajax arrive bien à envoyer des données au serveur (si non tu pourrais pas connaître la valeur de $_POST n'est-ce pas)
la première chose que je remarque c'est que tu a attaché l'événement submit à un élément qui n'est pas un form tu l'as mi à un div donc quand tu fais $(this).serialize jquery essaye de sérialiser ton div et pas ton form alors pas de données à envoyer, or selon la doc de jquery l'événement submit ne peut être attaché qu'un élément form, donc donnes un id à ton form pour le récupérer, ensuite pour récupérer un id en jquery tu fais simplement $("#monId")

essayes avec ça si ça marche ou pas encore

C'est parfait polkduran.
Je te remercie, ça fonctionne très bien maintenant. Et j'aurais ajouté une brique à mon apprentissage.

Bonne continuation.