javascript - 提交表单后将引导模式显示为 "thank you"-6ren

javascript - 提交表单后将引导模式显示为 "thank you"

转载作者：行者123 更新时间：2023-11-27 23:25:02

我正在处理一个联系表单，我希望在成功提交表单时显示一个模式。我遇到的问题实际上是获取要显示的表单，我认为我的问题出在我的 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);
}

?>

需要注意的一件事是，我收到了来自表单的电子邮件，只是模式没有触发。

我错过了什么？

最佳答案

我相信 jQuery 选择器区分大小写。

当你打电话时:

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

我认为应该是:

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

关于javascript - 提交表单后将引导模式显示为 "thank you"，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35020123/

文章推荐： css - 使用 span 的响应式文本背景

文章推荐： html - 如何在CSS中转换 block ？

文章推荐： c++ - 需要浮点精度，GUI gui使用int

文章推荐： css - 找不到或无法读取要导入的文件 : SCSS

latex - 如何在LaTeX幻灯片中放置居中的大 "Thank You"
我希望在LaTeX的幻灯片中心以大字体显示“谢谢”。最佳答案我通常会这样: \begin{frame}{} \centering \Large \emph{Fin} \end{frame}
javascript - 提交表单后将引导模式显示为 "thank you"
我正在处理一个联系表单，我希望在成功提交表单时显示一个模式。我遇到的问题实际上是获取要显示的表单，我认为我的问题出在我的 javascript 中(我对此还很陌生)。无论如何，这就是我正在使用的: $
javascript - 淡入淡出联系表 "Thank You"Div
我有一个使用 javascript 和 contact.php 代码的电子邮件提交表单这是 JavaScript function createRequestObject() { var r
php - paypal交易后如何让 "thank you"页面只对用户可见？
你好，我的网站上有一个表格，我希望在我的用户填写表格并在 paypal 页面上付款后，他将被重定向到我的“谢谢”页面。但在一种情况下，只有拥有完成此程序后会看到我的感谢页面，而不是用户复制“感谢”链
javascript - 我应该如何提供下载并导航到 "thank you"页面？
我有一个网站需要提供文件下载，然后导航到“谢谢”样式页面。到目前为止，我的方法是使用 window.location = "..." 两次 - 首先让浏览器下载文件，然后再次将用户重定向到“谢谢”页
php - 在 "Thank you"页面显示订单的发货方式
在 WooCommerce 中，我想在“谢谢”(已收到订单)页面中显示当前订单选择的运输方式的名称…… 如何在感谢页面中获取所选运输方式的名称？我只能得到送货地址，而不是我想显示送货方式名称。最佳
c# - 重定向到 "Thank you"页面并立即提供下载文件的保存对话框
我正在使用 ASP.NET2.0。我创建了一个带有一些输入字段和一个下载按钮的下载表单。单击下载按钮时，我想将用户重定向到“感谢您下载...”页面，并立即向他/她提供要保存的文件。我有以下代码来显示
php - 无法更改 Woocommerce "Thank you"消息
我试图在 woocommerce 中编辑 thankyou.php 文件以包含一些新文本，但它一直显示默认消息。我不熟悉 php 中的任何含义，但这是我一直在尝试的: has_status( 'fa
php - 无法更改 Woocommerce "Thank you"消息
我试图在 woocommerce 中编辑 thankyou.php 文件以包含一些新文本，但它一直显示默认消息。我不熟悉 php 中的任何含义，但这是我一直在尝试的: has_status( 'fa
ios - 检测 IAP "Thank You"消息
我有一个带有 IAP 的 iOS 应用程序，我想检测用户何时点击每次购买结束时显示的“谢谢”UIAlert 上的确定按钮。最佳答案我不认为有任何可靠的开火方法。想知道为什么。由于这是一个 iOS
php - jQuery - 将联系表单替换为 'thanks message'
我有一个执行 PHP 操作的联系表单。联系表单与 jQuery 中的验证引擎连接。如果消息发送正确，我只需包含带有感谢消息的 PHP 文件 - require_once('success.php');
css - 点击提交按钮后隐藏表单并出现 'thank you' 框
在用户填写并单击位于底部的提交按钮后，我希望表单消失并在其位置出现一个“谢谢”框。如果有人知道如何完成此操作，请告诉我! JSFiddle First Name
php - PayPal "Thank you"页面，包含详细信息
我正在设置一个页面，在最终用户通过 PayPal 进行购买后向他们显示一些信息。该页面将有许多不同的任务需要执行，以确保用户收到他们所支付的费用，这主要包括在出现严重错误时向用户显示信息，例如: 永远
php - PayPal:将电子邮件地址传递给返回/"thank you"页面
我已经用 PayPal IPN and a listener 成功地创建了一个小的“立即付款”按钮.按钮本身是向导生成的。付款后，用户将被重定向到我的主机上的返回/“谢谢”页面。一切都按预期进行，
ruby-on-rails - 几秒后重定向到 "Thank you"页面
第二天，我尝试将 PayPal 集成到我的网站。我正在尝试获得以下行为: 用户点击 BUY 链接 => 被重定向到 PAYPAL 页面(没关系) 用户完成支付，在PayPal网站上显示“谢谢”页面 1
list - 有没有办法不使用 Mailchimp 将人们重定向到 "thank you"页面？
我在 Mailchimp 网站上看到，当用户订阅您的邮件列表时，您可以将用户重定向到自定义感谢页面，但这并不是我想要做的。当用户订阅我的邮件列表时，我想隐藏表单并直接在我的页面上用感谢信替换它，而无
google-analytics - 实现没有 "thank you page"的目标
我对 GA 的目标和事件还很陌生。我需要一些帮助来实现目标跟踪。我有一个简单的登录页面，位于我的子域文件夹中。 campaign.mydomain.com 页面是 php，包含简单的姓名和电话字段
google-analytics - PloneFormGen 表单的轨道 "Thanks Page"
我希望允许 Google Analytics 跟踪用户已进入 Plone 4.1.6 网站上我的 PloneFormGen(版本 1.7.1)表单的感谢页面。但该页面是使用与表单本身相同的 URL 显
jquery - 当在最后一页上单击提交按钮时，我需要一个中心显示文字 "Thank you for your time"，以及包含绿色脸颊标记的图像
我已经完成了一个完全基于 HTML 和 jQuery 的调查页面。现在下一部分是单击提交按钮时，我需要隐藏所有内容，唯一显示的应该是简单的 HTML 代码，粗体字样“谢谢你的时间”和图像。这是我的代
php - "Thank you"当有人输入 URL 时页面不应该显示，你会怎么做？
我有一个网站。如果有人发布查询，它会转到感谢页面www.legasy.com/thankyou/URL 将是这样的。当我分析网站管理员工具时，它显示的感谢比询问更多。填写表单字段后验证并将该值插入表

行者123

个人简介

我是一名优秀的程序员,十分优秀！

作者热门文章

滴滴打车优惠券免费领取

全站热门文章

首页

博学

6Ren·AI

商城

javascript - 提交表单后将引导模式显示为 "thank you"