Clearing of inserted data after submit the form

Question

0.00/5 (No votes)

See more:

Hi Team

I have an issue when i submit my form, the client side often shows something went wrong, while debugging there are no errors both jquery part and php. console.log i do see the inserted data. How do i clear the inserted data from the form after being sent? How do i have the jquery part well without showing alert, on the email i do receive an otp under sent section.

What I have tried:

<?php
// Get the directory of the current script
$currentDir = __DIR__;

$phpMailerDir = 'C:\wamp64\www\obaju\distribution\sendEmails\vendor\phpmailer\phpmailer';

require_once $phpMailerDir . '\src\PHPMailer.php';
require_once $phpMailerDir . '\src\SMTP.php';
require_once $phpMailerDir . '\src\Exception.php';

use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\SMTP;
use PHPMailer\PHPMailer\Exception;

// Create a new PHPMailer instance
/* Create a new PHPMailer object. Passing TRUE to the constructor enables exceptions. */
$mail = new PHPMailer(TRUE);
try {
    // Server settings
    $mail->SMTPDebug = SMTP::DEBUG_OFF;
    $mail->isSMTP();
    $mail->Host = 'smtp-mail.outlook.com'; // Enter your SMTP server here
    $mail->SMTPAuth = true;
    $mail->Username = "me@there.com";
    $mail->Password = "Whatever"; // SMTP password
    $mail->SMTPSecure = 'tls';
    $mail->Port = 587; // Port number depends on your SMTP server configuration

    // Sender and recipient details
   $mail->setFrom('gcira2023@outlook.com', 'From eCommerce Store');
    $mail->addAddress('entsagcobza2020@gmail.com', 'Recipient Name');

    // Email content
    $mail->isHTML(false);
    $mail->Subject = 'Password Reset';
    $otp = rand(100000, 999999);
    $mail->Body = 'Your OTP code is: ' . $otp;

    // Send the email
    $mail->send();
    if (!$mail->send()) {
    echo "Mailer Error: " . $mail->ErrorInfo;
} else {
    echo "Message sent!";
}

} catch (Exception $e) {
    // Output an error message if the email failed to send
    echo 'Message could not be sent. Mailer Error: ', $mail->ErrorInfo;
}
?>

<!DOCTYPE html>
<html>
  <head>
    <!-- CSS -->
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <title>Obaju : e-commerce template</title>
    <meta name="description" content="">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="robots" content="all,follow">
    <!-- Bootstrap CSS-->
    <link rel="stylesheet" href="vendor/bootstrap/css/bootstrap.min.css">
    <!-- Font Awesome CSS-->
    <link rel="stylesheet" href="vendor/font-awesome/css/font-awesome.min.css">
    <!-- Google fonts - Roboto -->
    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:100,300,400,700">
    <!-- owl carousel-->
    <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.carousel.css">
    <link rel="stylesheet" href="vendor/owl.carousel/assets/owl.theme.default.css">
<!-- JS -->
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/@popperjs/core@2.9.3/dist/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>

    <!-- owl carousel-->
    
  </head>
  <body>
<div class="container">
  <div class="row justify-content-center">
    <div class="col-md-6">
      <div class="card mt-5">
        <div class="card-header">
          Reset Password
        </div>
        <div class="card-body">
          <form id="forgot-password">
            <div class="form-group">
              <label for="email">Email</label>
              <input type="email" class="form-control" id="email" name="email" required>
            </div>
            <div class="form-group">
              <label for="new-password">New Password</label>
              <input type="password" class="form-control" id="new-password" name="new-password" required>
            </div>
            <div class="form-group">
              <label for="confirm-password">Confirm Password</label>
              <input type="password" class="form-control" id="confirm-password" name="confirm-password" required>
            </div>
            <button type="submit" class="btn btn-primary">Reset Password</button>
          </form>
        </div>
      </div>
    </div>
  </div>
</div>
    <!-- JavaScript files-->
    <script src="vendor/jquery/jquery.min.js"></script>
    <script src="vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
    <script src="vendor/jquery.cookie/jquery.cookie.js"> </script>
    <script src="vendor/owl.carousel/owl.carousel.min.js"></script>
    <script src="vendor/owl.carousel2.thumbs/owl.carousel2.thumbs.js"></script>
    <script src="js/front.js"></script>
    <script src="js/deletion_shopping_cart.js"></script>
    <script src="js/add_to_cart.js"></script>
    <script src="js/forgot-password.js"></script>
</body>
</html>

// jquery code

JavaScript

<pre>$(document).ready(function(){
    $("#forgot-password").submit(function(event){
        event.preventDefault();
        var formData = $(this).serialize();
       // console.log($('#forgot-password').serialize());
        $.ajax({
            url: "forgot-password.php",
            type: "POST",
            data: formData,
            success: function(data){
                if(data == "success"){
                    alert("Password reset successfully.");
                    window.location.href = "dashboard.php";
                }else if(data == "error"){
                    alert("Invalid email or OTP code.");
                }else if(data == "password_mismatch"){
                    alert("New password and confirm password do not match.");
                }else{
                    alert("Something went wrong. Please try again later.");
                }
            }
        });
    });
});

Posted 24-Apr-23 15:33pm

Gcobani Mkontwana

Updated 25-Apr-23 22:21pm

Andre Oosthuizen

v2

Add a Solution

Comments

Member 15627495 25-Apr-23 0:19am

// in JS native :
document.getElementById('the_id_selector').value = ""

Andre Oosthuizen 26-Apr-23 4:26am

Security, security and more security.... I have changed your username and pwd for outlook that you openly posted! I will also not handle any pwd related issues on client side apart from normal html elements.

Dave Kreskowiak 26-Apr-23 8:59am

What??

Gcobani Mkontwana 26-Apr-23 8:31am

@Andre Oosthuizen are you currently updating this code on your side or busy with this?

mtoha 18-May-23 7:54am

When you succeed to reset password is this message appeared? "Password reset successfully." What is the data containing when success? If that message is already appeared on success, try this :
// console.log($('#forgot-password').serialize());
$.ajax({
url: "forgot-password.php",
type: "POST",
data: formData,
success: function(data){
if(data == "success"){
alert("Password reset successfully.");
$('#forgot-password')[0].reset();
window.location.href = "dashboard.php";
}else if(data == "error"){
alert("Invalid email or OTP code.");
}else if(data == "password_mismatch"){
alert("New password and confirm password do not match.");
}else{
alert("Something went wrong. Please try again later.");
}
}
});

Note: Should you not import jQuery twice. When I try your existing code, $("#forgot-password").submit(function(event){
that method is not called. I change it to : $("#forgot-password .btn-primary").click(function(event){
and this is fired.

Add your solution here

Treat my content as plain text, not as HTML

Preview 0

…

Existing Members

Sign in to your account

...or Join us

Download, Vote, Comment, Publish.

Your Email
Password
Forgot your password?

Your Email
This email is in use. Do you need your password?
Optional Password

I have read and agree to the Terms of Service and Privacy Policy
Please subscribe me to the CodeProject newsletters

When answering a question please:

Read the question carefully.
Understand that English isn't everyone's first language so be lenient of bad spelling and grammar.
If a question is poorly phrased then either ask for clarification, ignore it, or edit the question and fix the problem. Insults are not welcome.
Don't tell someone to read the manual. Chances are they have and don't get it. Provide an answer or move on to the next question.

Let's work to help developers, not make them feel stupid.

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)