Ajax request works perfectly in mozilla & not in chrome (Very confusing because sometimes it works)

Question

I am calling a php file which contains the class and its function to save data into the database. The call is through ajax. Everything works fine in mozilla & not in chrome. But the very surprising thing is suddenly some times it works & if i try once again or some other time, it fails. I have verified php file its perfect. Even the ajax code too...

$('#quick_contact').validate({
        rules: {
            qc_name: {
                required: true,
                minlength: 0
            },
            qc_email: {
                required: true,
                email: true
            },
            qc_msg: {
                required: false,
                minlength: 0
            }
        },
        messages: {
            name: {
                required: "Enter Your Name",

            },
            email: {
                required: "Please Enter Your e-mail"
            },
            message: {
                required: "Please Enter Message"
            }
        },
        submitHandler: function(form) {
            $.ajax({
                type:"POST",
                url:root_path+"db_contact_forms/contact_forms.php",
                data: $(form).serialize(),
                dataType: "json",
                async: false,
                success: function(dres) {
                    alert(dres.status);
                },
                error: function(textStatus, errorThrown) {
                    alert(errorThrown);
                }
            });
        }

    });

So in chrome its throwing error as parse error for the first time & after that it executes properly. I am confused.

PHP:

 <?php 
if(isset($_POST["qc_submit"]))
{
    $contact_form = new contact_forms();
    $contact_form->save();
    echo '{"status":1}';
}


class contact_forms
{
    public $con;
    public function __construct()
    {
        $this->con = mysqli_connect("localhost", "root", "", "orione_db");
        if(!$this->con)
        {
            echo "Not Connected";
        }
    }

    function save()
    {
            $sql="insert into quick_contact_form(name, email, msg, datetime) values('".$_POST["qc_name"]."','".$_POST["qc_email"]."','".$_POST["qc_msg"]."', '".date('d-m-Y h:i:s')."')";

            mysqli_query($this->con, $sql);

    }


}

?>

Html:

<form method="post" id="quick_contact" novalidate="novalidate">
    <input type="text" class="form-control" id="name" name="qc_name" placeholder="Name">

    <input type="email" class="form-control" id="email2" name="qc_email" placeholder="Email" style="margin-top:10px;">

    <textarea class="form-control" rows="6" id="message" name="qc_msg" placeholder="Message" style="height: 134px;margin-top: 10px;"></textarea>

    <div class="row m0">
    <button type="submit" name="qc_submit" class="btn btn-default submit"><strong>Submit Now</strong><i class="fa fa-angle-double-right" style="padding-left:6px;"></i></button>

    </div>
    </form>

Where am doing wrong? I hope somebody will help.

Answer 1

jQuery's serialize does not include submit buttons. Also since there is no output when the submit button is not set the request expects json but gets nothing and issues a parse error.