Discussion :

[ChristopheNeuilly]

Bonjour à tous,

Je me permets de faire appel à vos lumières car je me trouve face à une difficulté, que mes faibles connaissances en JavaScript ne m'ont pas permis de résoudre après plusieurs tests infructueux.

Voici le cas. J'ai une page en HTML au sein de laquelle j'ai prévu d'intégrer deux formulaires (de même type) avec un envoi des contenus via un fichier PHP. La validation des champs du formulaire se fait à l'aide dun fichier javascript et l'affachage de l'envoi (ou d'un non-envoi suite à la détection d'une erreur) se fait dynamiquement en ajax au sein de la page.

Voici ci-dessous le code des 2 formulaires.

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
35
36
37
38
39
40
41
42
43
44
45
46
<form id="contact-form" class="checkform" action="#" target="contact-send.php" method="post" >
    <div class="form-row clearfix">
        <label for="name" class="req">Votre nom *</label>
        <div class="form-value"><input type="text" name="name" class="name" id="name" value="" /></div>
    </div>
    <div class="form-row clearfix">
        <label for="email" class="req">Votre adresse email *</label>
        <div class="form-value"><input type="text" name="email" class="email" id="email" value="" /></div>
    </div>
    <div class="form-row clearfix textbox">
        <label for="message" class="req">Votre message *</label>
        <div class="form-value"><textarea name="message" class="message" id="message" rows="15" cols="50"></textarea></div>
    </div>
    <div id="form-note">
        <div class="alert alert-error">
	    <h6><strong>Erreur</strong>: assurez-vous d'avoir bien renseigné les différents champs !</h6>
	</div>
    </div>
    <div class="form-row form-submit">
        <input type="submit" name="submit_form" class="submit" value="Envoyer" />
    </div>
    <input type="hidden" name="subject" value="Contact depuis le site *****" />
    <input type="hidden" name="fields" value="name,email,message," />
    <input type="hidden" name="sendto" value="hello@*****.fr" />  
</form> 
<form id="contact-form" class="checkform"" action="#" target="contact-send.php" method="post" >
    <div class="form-row clearfix">
        <label for="name" class="req">Votre site</label>
        <div class="form-value"><input type="text" name="name" class="name" id="name" value="" /></div>
    </div>
    <div class="form-row clearfix">
        <label for="email" class="req">Votre adresse email *</label>
        <div class="form-value"><input type="text" name="email" class="email" id="email" value="" /></div>
    </div>
    <div id="form-note">
	<div class="alert alert-error">
            <h6><strong>Erreur</strong>: assurez-vous d'avoir bien renseigné les différents champs !</h6>
        </div>
    </div>
    <div class="form-row form-submit">
        <input type="submit" name="submit_form1" class="submit" value="Demander un audit" />
    </div>
    <input type="hidden" name="subject" value="Contact depuis le site *****" />
    <input type="hidden" name="fields" value="name,email,message," />
    <input type="hidden" name="sendto" value="hello@*****.fr" />  
</form>

Et le script JavaScript de validation du formulaire.

Code :

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
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
/*-----------------------------------------------------------------------------------
 	Script - Form Validation and Ajax Comments
-----------------------------------------------------------------------------------*/
jQuery(window).load(function($) {
	/*---------------------------------------------- 
				  F O R M   V A L I D A T I O N 
	------------------------------------------------*/
	jQuery("body").on("click", 'input[type="submit"]', function() {
		$form = jQuery(this).parents('form');
		form_action = $form.attr('target');
		form_class = $form.attr('class');
		id = $form.attr('id');
		if (form_class == 'checkform') {
			var control = true;
			$form.find('label.req').each(function(index){
				var name = jQuery(this).attr('for');
				defaultvalue = jQuery(this).html();
				value = $form.find('.'+name).val();
				formtype = $form.find('.'+name).attr('type');
				if (formtype == 'radio' || formtype == 'checkbox') {
					if (jQuery('.'+name+':checked').length == 0) { jQuery(this).siblings('div').find('.checkfalse').fadeIn(200); control = false;  } 
					else { jQuery(this).siblings('div').find('.checkfalse').fadeOut(200); }
				} else if(name == 'email') {
					var re = /^[\w-]+(\.[\w-]+)*@([\w-]+\.)+[a-zA-Z]{2,7}$/;
					if (!value.match(re)) { 
						$form.find('.'+name).addClass('false'); control = false; 
					} else { 
						$form.find('.'+name).removeClass('false'); 
					}
				} else {
					if (  value == '' || value == defaultvalue){
						$form.find('.'+name).addClass('false'); control = false; 
					} else { 
						$form.find('.'+name).removeClass('false');
					}
				}
			});
			if (!control) { 
				jQuery("#form-note").fadeIn(200);
				return false; 
			} else {
				jQuery("#form-note").fadeOut(200);
				if (form_action && form_action !== '') {
					var str = $form.serialize();
				   jQuery.ajax({
					   type: "POST",
					   url: form_action,
					   data: str,
					   success: function(msg){
						jQuery("#form-note").html(msg);
						jQuery("#form-note").delay(200).fadeIn(200);
					   }
				});
				return false;
			} else {
				return true;
			}
		} // END else {
		}
	});
});  // END jQuery(window).load(function($) {

