在联系人表单中显示隐藏警告被延迟
Show-Hide warning is delayed in contact form
我正在设置的联系人表单有一个下拉菜单区域，用于显示时间范围。选择如下：1.正常起搏2.速度快3.紧急起搏。
我将其设置为，每当选择快速或紧急时，都会出现警告，告诉用户价格会随着这些选择而上涨。但是，此警告会延迟，直到用户单击第二个下拉菜单（预算）。在他们选择了两个选项中的一个或没有之后，我能让它立即弹出吗？
完整代码：
HTML
<div id="primary" class="col-md-6">
<div id="form-wrap">
<form action="contact.php" method="post" id="contactForm">
<input type="hidden" name="token" value="<?php echo $newToken; ?>" >
<div class="rowElem">
<ul><li><h5 class="formtitle">Your Name:</h5></li></ul>
<input type="text" id="name" class="required" name="name" placeholder="Name" minlength="2" />
</div><!-- End rowElem -->
<div class="rowElem">
<ul><li><h5 class="formtitle">Best Way to contact you:</h5></li></ul>
<input type="radio" name="contact" id="contactemail" value="Email" />
<label for="email">Email:</label><br /><br />
<div id="emailArea">
<input type="text" name="email" id="email" />
</div>
<input type="radio" name="contact" id="contactphone" value="Phone" />
<label for="phone">Phone:</label><br /><br />
<div id="phoneArea">
<input type="text" name="phone" id="phone" />
</div>
</div><!-- End rowElem -->
<div id="projectList">
<ul><li><h5 class="formtitle">Projects:</h5></li></ul>
<h6>See more in detail <a href="services.html">here</a>.</h6>
<div id="rowElem">
<input type="checkbox" name="project" id="addWeb" value="website" />
<label for="website"> Websites</label>
<div id="addWebArea">
<input type="checkbox" name="web" value="develop" />
<label for="website" class="checkedform"> Design</label>
<input type="checkbox" name="web" value="design" />
<label for="website" class="checkedform"> Develop</label>
</div>
</div><!-- End rowElem -->
<br /><br />
<div id="rowElem">
<input type="checkbox" name="project" id="addGraphic" value="graphic" />
<label for="graphic"> Graphics</label>
<div id="addGraphicArea">
<input type="checkbox" name="graphics" value="branding" />
<label for="graphic" class="checkedform"> Branding</label>
<input type="checkbox" name="graphics" value="posters" />
<label for="graphic" class="checkedform"> Posters</label>
<input type="checkbox" name="graphics" value="other" />
<label for="graphic" class="checkedform"> Other</label>
</div>
</div><!-- End rowElem -->
<br /><br />
<div id="rowElem">
<input type="checkbox" name="project" id="addApp" value="app" />
<label for="app"> Apps</label>
<div id="addAppArea">
<input type="checkbox" name="apps" value="Develop" />
<label for="app" class="checkedform"> Develop</label>
<input type="checkbox" name="apps" value="Design" />
<label for="app" class="checkedform"> Design</label>
</div>
</div><!-- End rowElem -->
<br /><br />
<div id="rowElem">
<input type="checkbox" name="project" id="addPres" value="presentations" />
<label for="presentation"> Presentations</label>
<div id="addPresArea">
<input type="checkbox" name="presentation" value="business" />
<label for="presentation" class="checkedform"> Business</label>
<input type="checkbox" name="presentation" value="event" />
<label for="presentation" class="checkedform"> Event</label>
</div>
</div><!-- End rowElem -->
<br /><br />
<div id="rowElem">
<input type="checkbox" name="project" id="tut" value="tutorials" />
<label for="tutorial"> Tutorials</label>
</div><!-- End rowElem -->
<br /><br />
<div id="rowElem">
<input type="checkbox" name="project" id="addOther" value="other" />
<label for="other"> Other</label>
<div id="addOtherArea">
<label for="other" class="checkedform"> Please Specify:</label>
<input type="text" name="other" value=" " />
</div>
</div><!-- End rowElem -->
</div><!-- End of ProjectList -->
<br /><br />
<div class="row">
<div id="rowElem" class="col-md-4">
<ul><li><h5 class="formtitle">Timeframe:</h5></li></ul>
<select name="timeFrame" id="timeFrame">
<option id="normal" value="normal">Normal Pace</option>
<option id="speedy" value="speedy">Speedy Pace</option>
<option id="urgent" value="urgent">URGENT Pace</option>
</select>
<div id="extraChargeArea">
<br /><br />
<h6 style="color:red">Please note that there will be an extra charge for speedy & urgent.</h6>
</div>
</div><!-- End rowElem -->
<div class="col-md-2">
<br /><br />
<img src="img/andsign.png" class="img-responsive" alt="&" />
</div>
<div id="rowElem" class="col-md-6">
<ul><li><h5 class="formtitle">Budget:</h5></li></ul>
<select name="budget">
<option value="Price1">$50 - $100</option>
<option value="Price2">$100 - $500</option>
<option value="Price3">$500 - $2,500</option>
<option value="Price4">$2,500 - $5,000</option>
<option value="Price5">$5,000 - $10,000</option>
<option value="Price2">$10,000 +</option>
</select>
<br /><br />
<h6>Pricing will vary, depending on complexity & timeframe.</h6>
<h6 style="color:red">Deposit of 40% required before start date.</h6>
</div><!-- End rowElem -->
</div><!-- End of Row -->
<br />
<div class="rowElem">
<input type="submit" value="Submit!" class="contactbutton btn btn-primary btn-lg" />
</div><!-- End rowElem -->
</form>
</div> <!-- End form-wrap -->
<script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
var pageTracker = _gat._getTracker("UA-68528-29");
pageTracker._initData();
pageTracker._trackPageview();
</script>
</div><!-- End of Primary Col -->
JS-
$(function () {
$('#contactForm').jqTransform().validate({
submitHandler: function (form) {
$(form).ajaxSubmit({
success: function () {
$('#contactForm').hide();
$('#form-wrap').append("<p class='thanks'>Thanks! Your request has been sent.</p>")
}
});
}
});
$("#emailArea").hide();
$("#phoneArea").hide();
$("#phoneArea").hide();
$("#addWebArea").hide();
$("#addGraphicArea").hide();
$("#addAppArea").hide();
$("#addPresArea").hide();
$("#addOtherArea").hide();
$(".jqTransformRadio").click(function () {
if ($(".jqTransformRadio").eq(1).attr("class") == "jqTransformRadio jqTransformChecked") {
$("#phoneArea").slideDown();
$("#emailArea").hide();
} else {
$("#emailArea").slideDown();
$("#phoneArea").hide();
}
});
$('.jqTransformCheckbox').click(function () {
if ($('#addWeb').is(':checked')) {
$('#addWebArea').show();
} else {
$('#addWebArea').hide();
}
});
$('.jqTransformCheckbox').click(function () {
if ($('#addGraphic').is(':checked')) {
$('#addGraphicArea').show();
} else {
$('#addGraphicArea').hide();
}
});
$('.jqTransformCheckbox').click(function () {
if ($('#addApp').is(':checked')) {
$('#addAppArea').show();
} else {
$('#addAppArea').hide();
}
});
$('.jqTransformCheckbox').click(function () {
if ($('#addPres').is(':checked')) {
$('#addPresArea').show();
} else {
$('#addPresArea').hide();
}
});
$('.jqTransformCheckbox').click(function () {
if ($('#addOther').is(':checked')) {
$('#addOtherArea').show();
} else {
$('#addOtherArea').hide();
}
});
$("#extraChargeArea").hide();
$(document).on('change', '#timeFrame', function(){
if($('#normal').is(':selected'))
{$('#extraChargeArea').hide();}
else
{$('#extraChargeArea').show();}
});
});
PHP
<?php
session_start();
function getRealIp() {
if (!empty($_SERVER['HTTP_CLIENT_IP'])) { //check ip from share internet
$ip=$_SERVER['HTTP_CLIENT_IP'];
} elseif (!empty($_SERVER['HTTP_X_FORWARDED_FOR'])) { //to check ip is pass from proxy
$ip=$_SERVER['HTTP_X_FORWARDED_FOR'];
} else {
$ip=$_SERVER['REMOTE_ADDR'];
}
return $ip;
}
function writeLog($where) {
$ip = getRealIp(); // Get the IP from superglobal
$host = gethostbyaddr($ip); // Try to locate the host of the attack
$date = date("d M Y");
// create a logging message with php heredoc syntax
$logging = <<<LOG
'n
<< Start of Message >>
There was a hacking attempt on your form. 'n
Date of Attack: {$date}
IP-Adress: {$ip} 'n
Host of Attacker: {$host}
Point of Attack: {$where}
<< End of Message >>
LOG;
// Awkward but LOG must be flush left
// open log file
if($handle = fopen('hacklog.log', 'a')) {
fputs($handle, $logging); // write the Data to file
fclose($handle); // close the file
} else { // if first method is not working, for example because of wrong file permissions, email the data
$to = 'ashsquires27@icloud.com';
$subject = 'HACK ATTEMPT';
$header = 'From: support@mcdeavdesigns.com';
if (mail($to, $subject, $logging, $header)) {
echo "Sent notice to admin.";
}
}
}
function verifyFormToken($form) {
// check if a session is started and a token is transmitted, if not return an error
if(!isset($_SESSION[$form.'_token'])) {
return false;
}
// check if the form is sent with token in it
if(!isset($_POST['token'])) {
return false;
}
// compare the tokens against each other if they are still the same
if ($_SESSION[$form.'_token'] !== $_POST['token']) {
return false;
}
return true;
}
function generateFormToken($form) {
// generate a token from an unique value, took from microtime, you can also use salt-values, other crypting methods...
$token = md5(uniqid(microtime(), true));
// Write the generated token to the session variable to check it against the hidden field when the form is sent
$_SESSION[$form.'_token'] = $token;
return $token;
}
// VERIFY LEGITIMACY OF TOKEN
if (verifyFormToken('form1')) {
// CHECK TO SEE IF THIS IS A MAIL POST
if (isset($_POST['name'])) {
// Building a whitelist array with keys which will send through the form, no others would be accepted later on
$whitelist = array('token','name','email','phone','web','graphics','apps', 'presentation','project','other','timeFrame','budget', 'info');
// Building an array with the $_POST-superglobal
foreach ($_POST as $key=>$item) {
// Check if the value $key (fieldname from $_POST) can be found in the whitelisting array, if not, die with a short message to the hacker
if (!in_array($key, $whitelist)) {
writeLog('Unknown form fields');
die("Hack-Attempt detected. Please use only the fields in the form");
}
}
// PREPARE THE BODY OF THE MESSAGE
$message = '<html><body>';
$message .= 'McDeav Designs Possible Client';
$message .= '<table rules="all" style="border-color: #666;" cellpadding="10">';
$message .= "<tr style='background: #eee;'><td><strong>Name:</strong> </td><td>" . strip_tags($_POST['name']) . "</td></tr>";
$message .= "<tr><td><strong>Email:</strong> </td><td>" . strip_tags($_POST['email']) . "</td></tr>";
$message .= "<tr><td><strong>Phone:</strong> </td><td>" . strip_tags($_POST['phone']) . "</td></tr>";
$message .= "<tr><td><strong>Projects:</strong> </td><td>" . strip_tags($_POST['project']) . "</td></tr>";
$message .= "<tr><td><strong>Timeframe:</strong> </td><td>" . strip_tags($_POST['timeFrame']) . "</td></tr>";
$message .= "<tr><td><strong>Budget:</strong> </td><td>" . strip_tags($_POST['budget']) . "</td></tr>";
$message .= "<tr><td><strong>Additional Info:</strong> </td><td>" . htmlentities($_POST['info']) . "</td></tr>";
$message .= "</table>";
$message .= "</body></html>";
// MAKE SURE THE "FROM" EMAIL ADDRESS DOESN'T HAVE ANY NASTY STUFF IN IT
$pattern = "/^[_a-z0-9-]+('.[_a-z0-9-]+)*@[a-z0-9-]+('.[a-z0-9-]+)*('.[a-z]{2,3})$/i";
if (preg_match($pattern, trim(strip_tags($_POST['email'])))) {
$cleanedFrom = trim(strip_tags($_POST['email']));
} else {
return "The email address you entered was invalid. Please try again!";
}
// CHANGE THE BELOW VARIABLES TO YOUR NEEDS
$to = 'ashsquires27@icloud.com';
$subject = 'New Client';
$headers = "From: " . $cleanedFrom . "'r'n";
$headers .= "Reply-To: ". strip_tags($_POST['email']) . "'r'n";
$headers .= "MIME-Version: 1.0'r'n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1'r'n";
if (mail($to, $subject, $message, $headers)) {
echo 'Your message has been sent.';
} else {
echo 'There was a problem sending the email.';
}
die();
}
} else {
if (!isset($_SESSION[$form.'_token'])) {
} else {
echo "Hack-Attempt detected. Got ya!.";
writeLog('Formtoken');
}
}
?>
磁头之后
<?php
// generate a new token for the $_SESSION superglobal and put them in a hidden field
$newToken = generateFormToken('form1');
?>
CSS
.jqTransformSelectWrapper ul a {
display: block;
padding: 5px;
text-decoration: none;
color:#333;
background-color: #FFF;
font-size: 12px;
}
.jqTransformSelectWrapper ul a.selected {
background: #EDEDED;
color: #333;
}
.jqTransformSelectWrapper ul a:hover, .jqTransformSelectWrapper ul a.selected:hover {
background:#3582c4;
color: #fff;
}
/* -------------
* Hidden - used to hide the original form elements
* ------------- */
.jqTransformHidden {display: none;}
因为要附加用户单击元素时发生的click处理程序，所以要附加元素值更改时发生的change处理程序。试试这个：
$("#extraChargeArea").hide();
$('#timeFrame').change(function(){
if($('#normal').is(':selected'))
{$('#extraChargeArea').hide();}
else
{$('#extraChargeArea').show();}
});
演示
相关文章：
- chrome扩展更改主机/域警告
- 可以简化嵌套的延迟Q Promises解析吗
- onclick函数需要双击，因为类分配延迟
- 更多延迟动画
- 对父作用域的指令更新延迟了一步
- 为JS函数添加延迟
- 带有延迟的循环每次应运行5次
- 如何永久停止jshint'只读'警告/错误
- 关键帧之间的css3动画延迟
- 如何在有延迟的情况下对两个代码进行积分
- 如何为.css状态的更改添加延迟
- Angular.js延迟控制器初始化
- JShint-.jshintrc中的ES6有esversion，但仍收到警告(使用atom）
- 在延迟时设置Whois脚本
- 如何在Javascript中延迟setInterval
- 如何在一个元素动画之后延迟
- 如何将一个方法延迟到另一个方法首先完成，javascript
- 在联系人表单中显示隐藏警告被延迟
- Jquery延迟像警告框一样停止代码
- 延迟"没有Javascript"警告显示
