堆棧內存溢出
  簡體   English   中英

提交表單后，將引導程序模式顯示為“謝謝”

[英]Show bootstrap modal as “thank you” after form is submitted

 原文  2016-01-26 17:33:09  6   1    javascript/ php/ twitter-bootstrap-3/ bootstrap-modal

問題描述

我有一個正在處理的聯系表單，我希望在成功提交表單后顯示一個模式。 我遇到的問題實際上是在顯示表單，我認為我的問題出在我的javascript中（我對此很陌生）。 無論如何，這就是我正在使用的： 

 $(document).ready(function() { $('#agents input:submit').click(function() { $('#agents form').attr('action', 'http://' + document.domain + '/agents/php/feedback_custom.php'); $('#agents form').submit(); }); $('form #response').hide(); $('#submit').click(function(e) { // prevent forms default action until // error check has been performed e.preventDefault(); // grab form field values ..... if (valid != '') { ....do stuff..... } // let the user know something is happening behind the scenes // serialize the form data and send to our ajax function else { $('form #response').removeClass().addClass('processing').html('Processing...').fadeIn('fast'); var formData = $('form').serialize(); submitForm(formData); } }); }); function submitForm(formData) { $.ajax({ type: 'POST', url: '../agents/php/feedback_custom.php', data: formData, dataType: 'json', cache: false, timeout: 7000, success: function(data) { $("#thankyouModal").modal('show'); }, error: function (XMLHttpRequest, textStatus, errorThrown) { $('form #response').removeClass().addClass('error') .html('<div class="alert alert-danger">' + '<p>There was an <strong>ERROR SENDING THE FORM</strong><br>Please make sure you have filled out the required fields and resend the form.</p>' + '</div>').fadeIn('fast'); } }); }; 
 <head></head> <body> <div class="modal fade" id="thankYouModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel"> <div class="modal-dialog modal-lg "> <div class="modal-content alert alert-success"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button> <h4 class="modal-title h2"><strong>Your Claim Information Has Been Submitted</strong></h4> </div> <div class="modal-body"> <p>modal text</p> </div> <div class="modal-footer"> </div> </div><!-- /.modal-content --> </div><!-- /.modal-dialog --> </div><!-- /.modal --> <form role="ajaxExample" method="post" action="" enctype="multipart/form-data" id="agents"> <div id="response"></div> <div class="row"> <h2 class="h3 headline"><span>Required Fields (<span class="required">*</span>):</span></h2> <div class="col-sm-4 info-board info-board-red"> <h4>Customer Information</h4> <!-- customer info here --> </div> <div class="col-sm-4 info-board info-board-red"> <h4>Insurance Information</h4> <!-- insurance info here --> </div> <div class="col-sm-4 info-board info-board-red"> <h4>Vehicle Information</h4> <!-- vehicle info here --> </div> </div> <div class="row"> <div class="col-sm-12 info-board info-board-blue"> <div class="form-group"> <label for="spamQuestion"> <span class="required">*</span> Anti-spam... Please Solve The Math Problem <span class="required">*</span>:<br>&nbsp;&nbsp; <?php $a = rand(1, 10); $b = rand(1, 10); echo $a." + ".$b." = ?"; ?> </label> <input type="hidden" value="<?php echo $a;?>" name="value1" /> <input type="hidden" value="<?php echo $b;?>" name="value2" /> <input type="text" name="answer" value="what's the result?" onclick="this.value=''" tabindex="26" class="form-control" /> </div> </div> </div> <div class="row"> <div class="col-xs-12"> <input type="hidden" name="honeypot" id="honeypot" value="http://"> <input type="hidden" name="humancheck" id="humanCheck" class="clear" value=""> <button type="submit" name="submit" id="submit" tabindex="27" class="btn btn-success">Submit Claim</button>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="reset" name="reset1" value="Reset Form" tabindex="28" class="btn btn-red" /> <div id="response"></div> </div> </div> </form> <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script> <script src="../js/bootstrap.min.js"></script> <script src="js/ajax_submit_custom.js"></script> </body> </html>

我的PHP： 

<?php 
sleep(.5);
//Sanitize incoming data and store in variable

//customer info
$policyName = trim(stripslashes(htmlspecialchars($_POST['policyName'])));           
$homePhone = trim(stripslashes(htmlspecialchars($_POST['homePhone'])));
$homePhoneLink = preg_replace('/\D+/', '', $homePhone);
$workPhone = trim(stripslashes(htmlspecialchars($_POST['workPhone'])));
$workPhoneLink = preg_replace('/\D+/', '', $workPhone);
$filerName = trim(stripslashes(htmlspecialchars($_POST['filerName'])));
$agentOrNot = trim(stripslashes(htmlspecialchars($_POST['agentOrNot'])));
$replyEmail = '';
if ($_POST['replyEmail'] != '') {
$replyEmail .= $_POST['replyEmail'];
} else {
$replyEmail .= 'noReply@centuryglasssc.com';
}

//insurance info
$policy = trim(stripslashes(htmlspecialchars($_POST['policy'])));
$insCompany = trim(stripslashes(htmlspecialchars($_POST['insCompany'])));
$agentName = trim(stripslashes(htmlspecialchars($_POST['agentName'])));
$vin = trim(stripslashes(htmlspecialchars($_POST['vin'])));
$compCoverage = trim(stripslashes(htmlspecialchars($_POST['compCoverage'])));
$dateOfLoss = trim(stripslashes(htmlspecialchars($_POST['dateOfLoss'])));

//vehicle info
$year = trim(stripslashes(htmlspecialchars($_POST['year'])));
$make = trim(stripslashes(htmlspecialchars($_POST['make'])));
$model = trim(stripslashes(htmlspecialchars($_POST['model'])));
$bodyStyle = trim(stripslashes(htmlspecialchars($_POST['bodyStyle'])));
$doors = trim(stripslashes(htmlspecialchars($_POST['doors'])));
$damagedGlass = trim(stripslashes(htmlspecialchars($_POST['damagedGlass'])));

//spam filters
$humancheck = $_POST['humancheck'];
$honeypot = $_POST['honeypot'];
$answer = $_POST['answer'];
$c = $_POST['value1'] + $_POST['value2'];

if ($honeypot == 'http://' && empty($humancheck)) { 

//Validate data and return success or error message
$error_message = '';    
$reg_exp = "/^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9-]+\.[a-zA-Z.]{2,4}$/";


if (empty($policyName)) {
        $error_message .= "<p>POLICYHOLDER NAME IS REQUIRED.</p>";             
}

if (empty($homePhone)) {
        $error_message .= "<p>HOME PHONE IS REQUIRED.</p>";            
}
if (empty($workPhone)) {
        $error_message .= "<p>WORK IS REQUIRED.</p>";              
}



if ($answer != $c) {
            $error_message .=   "<p>PLEASE RE-ENTER YOUR SIMPLE MATH ANSWER AND TRY AGAIN.</p>";
}


if (!empty($error_message)) {
        $return['error'] = true;
        $return['msg'] = '<div class="alert alert-danger">'."<h4>OOPS! THE FORM WAS NOT SUBMITTED.</h4>".$error_message;                    
        echo json_encode($return);
        exit();
} 

else {
//mail variables
#$to =              'info@centuryglasssc.com';
$to =           'mainstwebguy@gmail.com';
$from = $_POST['replyEmail'];
$headers =  'From: '.$from."\r\n";
$headers .= 'MIME-Version: 1.0' . "\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
$subject =  "Agent Claim From Website\n";


$body =         '<h4>Customer Information</h4>';
$body .=        '<p>Policyholder:   '.$policyName."<br />";
$body .=        'Home Phone: '.'<a href="tel:+1'.$homePhoneLink.'">'.$homePhone."</a><br />";
$body .=        'Work Phone: '.'<a href="tel:+1'.$workPhoneLink.'">'.$workPhone."</a><br />";
if (isset($_POST['filerName']))     {   $body   .=  $filerName;     }
if (isset($_POST['agentOrNot']))    {   $body   .=  $agentOrNot;    }
if(isset($_POST['replyEmail']))     {   $body   .=  $replyEmail;    }
$body .=        '</p>';



$body .=        '<h4>Insurance Information</h4>';
$body .=        '<p>Policy #: '.$policy.'<br />';
$body .=        'Ins. Company:  '.$insCompany.'<br />';
$body .=        'Agent\'s Name: '.$agency.'<br />';
$body .=        'VIN: '.$vin.'<br />';
$body .=        'Comp Coverage: '.$compCoverage.'<br />';
$body .=        'Date of Loss:  '.$dateOfLoss.'</p>';





$body .=        '<h4>Vehicle Information</h4>';
$body .=        '<p>Year:   '.$year.'<br />';
$body .=        'Make:  '.$make.'<br />';
$body .=        'Model: '.$model.'<br />';
$body .=        'Body Style:    '.$bodyStyle.'<br />';
$body .=        'Number of Doors:   '.$doors.'<br />';
$body .=        'Damaged Glass: '.$damagedGlass.'</p>';



//send email and return a message to user
if(mail($to, $subject, $body, $headers)) {  
    $return['error'] = false;
    $return['msg'] = 
        '<div class="alert alert-success">'.
            "<h4>Thank you for using our form </h4>".
            "<p>We'll reply to you as soon as we can.</p>";

            echo json_encode($return);
}
else {

    $return['error'] = true;
    $return['msg'] = "<h4>Oops! There was a problem sending the email. Please try again.</h4>"; 
    echo json_encode($return);
}

}

} 
else {

$return['error'] = true;
$return['msg'] = "<h4>Oops! There was a problem with your submission. Please try again.</h4>";  
echo json_encode($return);
}

?>

需要注意的一件事是，我正在接收來自表單的電子郵件，只是該模式沒有被觸發。

我想念什么？

1 個解決方案

解決方案1
 1 已采納  2016-01-26 17:41:23

我相信jQuery選擇器區分大小寫。

你打電話時： 

$("#thankyouModal").modal('show');

我認為應該是： 

$("#thankYouModal").modal('show');

暫無
暫無

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

相關問題 PHP驗證后提交表單后顯示感謝信息 提交表單后顯示Bootstrap模式 引導模態表格未提交 有人在Angular中提交表單后如何顯示感謝消息？ 在注冊表格中張貼提交的姓名，以感謝您的頁面 僅在驗證檢查和表單提交后顯示模態 提交表單后未顯示“謝謝”消息 填寫表格后如何獲得感謝？ 在Rails中提交bootstrap模態窗體后，如何顯示有錯誤的模態？ 在按下人員以自舉模式提交表單后，如何顯示成功消息？
相關標簽
 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM