Rediriger vers une autre page après la soumission d'un formulaire

**ezybusy** · 03/06/2024, 01h43

Bonjour à tous,

J'ai un formulaire de contact qui valide l'envoi d'email avec Ajax.

J'essaie d'ajouter une option de redirection à mon code d'envoi de mail afin de rediriger les utilisateurs vers une autre page (register_success.php) en cas de succès d'envoi, mais je n'ai aucune idée de comment m'y prendre. J'ai essayer avec la function header("Location: register_success.php"); en php, mais sans succès.

s'il vous plait quelqu'un peut-il m'aider ? J'ai mis mes fichiers en piece jointe ici

fichiers.zip

Merci.

1 - Voici le code de mon formulaire inclu dans un fichier course-registration.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
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
62
63
64
65
66
67
68
69
 <!doctype html>
<html class="no-js" lang="fr">
 
<head>
 <!--==============================
	    All CSS File
	============================== -->
    <!-- Bootstrap -->
    <link rel="stylesheet" href="assets/css/bootstrap.min.css">
    <!-- <link rel="stylesheet" href="assets/css/app.min.css"> -->
    <!-- Fontawesome Icon -->
    <link rel="stylesheet" href="assets/css/fontawesome.min.css">
    <!-- Magnific Popup -->
    <link rel="stylesheet" href="assets/css/magnific-popup.min.css">
    <!-- Slick Slider -->
    <link rel="stylesheet" href="assets/css/slick.min.css">
    <!-- Theme Custom CSS -->
    <link rel="stylesheet" href="assets/css/style.css">
</head>
<body>
    <section class=" space-top space-extra-bottom">
        <div class="container">
            <div class="row gx-80">
                <div class="col-lg-6 col-xl-6">
                    <form action="mailer.php" class="form-style5 ajax-contact">
                        <div class="vs-circle"></div>
						<div class="form-group">
                            <input type="text" name="name" id="name" placeholder="Nom et prénom(s)">
                        </div>
                        <div class="form-group">
                            <input type="text" name="email" id="email" placeholder="Adresse e-mail">
                        </div>
                        <div class="form-group">
                            <input type="text" name="number" id="number" placeholder="Téléphone">
                        </div>
                        <div class="form-group">
                            <select name="subject" id="subject">
                                <option hidden disabled>Sélectionner un Cours</option>
                                <option selected value="Oracle Database SQL OCA">Oracle Database SQL OCA</option>
                            </select>
                        </div>
                        <button type="submit" class="vs-btn">Valider votre inscription</button>
 
                        <p class="form-messages"><span class="sr-only">For message will display here</span></p>
                    </form>
                </div>
            </div>
        </div>
    </section>
 
<!--==============================
        All Js File
    ============================== -->
    <!-- Jquery -->
    <script src="assets/js/vendor/jquery-3.6.0.min.js"></script>
    <!-- Slick Slider -->
    <script src="assets/js/slick.min.js"></script>
    <!-- <script src="assets/js/app.min.js"></script> -->
    <!-- Bootstrap -->
    <script src="assets/js/bootstrap.min.js"></script>
    <!-- Wow.js Animation -->
    <script src="assets/js/wow.min.js"></script>
    <!-- Magnific Popup -->
    <script src="assets/js/jquery.magnific-popup.min.js"></script>
    <!-- Main Js File -->
    <script src="assets/js/main.js"></script>
 
</body>
</html>

2 - Le contenu du fichier mailer.php est le suivant :

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
<?php
 
    // Only process POST reqeusts.
    if ($_SERVER["REQUEST_METHOD"] == "POST") {
        // Get the form fields and remove whitespace.
        $name = strip_tags(trim($_POST["name"]));
        $name = str_replace(array("\r","\n"),array(" "," "),$name);
        $email = filter_var(trim($_POST["email"]), FILTER_SANITIZE_EMAIL);
        $number = trim($_POST["number"]);
        $subject = trim($_POST["subject"]);
 
        // Check that data was sent to the mailer.
        if ( empty($name) OR empty($subject) OR empty($number) OR !filter_var($email, FILTER_VALIDATE_EMAIL)) {
            // Set a 400 (bad request) response code and exit.
            http_response_code(400);
            echo "Veuillez compléter le formulaire et réessayer.";
            exit;
        }
 
        // Set the recipient email address.
        // FIXME: Update this to your desired email address.
        $recipient = "monemail@gmail.com";
 
        // Set the email subject.
        $subject = "Inscription - $subject";
 
        // Build the email headers.
        $email_headers = "From: $name <$email>\r\n";
                $email_headers .= "MIME-Version: 1.0\r\n";
                $email_headers .= "Content-type: text/html; charset=ISO-8859-1\r\n";
                
                // Build the email content.
                $email_content = '<html><body>';
                $email_content .= '<table rules="all" style="border-color: #333333;" cellpadding="15px";>';
        $email_content = "<tr style='font-size:15px; margin-bottom:5px;'><td><strong>Nom:</strong></td><td> $name</td></tr>";
        $email_content .= "<tr style='font-size:15px; margin-bottom:5px;'><td><strong>Formation:</strong></td><td> $subject</td></tr>";
        $email_content .= "<tr style='font-size:15px; margin-bottom:5px;'><td><strong>E-mail:</strong></td><td> $email</td></tr>";
                $email_content .= "<tr style='font-size:15px; margin-bottom:5px;'><td><strong>Telephone:</strong></td><td> $number</td></tr>";
                $email_content .= "</table>";
                $email_content .= "</body></html>";
 
        // Send the email.
        if (mail($recipient, $subject, $email_content, $email_headers)) {
            // Set a 200 (okay) response code.
            http_response_code(200);
            echo "Merci d'avoir rempli le formulaire. Votre inscription a été envoyé.";
        } else {
            // Set a 500 (internal server error) response code.
            http_response_code(500);
            echo "Oups ! Un problème est produit et nous n'avons pas pu soumettre votre inscription.";
        }
 
    } else {
        // Not a POST request, set a 403 (forbidden) response code.
        http_response_code(403);
        echo "Il y a eu un problème avec votre inscription, veuillez réessayer.";
    }
 
?>

3 - Enfin, j'ai le code dans mon un fichier main.js :

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
62
63
64
65
66
67
68
69
70
71
72
73
/*----------- 08. Ajax Contact Form ----------*/
  var form = '.ajax-contact';
  var invalidCls = 'is-invalid';
  var $email = '[name="email"]';
  var $validation = '[name="name"],[name="email"],[name="number"],[name="subject"],[name="callchoice"],[name="message"]'; // Must be use (,) without any space
  var formMessages = $(form).find('.form-messages');
 
  function sendContact() {
    var formData = $(form).serialize();
    var valid;
    valid = validateContact();
    if (valid) {
      jQuery.ajax({
          url: $(form).attr('action'),
          data: formData,
          type: "POST"
        })
        .done(function (response) {
          // Make sure that the formMessages div has the 'success' class.
          formMessages.removeClass('error');
          formMessages.addClass('success');
          // Set the message text.
          formMessages.text(response);
          // Clear the form.
          $(form + ' input:not([type="submit"]),' + form + ' textarea').val('');
        })
        .fail(function (data) {
          // Make sure that the formMessages div has the 'error' class.
          formMessages.removeClass('success');
          formMessages.addClass('error');
          // Set the message text.
          if (data.responseText !== '') {
            formMessages.html(data.responseText);
          } else {
            formMessages.html('Oops! An error occured and your message could not be sent.');
          }
        });
    };
  };
 
  function validateContact() {
    var valid = true;
    var formInput;
 
    function unvalid($validation) {
      $validation = $validation.split(',')
      for (var i = 0; i < $validation.length; i++) {
        formInput = form + ' ' + $validation[i];
        if (!$(formInput).val()) {
          $(formInput).addClass(invalidCls)
          valid = false;
        } else {
          $(formInput).removeClass(invalidCls)
          valid = true;
        };
      };
    };
    unvalid($validation);
 
    if (!$($email).val() || !$($email).val().match(/^([\w-\.]+@([\w-]+\.)+[\w-]{2,4})?$/)) {
      $($email).addClass(invalidCls)
      valid = false;
    } else {
      $($email).removeClass(invalidCls)
      valid = true;
    };
    return valid;
  };
 
  $(form).on('submit', function (element) {
    element.preventDefault();
    sendContact();
  });

**mathieu** · 03/06/2024, 03h59

pour rediriger vers une autre page en javascript, vous pouvez utiliser window.location.assign(url);
https://developer.mozilla.org/fr/doc...indow/location

**ezybusy** · 03/06/2024, 09h49

Merci pour votre reponse.

Pouvez-vous s'il vous plait m'indiquer a quelle ligne je dois ajouter le code window.location.assign(url); ?

Rediriger vers une autre page après la soumission d'un formulaire

AJAX

Vue hybride

Discussions similaires

Partager

Partager