Bootstrap modal contact form submission is not working

Question

I did validate the Bootstrap Modal Contact Form. And it is working perfectly. But Submitting the form is not working and it is showing the error message which is written in the code. I tried to figure out the error but it's not happening. Kindly help with your ideas.

<html>
<head>
<title>Contact Form</title>

<!-- Latest minified bootstrap css -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>

<!-- Latest minified bootstrap js -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>

</head>


<body>

<!--Popup Auto Load -->
<a id="linkval" data-toggle="modal" href="#modalForm"></a>
<!--Popup Auto Load -->



<!-- Modal -->
<div class="modal fade" id="modalForm" role="dialog">
    <div class="modal-dialog">
        <div class="modal-content">
            <!-- Modal Header -->
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">
                    <span aria-hidden="true">&times;</span>
                    <span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" id="myModalLabel">Contact Form</h4>
            </div>

            <!-- Modal Body -->
            <div class="modal-body">
                <p class="statusMsg"></p>
                <form role="form">
                    <div class="form-group">
                        <label for="inputName">Name</label>
                        <input type="text" class="form-control" id="inputName" placeholder="Enter your name"/>
                    </div>
                    <div class="form-group">
                        <label for="inputEmail">Email</label>
                        <input type="email" class="form-control" id="inputEmail" placeholder="Enter your email"/>
                    </div>
                    <div class="form-group">
                        <label for="inputMobile">Mobile Number</label>
                        <input type="text" class="form-control" id="inputMobile" placeholder="Enter your mobile number"/>
                    </div>
                    <div class="form-group">
                        <label for="inputLocation">Area/City Name</label>
                        <input type="text" class="form-control" id="inputLocation" placeholder="Enter your city name"/>
                    </div>
                    <div class="form-group">
                        <label for="inputMessage">Requirement</label>
                        <textarea class="form-control" id="inputMessage" placeholder="Enter your message"></textarea>
                    </div>
                </form>
            </div>

            <!-- Modal Footer -->
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                <button type="button" class="btn btn-primary submitBtn" onclick="submitContactForm()">SUBMIT</button>
            </div>
        </div>
    </div>
</div>

<script>
function submitContactForm(){
    var reg = /^[A-Z0-9._%+-]+@([A-Z0-9-]+\.)+[A-Z]{2,4}$/i;
    var name = $('#inputName').val();
    var email = $('#inputEmail').val();
    var mobile = $('#inputMobile').val();
    var location = $('#inputLocation').val();
    var message = $('#inputMessage').val();
    if(name.trim() == '' ){
        alert('Please enter your name.');
        $('#inputName').focus();
        return false;
    }else if(email.trim() == '' ){
        alert('Please enter your email.');
        $('#inputEmail').focus();
        return false;
    }else if(email.trim() != '' && !reg.test(email)){
        alert('Please enter valid email.');
        $('#inputEmail').focus();
        return false;
    }else if(mobile.trim() == '' ){
        alert('Please enter your mobile number.');
        $('#inputMobile').focus();
        return false;
    }else if(location.trim() == '' ){
        alert('Please enter your city name.');
        $('#inputLocation').focus();
        return false;           
    }else if(message.trim() == '' ){
        alert('Please enter your message.');
        $('#inputMessage').focus();
        return false;
    }else{
        $.ajax({
            type:'POST',
            url:'submit_form.php',
            data:'contactFrmSubmit=1&name='+name+'&email='+email+'&mobile='+mobile+'&location='+location+'&message='+message,
            beforeSend: function () {
                $('.submitBtn').attr("disabled","disabled");
                $('.modal-body').css('opacity', '.5');
            },
            success:function(msg){
                if(msg == 'ok'){
                    $('#inputName').val('');
                    $('#inputEmail').val('');
                    $('#inputMobile').val('');
                    $('#inputLocation').val('');
                    $('#inputMessage').val('');
                    $('.statusMsg').html('<span style="color:green;">Thanks for contacting us, we\'ll get back to you soon.</p>');
                }else{
                    $('.statusMsg').html('<span style="color:red;">Some problem occurred, please try again.</span>');
                }
                $('.submitBtn').removeAttr("disabled");
                $('.modal-body').css('opacity', '');
            }
        });
    }
}
</script>


<script type="text/javascript">
    $(document).ready(function() { $('#linkval').click(); });
    //$('#linkval').click();
</script>




</body>
</html>

And Php code is given below for submitting the form. I am not able to find the error in JavaScript nor PHP. JavaScript validation is perfect, so I think PHP code is the cause of an error.

