如何在联系表单中提交jQuery Slider的值

时间:2015-12-16 15:25:00

标签: php jquery forms

我的网站上有联系表格

<!-- 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  -->

有几个选项滑块,我希望在电子邮件中提交值

<?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>";
}

?>

然而它只输出第一个滑块的值..我怎样才能让它正常工作。

从jQuery演示网站获取滑块演示。

1 个答案:

答案 0 :(得分:1)

好的,我回来了聊天会议。

您需要使用此代码更改代码。

Imports System.Data
Imports System.Data.SqlClient
Imports System.Windows.Forms
Public Class main
    Dim sqlcnx As New SqlConnection

    Dim dtb As DataTable = New DataTable()
    Dim reader As SqlDataReader
   sqlcnx.ConnectionString = "Data Source=HADY-PC\HADI;Initial Catalog=db1;Persist Security Info=True;User ID=sa;Password=1234"


    Dim da As New DataSet1TableAdapters.UserTableAdapter
        dtb.Columns.Add("UserID", GetType(Integer))
        da.FillBy(dtb)
    Dim i As Integer
        MsgBox(dtb.Rows.Count)
         i=dtb.Rows.Count
        If i = 1 Then
            Form1.Show()
        End If
End Class

您目前正在为所有调查分配相同的值。

现在只会更新当前的调查结果。

我已经在我的localhost上测试了它,它工作正常。