堆棧內存溢出
  簡體   English   中英

Bootstrap模式聯系表單提交不起作用

[英]Bootstrap modal contact form submission is not working

 原文  2018-09-20 08:04:07  8   2    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 個解決方案

解決方案1
 0  2018-09-20 08:16:23

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

解決方案2
 0  2018-09-20 09:21:40

如果您是初學者，我建議您通過一個接一個的添加元素來實現代碼，檢查功能，然后繼續。 這樣可以幫助您更好地分析和調試代碼。

所以在這里，問題可能出在PHP代碼中的if語句上。

只需嘗試在您的PHP代碼中首先使用它，然后嘗試確定javascript是否命中服務器代碼。 

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

在$.ajax添加error以查看是否發生任何錯誤。 

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

您可以為自己的最佳做法做一些更改。

首先，在javascript中嘗試序列化表格或將$ .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（）發送響應狀態和代碼

暫無
暫無

聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

相關問題 聯系表格 7 在 Bootstrap 模式中不起作用 在表單提交時打開引導程序模式 引導模式聯系表問題 表單提交時的自舉模式控制 提交表單后，引導程序模式未關閉 提交表單時更改引導模式的內容 引導模式下提交信用卡表格 BootStrap Modal + JS / AJAX復選框表格提交 Bootstrap驗證不適用於表單提交 Bootstrap表單驗證或必填項不適用於Ajax提交
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM