Formulaire dans une popup

Bonjour tout le monde,

J'ai créé une popup pour le site de ma cliente et elle souhaite afficher le message d'erreur ou de validation dans la popup une fois le formulaire validé.

Est-ce possible ?
Car je ne travaille qu'en PHP et la validation de ce formulaire se fait dans une page PHP du coup automatiquement ca rafraichit la page.

Merci de votre aide.

Lien
Deux formulaires avec 2 popup différentes : boutons "Get a free audit" et "Ebook"

fanny95 a écrit :
Bonjour tout le monde,

J'ai créé une popup pour le site de ma cliente et elle souhaite afficher le message d'erreur ou de validation dans la popup une fois le formulaire validé.

Est-ce possible ?
Car je ne travaille qu'en PHP et la validation de ce formulaire se fait dans une page PHP du coup automatiquement ca rafraichit la page.

Merci de votre aide.

Lien
Deux formulaires avec 2 popup différentes : boutons "Get a free audit" et "Ebook"

popup ou layer ?

Si c'est dans une popup, tu ajoutes un target blank à ton formulaire. Je te décourage de faire cela. Cette pratique est désuète depuis très longtemps maintenant (pour des raisons ergonomiques et accessibilités il me semble)

Si c'est dans le layer, je t'invite à faire une requête Ajax.

Merci niuxe pour ta reactivite.
C'est dans une popup ici, qu'appelles-tu dans un layer ?

Quelle est la solution la plus simple pour utiliser de l'ajax via mon form ici?
Voici le code:

<?php session_start(); ?>
<?php
$ebook_form = get_session_var('tab_ebook'); unset($_SESSION['tab_ebook']);
$msg_erreur_ebook = get_session_var('msg_erreur_ebook'); unset($_SESSION['msg_erreur_ebook']);
$error_constant_ebook	= $msg_erreur_ebook['constant'];
$error_class_ebook = $msg_erreur_ebook['class'];
?>

<!-- POPUP EBOOK -->
<div class="md-modal md-effect-1" id="modal-1">
    <div class="md-content">
        <h3>Download our ebook</h3>
        <div>
<form action="<?php echo _CONTROL.'form-ebook.php' ?>" method="post">
	<input type="text" value="" name="name_ebook" id="name_ebook" placeholder="Name *" required />
	<input type="text" value="" name="surname_ebook" id="surname_ebook" placeholder="Surname" />
	<input type="email" value="" name="email_ebook" id="email_ebook" placeholder="Email address *" required />
    <input type="submit" value="Get my ebook" class="button" />
</form>
        </div>
    </div>
</div>

<section id="sec-ebook">
            <p class="button md-trigger" data-modal="modal-1">Download our ebook</p>
            <div class="message">
            <?php if($msg_erreur_ebook != false)
            { ?>
                <p><?php echo constant($error_constant_ebook); ?></p><?php
            }?>
            </div>
            <div id="validationMessage"></div>
    </section>

fanny95 a écrit :
Merci niuxe pour ta reactivite.
C'est dans une popup ici, qu'appelles-tu dans un layer ?

popup =>

<a href="http://un-lien-vers-noouvelle-fenetre.com" target="_blank">un lien vers une nouvelle fenetre</a>

ou

document.getElementById('mon-lien').addEventListener('click', function(){
    window.open('http://un-lien-vers-noouvelle-fenetre.com', "titre de la fenetre");
});

layer :

document.getElementById('mon-lien').addEventListener('click', function(){
    document.getElementById('mon-layer').style.display = "block";
});

fanny95 a écrit :
Quelle est la solution la plus simple pour utiliser de l'ajax via mon form ici?
Voici le code:

<?php session_start(); ?>
<?php
$ebook_form = get_session_var('tab_ebook'); unset($_SESSION['tab_ebook']);
$msg_erreur_ebook = get_session_var('msg_erreur_ebook'); unset($_SESSION['msg_erreur_ebook']);
$error_constant_ebook	= $msg_erreur_ebook['constant'];
$error_class_ebook = $msg_erreur_ebook['class'];
?>

<!-- POPUP EBOOK -->
<div class="md-modal md-effect-1" id="modal-1">
    <div class="md-content">
        <h3>Download our ebook</h3>
        <div>
<form action="<?php echo _CONTROL.'form-ebook.php' ?>" method="post">
	<input type="text" value="" name="name_ebook" id="name_ebook" placeholder="Name *" required />
	<input type="text" value="" name="surname_ebook" id="surname_ebook" placeholder="Surname" />
	<input type="email" value="" name="email_ebook" id="email_ebook" placeholder="Email address *" required />
    <input type="submit" value="Get my ebook" class="button" />
</form>
        </div>
    </div>
</div>

<section id="sec-ebook">
            <p class="button md-trigger" data-modal="modal-1">Download our ebook</p>
            <div class="message">
            <?php if($msg_erreur_ebook != false)
            { ?>
                <p><?php echo constant($error_constant_ebook); ?></p><?php
            }?>
            </div>
            <div id="validationMessage"></div>
    </section>

partant du principe que la variable $error_class_ebook est un array et que l'url de ce fichier est : /mon-controller.php

<?php session_start(); ?>
<?php
$ebook_form = get_session_var('tab_ebook'); unset($_SESSION['tab_ebook']);
$msg_erreur_ebook = get_session_var('msg_erreur_ebook'); unset($_SESSION['msg_erreur_ebook']);
$error_constant_ebook	= $msg_erreur_ebook['constant'];
$error_class_ebook = $msg_erreur_ebook['class']; 
if($error_class_ebook){
echo json_encode($error_class_ebook);
}

?>

Je te le fais avec Jquery bien que ce en soit pas tellement nécessaire. Maintenant on peut largement s'en passer. Cependant, j'ai du mal à visualiser le contexte (contenu de tes variables). Pas facile de t'aider.

$('#modal-1 form').on('submit',function(e){
    $.ajax({
        url : 'form-ebook.php',
        dataType : 'json', 
        success : function(data){
            if(data !== undefined){
                for(var item in data){
                    //partant du principe que chaque champ soit identifié dans tes message erreur
                    // ex : item['name_ebook']

                    //place une classe erreur dans le champs et ajoute le message erreur adéquate
                    $("#" + item).addClass('error').after('<span class="error">'+ data[item] +'</span>');
                    
                }
            }            
        }
        
    });

    //s'il y a un message erreur dans le formulaire, on bloque "le chargement de page"
    if($('.error', $(this)).length > 0){
        e.preventDefault();
    }
});

* code fait de tête. Je peux m'être trompé
Modifié par niuxe (07 Aug 2017 - 18:18)

Merci de ton aide !
Probleme resolu avec le code suivant. Par contre j'ai besoin d'afficher le msg d'erreur dans une nouvelle popup et non dans la meme popup que le formulaire. Quelqu'un saurait-il comment faire ?
J'ai essayé de mettre cette ligne la mais rien n'y fait ca ne m'affiche rien.
$("#ebookmerci").modal('show');

$(function() {
    var form_ebook = $('#form-ebook');
    var form_ebookMessages = $('#form-messages-ebook');
	
	$(form_ebook).submit(function(event) {
		// Stop the browser from submitting the form.
		event.preventDefault();
	
		var formData = $(form_ebook).serialize();
		$.ajax({
			type: 'POST',
			url: $(form_ebook).attr('action'),
			data: formData
		})
		
		.done(function(response) {
			// Make sure that the formMessages div has the 'success' class.
			$(form_ebookMessages).removeClass('error');
			$(form_ebookMessages).addClass('success');
			
			// Set the message text.
			$(form_ebookMessages).text('Your message has been sent. We will come back to you shortly.');
// Je sais je ne devrais pas mettre cette ligne ci-dessus mais je n'arrive pas a faire fonctionner la ligne ci-dessous pour afficher la modal avec mon msg de confirmation.
			$("#ebookmerci").modal('show');
			
			// Clear the form.
			$('#name_ebook').val('');
			$('#ebook_ebook').val('');
		})
		
		.fail(function(data) {
			// Make sure that the formMessages div has the 'error' class.
			$(form_ebookMessages).removeClass('success');
			$(form_ebookMessages).addClass('error');
		
			// Set the message text.
			if (data.responseText !== '') {
				$(form_ebookMessages).text(data.responseText);
			} else {
				$(form_ebookMessages).text('Something went wrong. The message couln\'t be sent. Please try again.');
			}
		});
		});

Modifié par fanny95 (08 Aug 2017 - 05:15)

Le mieux est d'effacer ou masquer le contenu de la modal et afficher ce que tu souhaites. De mon côté, je masque souvent. J'évite d'effacer. Je me dis souvent : autant le garder, ça peut servir un jour où l'autre (et la gestion est plus simple)

En regardant le code de la modal/popin, ça devrait être un truc comme * :

<!-- POPUP EBOOK -->
<div class="md-modal md-effect-1" id="modal-1">
    <div class="md-content">
        <h3>Download our ebook</h3>
        <div>            
			<div class="message" id="form-messages-ebook"></div>
            <div id="validationMessage"></div>            
            <form action="http://theboxpartnership.com/fanny/controleur/form-ebook.php" method="post" id="form-ebook">
            	<input type="text" value="" name="name_ebook" id="name_ebook" placeholder="Name *" required />
            	<input type="email" value="" name="email_ebook" id="email_ebook" placeholder="Email address *" required />
                <input type="submit" value="Get my ebook" class="button" />
            </form>
            <button class="md-close">X</button>
        </div>
        <div class="hide">
            <p>Your message has been sent. We will come back to you shortly.</p>
            <button class="md-close">X</button>
        </div>
    </div>
</div>

.hide{
    display:none;
}

$('#modal-1.md-show .md-content > div').toggleClass('hide'); 

Cela veut dire que lorsque l'utilisateur referme la popin, il faut faire le sens inverse (masquer le second div et afficher le form). Un truc comme ça normalement * :

$('#modal-1.md-show .md-content > div:eq(1) .md-close').on('click', function(e){
    //setTimeout à mettre en place ??? 
    $('#modal-1.md-show .md-content > div').toggleClass('hide'); 
    e.preventefault();
});

Au passage, je préfère mettre e.preventDefault() à la fin des instructions. J'ai déjà vu des comportements inadéquates.

Pour ton souci de header, je regarderai ce matin en arrivant au bureau. Là je t'avoue je suis dans la phase de réveil et café

* code fait de tête je peux m'être trompé
Modifié par niuxe (08 Aug 2017 - 08:10)