Page privée

tpm-form_sur_mesure.php

<?php
/*
Template Name: Formulaire sur-mesure
*/



get_header(); ?>
      
		  
<main id="main" class="site-main" role="main">

   <video class="background" autoplay muted loop src="wp-content/themes/astra-child/assets/video/background.m4v"></video>
   
    <div class="container-fluid" id="form_password">
       <div class="row">
            <h2 class="title">Entrez le mot de passe :</h2>
                <?php 

                    $post = get_post(79);               
                    echo get_the_password_form($post);

                ?>
           </div>
        <div class="row">
            <p>
                <span class="btn-indices">Indices</span>
            </p>
        </div>
        <div class="indices">
            <div class="row">
                <div class="col-3">
                    <input type="text" id="indice1" class="input_indice" placeholder="1er indice" />
                </div>
                <div class="col-3">
                    <input type="text" id="indice2" class="input_indice" placeholder="2e indice" />
                </div>
                <div class="col-3">
                    <input type="text" id="indice3" class="input_indice" placeholder="3e indice" />
                </div>
                <div class="col-3">
                    <input type="text" id="indice4" class="input_indice" placeholder="4e indice" />
                </div>
            </div>
            <div class="row last">
                <div class="col-4">
                    <input type="text" id="indice5" class="input_indice" placeholder="5e indice" />
                </div>
                <div class="col-4">
                    <input type="text" id="indice6" class="input_indice" placeholder="6e indice" />
                </div>
                <div class="col-4">
                    <input type="text" id="indice7" class="input_indice" placeholder="7e indice" />
                </div>
            </div>
            <div id="message_valide">
                Vous devez maintenant saisir les 7 indices à la suite dans le champ mot de passe afin de valider le mot de passe.
            </div>
        </div>
    </div>
</main>

<script
  src="https://code.jquery.com/jquery-3.4.1.js"
  integrity="sha256-WpOohJOqMqqyKL9FccASB9O0KwACQJpFTUBLTYOVvVU="
  crossorigin="anonymous"></script>

<?php get_footer(); ?>

<script>
    jQuery(function ($) {
        $(document).ready(function () {

            // Ouverture de la zone indices
            $('.btn-indices').click(function () {
               $('.indices').toggle();
            });

            // Validation du champ password
            $("#password").on("change paste keyup", function () {
                var input = $(this),
                    val = $(this).val(),
                    rep = $(this).attr("id");

                $.ajax({
                    method: 'POST',
                    type: 'POST',
                    url: '/wp-content/themes/astra-child/form_password/valid_input.php',
                    data: {id: rep, val: val},
                    success: function (result) {
                        if (result == "yes") {
                            console.log(input);
                            input.addClass("good");
                            input.removeClass("bad");
                            $('#form_password input[type="submit"]').removeAttr('disabled');
                        }
                        else {
                            input.removeClass("good");
                            input.addClass("bad");
                           // $('#form_password input[type="submit"]').attr('disabled', 'disabled');
                        }
                    }
                });
            });

            // Chaque fois qu'un input est modifié, une requête ajax est envoyé pour vérifier la valeur du code
            $(".input_indice").on("change paste keyup", function () {
                var input = $(this),
                    val = $(this).val(),
                    rep = $(this).attr("id");

                $.ajax({
                    method: 'POST',
                    type: 'POST',
                    url: '/wp-content/themes/astra-child/form_password/valid_input.php',
                    data: {id: rep, val: val},
                    success: function (result) {
                        if(result == "yes") {
                            input.css("border","2px solid green");
                            input.addClass('good');
                        }
                        else {
                            input.css("border", "2px solid red");
                            input.removeClass('good');
                        }
                        // On vérifie également que tous les mots de passe soient justes
                        var tout_juste = 0;
                        $(".input_indice").each(function () {
                            if($(this).hasClass('good')) {
                                tout_juste++;
                            }
                        });
                        if(tout_juste == 7) {
                            // Si tout est juste on active le bouton submit du champ principal
                            $('#message_valide').show();
                        }
                        else {
                            // Sinon on le désactive
                            $('#message_valide').hide();
                        }
                    }
                });

            });


            // Lors de la validation du formulaire
            $("#form_mdp").on('submit', function (e) {
                // Bloque l'envoi du formulaire
                e.preventDefault();

                var input = $("#password"),
                    val = $("#password").val(),
                    rep = $("#password").attr("id");

                $.ajax({
                    method: 'POST',
                    type: 'POST',
                    url: '/wp-content/themes/astra-child/form_password/valid_input.php',
                    data: {id: rep, val: val},
                    success: function (result) {
                        if (result == "yes") {
                            window.location.href = $("#form_mdp").attr("action")+"?password="+val;
                        }
                        else {
                            return false;
                        }
                    }
                });
            });

        });
    });
</script>