PHPMailer sends duplicate emails

Question

PROBLEM: I'm receiving three duplicate emails for each user who signs up with their email address. My guest list is being overrun by duplicate emails, and I don't know what's wrong with my code.

Probable Cause: I have 3 signup forms, so I think somehow when I submit one signup form they all submit at the same time. The problem lies in either the Bootstrap 4.1.3 JS or the HTML.

PHP Code:

$email = $_REQUEST['email'] ;

// Import PHPMailer classes into the global namespace
// These must be at the top of your script, not inside a function
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;

require './PHPMailer-master/src/Exception.php';
require './PHPMailer-master/src/PHPMailer.php';
require './PHPMailer-master/src/SMTP.php';

// Popup Form Signup
$mail = new PHPMailer();
$mail->IsSMTP();
$mail->Host = "mail.domain.com";
$mail->SMTPAuth = true;
$mail->Username = "user@domain.com"; 
$mail->Password = "password"; 
$mail->SMTPSecure = 'TLS';                           
$mail->Port = 587;
$mail->From = $email;
$mail->setFrom('$email', 'Guest');
$mail->addAddress('admin@domain.com', 'Admin');
$mail->IsHTML(true);
$mail->Subject = "New Member!";
$mail->Body = $email;
$mail->AltBody = $email;

$mail2 = new PHPMailer();
$mail2->IsSMTP();
$mail2->Host = "mail.domain.com"; 
$mail2->SMTPAuth = true; 
$mail2->Username = "user@domain.com"; 
$mail2->Password = "password"; 
$mail2->SMTPSecure = 'TLS';                      
$mail2->Port = 587;                             
$mail2->setFrom('support@domain.com', 'Support');
$mail2->AddAddress("$email");    
$mail2->AddReplyTo('support@domain.com');

    $mail2->Subject = "Thanks for signing up!";
    $message = '';
    $mail2->Body = $message;
    $mail2->AltBody = $message;


    if(!$mail2->Send())
    {
    echo "Message could not be sent. Please reload the page and try again. <p>";
    echo "Mailer Error: " . $mail2->ErrorInfo;
    exit;
    }

    if(!$mail->Send())
    {
    echo "Message was not received. Please reload the page and try again.<p>";
    echo "Mailer Error: " . $mail->ErrorInfo;
    exit;
    }

I also have other Forms that open different PHP files, but they shouldn't be the issue here. I just added it here just in case anyone can figure something out.

FORM 1 (Same Landing Page)

<form class="signupForm1 input-group mt-1" method="post" action="topconfirm">
        <div class="input-group">
        <label for="email" class="sr-only">Enter your email address</label>
        <input style ="overflow:hidden;" id="email" type="email" name="email" required class="sentence form-control" aria-label="Large" placeholder="enter your email address">      
        <button style="font-size:17px;" name="topsubmit" type="submit" class="ctabutton semibolder submitButton sentence text-white btn btn-secondary px-lg-3 px-md-1 px-sm-1 btn-lg rounded-0">Get Started</button>
        </div>              
</form>

FORM 2 (Same Landing Page)

<form class="signupForm2 input-group mt-1" method="post" action="bottomconfirm">
                <div class="input-group">
                <label style="font-weight:normal!important;" for="email" class="sr-only">Enter your email address</label>
                <input style ="overflow:hidden;"  id="email" type="email" name="email" required class="sentence form-control" aria-label="Large" placeholder="enter your email address">         
                <input style="font-size:17px;" name="footersubmit" type="submit" class="ctabutton semibolder submitButton sentence text-white btn btn-secondary px-lg-3 px-md-1 px-sm-1 btn-lg rounded-0" value="Get Started"/>
                </div>              
        </form>

I'm not a JavaScript or PHP mailer expert someone please show me how to fix this problem, I think it might be a Bootstrap JS 4.13. Any suggestion or help will be greatly appreciated. Thanks!

Answer 1

Try creating a seperate submit()-function (with the onclick-handler) for each button and removing the value='submit' from them, like so:

    <!--signupform1-->
    <form class="signupForm1 input-group mt-1" method="post" action="topconfirm">
        <div class="input-group">
            <label for="email" class="sr-only">Enter your email address</label>
            <input style ="overflow:hidden;" id="email" type="email" name="email" required class="sentence form-control" aria-label="Large" placeholder="enter your email address">      
            <button style="font-size:17px;" name="topsubmit" type="button" class="ctabutton semibolder submitButton sentence text-white btn btn-secondary px-lg-3 px-md-1 px-sm-1 btn-lg rounded-0" onclick="submit1();">Get Started</button>
        </div>              
    </form>

    <!--signupform2-->
    <form class="signupForm2 input-group mt-1" method="post" action="bottomconfirm">
        <div class="input-group">
            <label style="font-weight:normal!important;" for="email" class="sr-only">Enter your email address</label>
            <input style ="overflow:hidden;"  id="email" type="email" name="email" required class="sentence form-control" aria-label="Large" placeholder="enter your email address">         
            <input style="font-size:17px;" name="footersubmit" type="button" class="ctabutton semibolder submitButton sentence text-white btn btn-secondary px-lg-3 px-md-1 px-sm-1 btn-lg rounded-0" onclick="submit2();" value="Get Started"/>
        </div>              
    </form>

And then in your js:

<script>
    function submit1() {
        $(".signupForm1").submit();
    }
    function submit2() {
        $(".signupForm2").submit();
    }
</script>