Why does my contact form work in Brave but not in other browsers?

Question

My form works in Brave on my computer, but not in Safari or Google on my computer. It also doesn't work on mobile devices. If it doesn't work, it returns a POST 409 error.

This is my html code.

<div class="row">
                            <div class="col-md-12 col-sm-12" id="result"></div>
                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label for="userName" class="d-none"></label>
                                    <input class="form-control" type="text" placeholder="First Name:" required id="userName" name="userName">
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label for="companyName" class="d-none"></label>
                                    <input class="form-control" type="tel" placeholder="Company Name"  id="companyName" name="companyName">
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <div class="form-group">
                                    <label for="email" class="d-none"></label>
                                    <input class="form-control" type="email" placeholder="Email:" required id="email" name="email">
                                </div>
                            </div>
                            <div class="col-md-3 col-sm-6">
                                <button type="submit" class="button gradient-btn w-100" id="submit_btn">subscribe</button>
                            </div>
                        </div>
                    </form>

This is my php code

<?php

use PHPMailer\PHPMailer\PHPMailer;

if($_POST)
{

    require_once "PHPMailer/Exception.php";
    require_once "PHPMailer/PHPMailer.php";
    require_once "PHPMailer/SMTP.php";

    $mail = new PHPMailer();


    $your_email = "[email protected]";  //Replace with recipient email address

    $to_Email       = $your_email;

    //check if its an ajax request, exit if not
    if(!isset($_SERVER['HTTP_X_REQUESTED_WITH']) AND strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) != 'xmlhttprequest') {

        //exit script outputting json data
        $output = json_encode(
        array(
            'type'=>'error',
            'text' => 'Request must come from Ajax'
        ));

        die($output);
    }

    //check $_POST vars are set, exit if any missing
    if(!isset($_POST["userName"]) || !isset($_POST["userEmail"]) || !isset($_POST["userMessage"]))
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Input fields are empty!'));
        die($output);
    }

    //Sanitize input data using PHP filter_var().
    $user_Name        = filter_var($_POST["userName"], FILTER_SANITIZE_STRING);
    $user_Email       = filter_var($_POST["userEmail"], FILTER_SANITIZE_EMAIL);
    $user_Phone =  $_POST["userPhone"];
    //$user_Subject =  $_POST["userSubject"];
    $user_Message     = filter_var($_POST["userMessage"], FILTER_SANITIZE_STRING);

    //additional php validation
    if(strlen($user_Name)<3) // If length is less than 3 it will throw an HTTP error.
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Name is too short or empty!'));
        die($output);
    }
    if(!filter_var($user_Email, FILTER_VALIDATE_EMAIL)) //email validation
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Please enter a valid email!'));
        die($output);
    }

    if(strlen($user_Message)<5) //check emtpy message
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Too short message! Please enter something.'));
        die($output);
    }


       //Server settings
//    $mail->isSMTP();                                            // Send using SMTP
//    $mail->Host       = 'smtp.googlemail.com';                    // Set the SMTP server to send through
//    $mail->SMTPAuth   = true;                                   // Enable SMTP authentication
//    $mail->Username   = '[email protected]';                     // SMTP username
//    $mail->Password   = 'your password';                         // SMTP password
//    $mail->SMTPSecure = 'TLS';         // Enable TLS encryption; `PHPMailer::ENCRYPTION_SMTPS` also accepted
//    $mail->Port       = 587;                                    // TCP port to connect to

    //Recipients
     $mail->setFrom($user_Email,$user_Name);
     $mail->addAddress($your_email, 'Theme Industry');     // Add a recipient
     $mail->addReplyTo($your_email, 'Information');


    // Content
    $mail->isHTML(true);                                  // Set email format to HTML
    $mail->Subject = 'New Contact Inquiry from your Website';
    $mail->Body  = "<h4 style='text-align: center;padding: 25px 15px;background-color: #0c6c9e;color: #FFFFFF;font-size:16px;width:90%;border-radius: 10px;'>Hi There! You have a new inquiry from your website.</h4><br><br>";


    $mail->Body .= "<strong>Name: </strong>". $user_Name ."<br>";
    $mail->Body .= "<strong>Email: </strong>". $user_Email ."<br>";
    $mail->Body .= "<strong>Phone: </strong>". $user_Phone ."<br>";
    $mail->Body .= "<strong>Message: </strong>". $user_Message ."<br>";

    $mail->AltBody = 'This is the body in plain text for non-HTML mail clients';

    if(!$mail->send())
    {
        $output = json_encode(array('type'=>'error', 'text' => 'Could not send mail! Please check your PHP mail configuration.'));
        die($output);
    }else{
        $output = json_encode(array('type'=>'message', 'text' => 'Hi '.$user_Name .' Thank you for contacting us.'));
        die($output);
    }

}
?>

This is my JavaScript code

//contact us

    $("#submit_btn1 , #submit_btn").on('click', function () {

        let userName = $('#name1').val();

        let userEmail = $('#email1').val();

        let userMessage = $('#message1').val();

        let result;

        if(this.id === 'submit_btn'){

            result = $('#result');

            userMessage = $('#companyName').val();

            userName = $('#userName').val();

            userEmail = $('#email').val();

        }

        else{

            result = $('#result1');

        }

        //simple validation at client's end

        let postData, output;

        let proceed = true;

        if (userName === "") {

            proceed = false;

        }

        if (userEmail === "") {

            proceed = false;

        }

        if (userMessage === "") {

            proceed = false;

        }

        //everything looks good! proceed...

        if (proceed) {



            //data to be sent to server

            postData = {

                'userName': userName,

                'userEmail': userEmail,

                'userMessage': userMessage

            };



            //Ajax post data to server

            $.post('https://thordigi.com/contact.php', postData, function (response) {

                //load json data from server and output message

                if (response.type === 'error') {

                    output = '<div class="alert-danger" style="padding:10px; margin-bottom:25px;">' + response.text + '</div>';

                } else {

                    output = '<div class="alert-success" style="padding:10px; margin-bottom:25px;">' + response.text + '</div>';

                    //reset values in all input fields

                    $('.getin_form input').val('');

                    $('.getin_form textarea').val('');



                }



                result.slideUp("fast").html(output).slideDown();

            }, 'json');



        } else {

            output = '<div class="alert-danger" style="padding:10px; margin-bottom:25px;">Please provide the missing fields.</div>';

            result.slideUp("fast").html(output).slideDown();

        }



    });

I've been stuck on this issue for a while, so I'd really appreciate any help!

Answer 1

There are often differences between different browsers, and some are more tolerant than others. Errors like this are usually caused by something not rendering correctly (so your code can't find the correct field, etc.). To check the HTML, run it through the w3c validator and see what it recommends.

If that doesn't help, then to see exactly what each browser is sending and receiving, I recommend using a man-in-the-middle proxy (such as burp) to intercept the request and response. By looking at the raw data, it's usually quickly apparent where the problem lies.