En l'état, quand je clique sur le bouton "submit" du premier formulaire, le javascript fonctionne. En cas d'erreur dans les champs du formulaire, un message s'affiche dynamiquement (ajax) juste sous le bouton "submit". Et sans erreur, j'ai un message d'envoi qui s'affiche parfaitement, au même endroit.

Or, quand je lance le second formulaire et que je renseigne les différents champs (de façon correcte ou non), le message ne s'affiche pas, comme il le devrait, sous le bouton "submit" de ce deuxième formulaire mais sous le bouton "submit" du premier formulaire.

Je présume qu'il y a un souci dans le code du JavaScript mais mes piètres connaissances en JS ne me permettent pas de le résoudre.

Si je n'ai pas été clair, je vous prie de me le dire et je tâcherai d'être plus explicite !
Et si vous avez une idée de la manière de solutionner mon problème, j'en serais ravi.

Merci d'avance et excellente fin de semaine à tous,
Christophe

PS : mon sujet touche à différentes thématiques (JS, PHP, Mail, Jquerry). J'espère que le sujet est bien à sa place dans le forum.

[CosmoKnacki]

D'après moi le problème vient du fait que ton document html n'est pas valide car il utilise plusieurs fois les mêmes ids (qui sont censées être uniques), il faut donc commencer par corriger ça. En plus, toute cette partie de ton code jQuery:

Code :

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
if (!control) { 
    jQuery("#form-note").fadeIn(200);
    return false; 
} else {
    jQuery("#form-note").fadeOut(200);
    if (form_action && form_action !== '') {
        var str = $form.serialize();
        jQuery.ajax({
            type: "POST",
            url: form_action,
            data: str,
            success: function(msg) {
                jQuery("#form-note").html(msg);
                jQuery("#form-note").delay(200).fadeIn(200);
            }
        });
        return false;
    } else {
        return true;
    }
}

est dépendante de ces ids. Il faut donc changer cette portion de code de manière à ce qu'elle n'utilise plus littéralement l'id #form-note et que le bon emplacement soit déduit de la position dans l'arbre DOM du formulaire dont il est question (donc de manière relative en fonction de la position des noeuds).

Autre chose: tu as un double quote en trop dans le deuxième formulaire ici:

Code :

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

<form id="contact-form" class="checkform"" action="#" target="contact-send.php" method="post">

[ChristopheNeuilly]

Bonjour CosmoKnacki,

Je te remercie de t'être penché sur mes difficultés !

Comme tu me le conseilles, Je vais :
- modifier les 2 formulaires en intégrant des ids uniques ;
- supprimer le quote en trop.

Sur le code Jquerry, je sèche quelque peu, même si je comprends le principe général. Pourrais-tu détailler le mode opératoire ?
Je vais creuser !

Encore merci et bon dimanche,
Christophe

[CosmoKnacki]

Tu peux par exemple exploiter le fait que le bloc div du message d'alerte est situé dans les deux cas juste avant le bloc div du bouton submit en définissant:

Code :

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

alertbox = jQuery(this).parent().prev();

puis en remplaçant tous les jQuery("#form-note") par alertbox.

[ChristopheNeuilly]

Je te remercie pour ces précisions.

Je tâcherai de faire fonctionner correctement ces deux formulaires sur la même page. Mais pour l'heure, je vais profiter du soleil !

Bon dimanche,
Christophe