如何在联系表单中提交jQuery Slider的值
[英]How To Submit Value Of jQuery Slider In Contact Form
问题描述
I have a contact form on my website 
我的网站上有联系表
<!-- START FOAMY MEDIA FORM -->
<style>
p.heading {background:#f1f1f1;padding:10px;border:1px solid #d1d1d1;font-size:16px;padding-left:10px;}
p.info, span {color:#d00d1e;}
label {width:250px;display:inline-block;}
input[type="text"], textarea{padding:6px;width:400px;}
input[type="submit"]{background:#006699;color:#fff;padding:14px 20px;border:none;outline:none;font-size:14px;cursor:pointer;}
input[type="submit"]:hover {background:#333;}
#comments {min-width:400px; max-width:400px;min-height:200px;max-height:200px;overflow:scroll;}
h3 {margin-top:30px;margin-bottom:20px;font-weight:900;}
p.thankyou {background:#2ecc71;color:#fff;padding:10px;}
input.error {border: 2px solid #d00d13;}
.slider {width:500px;margin-top:10px;}
p span.num {margin-right:105px;margin-left:10px;}
</style>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script src="http://www.thetigneschaletcompany.com/js/plugins.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker({ dateFormat: 'dd/mm/yy' });
});
</script>
<script>
$(function() {
$( ".slider" ).slider({
value:5,
min: 1,
max: 5,
step: 1,
slide: function( event, ui ) {
$( ".amount" ).val( ui.value );
}
});
$( ".amount" ).val( $( ".slider" ).slider( "value" ) );
});
</script>
<br/>
<h1>Guest Feedback Form</h1>
<p>We hope that you have enjoyed your stay with The TCC, please take a minute to fill in the following form. We also welcome any additional comments.</p>
<br/>
<?=$thankYou ?>
<form id="form" method="post" action="feedback-form-tcc-guests.php">
<p>
<label for="arrivaldate">Arrival Date:</label>
<input type="text" placeholder="DD/MM/YYYY" id="datepicker" name="arrivaldate" required>
</p>
<p>
<label for"name">Name:</label>
<input type="text" id="name" name="name" required>
</p>
<p>
<label for="chalet">Chalet:</label>
<select id="chalet" name="chalet" required>
<option>La Tourne</option>
<option>Les Martins</option>
<option>Attique 39</option>
<option>Evelyne</option>
<option>Lavachet Lodge</option>
</select>
</p>
<p>
<label for="email">Email Address:</label>
<input type="text" id="email" name="email" required>
</p>
<br/>
<p>We would love your feedback on your stay so please complete the following and rate us, where the score rating is:</p>
<p style="color:#d00d1e;">A score of <b>1</b> - <b>BELOW Expectations</b>, <b>3</b> - <b>MET Expectations</b> and <b>5</b> - <b>EXCEEDED Expectations</b>.</p>
<h3>Pre-departure Service</h3>
<!--slide 1-->
<label for="amount">Initial response rate to original enquiry:</label>
<input type="text" class="amount" readonly style="border:0; color:#fff; font-weight:bold;" name="survey1">
<div class="slider"></div>
<p><span class="num">1</span><span class="num">2</span><span class="num">3</span><span class="num">4</span><span class="num">5</span></p>
<br/>
<!--slide 2-->
<label for="amount">Information provided during the booking process:</label>
<input type="text" class="amount" readonly style="border:0; color:#fff; font-weight:bold;" name="survey2">
<div class="slider"></div>
<p><span class="num">1</span><span class="num">2</span><span class="num">3</span><span class="num">4</span><span class="num">5</span></p>
<br/>
<hr/>
<!--slide 3-->
<h3>Transfer from airport (if applicable)</h3>
<label for="amount">Transfer from airport :</label>
<input type="text" class="amount" readonly style="border:0; color:#fff; font-weight:bold;" name="survey3">
<div class="slider"></div>
<p><span class="num">1</span><span class="num">2</span><span class="num">3</span><span class="num">4</span><span class="num">5</span></p>
<br/>
<!--slide 4-->
<hr/>
<h3>Chalet Hosts</h3>
<label for="amount">Welcome Talk:</label>
<input type="text" class="amount" readonly style="border:0; color:#fff; font-weight:bold;" name="survey4">
<div class="slider"></div>
<p><span class="num">1</span><span class="num">2</span><span class="num">3</span><span class="num">4</span><span class="num">5</span></p>
<br/>
<!--slide 5-->
<label for="amount">Friendliness of chalet hosts:</label>
<input type="text" class="amount" readonly style="border:0; color:#fff; font-weight:bold;" name="survey5">
<div class="slider"></div>
<p><span class="num">1</span><span class="num">2</span><span class="num">3</span><span class="num">4</span><span class="num">5</span></p>
<br/>
<!--slide 6--> <hr/>
<h3>Cleanliness</h3>
<label for="amount">Chalet Cleanliness:</label>
<input type="text" class="amount" readonly style="border:0; color:#fff; font-weight:bold;" name="survey6">
<div class="slider"></div>
<p><span class="num">1</span><span class="num">2</span><span class="num">3</span><span class="num">4</span><span class="num">5</span></p>
<br/>
<hr/>
<!--slide 7-->
<h3>Food</h3>
<label for="amount">Breakfast:</label>
<input type="text" class="amount" readonly style="border:0; color:#fff; font-weight:bold;" name="survey7">
<div class="slider"></div>
<p><span class="num">1</span><span class="num">2</span><span class="num">3</span><span class="num">4</span><span class="num">5</span></p>
<br/>
<!--slide 8-->
<label for="amount">Afternoon tea:</label>
<input type="text" class="amount" readonly style="border:0; color:#fff; font-weight:bold;" name="survey8">
<div class="slider"></div>
<p><span class="num">1</span><span class="num">2</span><span class="num">3</span><span class="num">4</span><span class="num">5</span></p>
<br/>
<!--slide9-->
<label for="amount">Children's high tea (if applicable):</label>
<input type="text" class="amount" readonly style="border:0; color:#fff; font-weight:bold;" name="survey9">
<div class="slider"></div>
<p><span class="num">1</span><span class="num">2</span><span class="num">3</span><span class="num">4</span><span class="num">5</span></p>
<br/>
<!--slide10-->
<label for="amount">Dinner:</label>
<input type="text" class="amount" readonly style="border:0; color:#fff; font-weight:bold;" name="survey10">
<div class="slider"></div>
<p><span class="num">1</span><span class="num">2</span><span class="num">3</span><span class="num">4</span><span class="num">5</span></p>
<br/>
<hr/>
<!--slide11-->
<h3>Value for money</h3>
<label for="amount">Chalet value for money:</label>
<input type="text" class="amount" readonly style="border:0; color:#fff; font-weight:bold;" name="survey11">
<div class="slider"></div>
<p><span class="num">1</span><span class="num">2</span><span class="num">3</span><span class="num">4</span><span class="num">5</span></p>
<br/>
<!--comments-->
<p>
<label for="comments">Additional Comments</label>
</p>
<p><input type="text" id="comments" name="comment"></p>
<p><input type="submit" value="Submit Form" name="submit">
</form>
<!--ends form-->
<script src="http://www.thetigneschaletcompany.com/js/main.js"></script>
<!-- ENDS FOAMY FORM -->
which has several option sliders which i want the value to be submitted in an email 它有几个选项滑块，我希望值通过电子邮件提交
<?php
if($_POST["submit"]) {
$recipient="stucookney@gmail.com";
$sender=$_POST["name"];
$senderEmail=$_POST["email"];
$subject="Guest Feedback Form - $sender";
$arrivaldate=$_POST["arrivaldate"];
$chalet=$_POST["chalet"];
$survey1=$_POST["survey1"];
$survey2=$_POST["survey2"];
$survey3=$_POST["survey3"];
$survey4=$_POST["survey4"];
$survey5=$_POST["survey5"];
$survey6=$_POST["survey6"];
$survey7=$_POST["survey7"];
$survey8=$_POST["survey8"];
$survey9=$_POST["survey9"];
$survey10=$_POST["survey10"];
$survey11=$_POST["survey11"];
$comment=$_POST["comment"];
$mailBody="
<strong>Name:</strong> $title $sender<br/>
<strong>Email:</strong> $senderEmail<br/><br/>
<strong>Chalet:</strong> $chalet<br/>
<strong>Arrival Date:</strong> $arrivaldate<br/><br/>
<strong>Pre-departure Service</strong><br/><br/>
<strong>Initial response rate to original enquiry:</strong> $survey1<br/>
<strong>Information provided during the booking process:</strong> $survey2<br/>
<strong>Transfer from airport (if applicable):</strong> $survey3<br/><br/>
<strong>Chalet Hosts</strong><br/><br/>
<strong>Welcome Talk</strong> $survey4<br/>
<strong>Friendliness of chalet hosts:</strong> $survey5<br/>
<strong>Cleanliness:</strong> $survey6<br/><br/>
<strong>Food</strong><br/><br/>
<strong>Breakfast</strong> $survey7<br/>
<strong>Afternoon tea:</strong> $survey8<br/>
<strong>Children's high tea (if applicable):</strong> $survey9<br/>
<strong>Dinner:</strong> $survey10<br/><br/>
<strong>Value for money</strong><br/><br/>
<strong> Chalet value for money</strong> $survey11<br/></br/>
<strong>Additional Comments:</strong> $comment<br/>
"
;
$headers = "MIME-Version: 1.0\r\n";
$headers .= "Content-type: text/html; charset=utf-8\r\n";
$headers .= "From: $sender <$senderEmail>\r\n";
mail($recipient, $subject, $mailBody, $headers);
$thankYou="<p class='thankyou'>Thank you for completing the feedback form, we hope you enjoyed your stay.</p>";
}
?>
however it is only outputting the value of the first slider.. how can i get it to work properly. 但是，它只输出第一个滑块的值..我怎样才能使其正常工作。
taken the slider demo from the jQuery demo website. 从jQuery演示网站上获取了滑块演示。
1 个解决方案
解决方案1
1 已采纳 2015-12-16 18:21:04
Ok I am back from the chat session. 好的，我从聊天会话中回来了。
You need to change your code with this one. 您需要使用此代码更改代码。
$(document).ready(function(){
$( ".slider" ).slider({
value:5,
min: 1,
max: 5,
step: 1,
slide: function( event, ui ) {
//console.log(ui.value)
$(this).prev('.amount').val(ui.value)
}
});
});
You are currently assigning just the same value to all the surveys. 您当前正在为所有调查分配相同的值。
This will now update only the current survey. 现在，这将仅更新当前调查。
I have test it on my localhost and it is working just fine. 我已经在我的本地主机上对其进行了测试，并且工作正常。
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.
相关问题
jQuery提交联系表格 - jquery submit contact form
提交表单时如何从滑块范围jquery中回显值，以及如何从$ _GET值设置滑块范围的值？ - How to echo value from slider range jquery when submit form And How to set value of slider range from $_GET value?
如何使用php在jQuery mobile中提交联系表单？ - How to submit a contact form in jQuery mobile using php?
通过jQuery Ajax提交联系表格时出错 - error on contact form submit via jquery ajax
php联系表单提交jquery验证 - php contact form submit with jquery validation
提交后隐藏的jQuery联系人表单 - Jquery contact form hiding after submit
如何提交联系表而不重定向到其他页面 - How to Submit a Contact Form and Not Redirect to Another Page
如何使联系表单提交对 email 的响应？ - How to make the contact form submit responses to email?
如何使javascript联系表单正确提交 - How to make javascript contact form submit correctly
如何通过 1 次点击而不是 2 次在移动设备上提交联系表单 - How to make contact form submit with 1 click and not 2 on mobile
相关标签