<?php
if(isset($_POST['contactFrmSubmit']) && !empty($_POST['name']) && !empty($_POST['email']) && (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) === false) && !empty($_POST['mobile']) && !empty($_POST['location']) && !empty($_POST['message'])){

    // Submitted form data
    $name   = $_POST['name'];
    $email  = $_POST['email'];
    $mobile  = $_POST['mobile'];
    $location  = $_POST['location'];
    $message= $_POST['message'];

    /*
     * Send email to admin
     */
    $to     = 'sample@gmail.com';
    $subject= 'Contact Request Submitted';

    $htmlContent = '
    <h4>Contact request has submitted at Company, details are given below.</h4>
    <table cellspacing="0" style="width: 300px; height: 200px;">
        <tr>
            <th>Name:</th><td>'.$name.'</td>
        </tr>
        <tr style="background-color: #e0e0e0;">
            <th>Email:</th><td>'.$email.'</td>
        </tr>
        <tr>
            <th>Mobile:</th><td>'.$mobile.'</td>
        </tr>
        <tr>
            <th>Location:</th><td>'.$location.'</td>
        </tr>
        <tr>
            <th>Message:</th><td>'.$message.'</td>
        </tr>
    </table>';

    // Set content-type header for sending HTML email
    $headers = "MIME-Version: 1.0" . "\r\n";
    $headers .= "Content-type:text/html;charset=UTF-8" . "\r\n";

    // Additional headers
    $headers .= 'From: User<sender@example.com>' . "\r\n";

    // Send email
    if(mail($to,$subject,$htmlContent,$headers)){
        $status = 'ok';
    }else{
        $status = 'err';
    }

    // Output status
    echo $status;die;
}

Answer 1

Expect Die() statement and email validation condition didn't see any issues. Add else statement in your php file so that if your conditions aren't satisfied else statement will return something.

$status = 'err';
if(isset($_POST['contactFrmSubmit']) && !empty($_POST['name']) && !empty($_POST['email']) && filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) && !empty($_POST['mobile']) && !empty($_POST['location']) && !empty($_POST['message'])){
//your code
   }else{
echo $status;
}

Answer 2

If you're a beginner, I would suggest you implement your code by adding elements one by one, check the functionality and go further. This way will help you analyze and debug your code better.

So here, possibly the issue may be with your if statement in PHP Code.

Just try to have this at the first in your PHP code and try whether the javascript hits the server code.

if(isset($_POST['contactFrmSubmit'])
{
    echo "ok";
    die();
}

Add error in $.ajax to see if any error occurs.

$.ajax({
type:'POST',
url:'submit_form.php',
data:$('form').serialize()
beforeSend: function () {
},
success:function(msg){
},
error(jqXHR jqXHR, String textStatus, String errorThrown)
{
}
});

You can do a few more changes to your for the best practice.

First, In javascript try to serialize the form or use $.param for POST parameters

Something like this,

 $.ajax({
            type:'POST',
            url:'submit_form.php',
            data:$('form').serialize()
            beforeSend: function () {
            },
            success:function(msg){
            }
        });

or

var postData = {
    "action": "test"
    "contactFrmSubmit": 1,
    "name": name,
    "email": email,
    "mobile": mobile,
    "location": location,
    "message": message
};
 $.ajax({
            type:'POST',
            url:'submit_form.php',
            data: postData,
            beforeSend: function () {
            },
            success:function(msg){
            }
        });

Second, in PHP file try to find whether the incoming request is ajax

if (is_ajax()) {
    if(isset($_POST['contactFrmSubmit']) 
       && !empty($_POST['name']) 
       && !empty($_POST['email']) 
       && (!filter_var($_POST['email'], FILTER_VALIDATE_EMAIL) === false) 
       && !empty($_POST['mobile']) && !empty($_POST['location']) 
       && !empty($_POST['message']))
}

function is_ajax() {
  return isset($_SERVER['HTTP_X_REQUESTED_WITH']) && strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest';
}

Finally, if you're intended to return more values as a response then use json_encode which is a common standard

$response->status = "ok"
$response->status_code = 200
$json_response = json_encode($response);

return $json_response;
die();

Although, the above is just for your understanding always use header() to send the response status and code

Bootstrap modal contact form submission is not working

Question

2 answers

solution1
0 2018-09-20 08:16:23

solution2
0 2018-09-20 09:21:40

Bootstrap modal contact form submission is not working

Question

2 answers

solution1 0 2018-09-20 08:16:23

solution2 0 2018-09-20 09:21:40

solution1
0 2018-09-20 08:16:23

solution2
0 2018-09-20 09:21:40