Bootstrap模式联系表单提交不起作用

时间：2018-09-20 08:04:07

标签： javascript php forms validation

我确实验证了Bootstrap Modal Contact Form。而且它运行良好。但是提交表单不起作用，并且显示了代码中编写的错误消息。我试图找出错误，但没有发生。请帮助您提出想法。

<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>

下面提供了Php代码以提交表单。我无法在JavaScript或PHP中找到错误。 JavaScript验证是完美的，所以我认为PHP代码是错误的原因。

<?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;
}

2 个答案:

答案 0 :(得分：0)

期望Die（）语句，电子邮件验证条件未发现任何问题。在您的php文件中添加else语句，以便如果不满足您的条件，则else语句将返回某些内容。

$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;
}

答案 1 :(得分：0)

如果您是初学者，建议您通过逐个添加元素来实现代码，然后检查功能并继续。这样可以帮助您更好地分析和调试代码。

因此，在这里，问题可能出在PHP代码中的if语句中。

只需尝试在您的PHP代码中首先使用它，然后尝试确定javascript是否命中服务器代码。

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

在error中添加$.ajax，以查看是否发生任何错误。

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

您可以对最佳做法进行一些更改。

首先，在javascript中，尝试使用serialize的形式或将$.param用于POST参数

这样的事情，

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

或

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){
            }
        });

第二，在PHP文件中，尝试查找传入的请求是否为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';
}

最后，如果您打算返回更多值作为响应，请使用常见的标准json_encode 

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

return $json_response;
die();

不过，以上内容仅供您理解，请始终使用header()发送响应状态和代码

相关问题
最新问题