Question

我正在处理一个回调页面，在用户输入了他们的详细信息并按下“请求回拨”按钮后，它切换了一个用CSS3制作的模态。我在9月27日放了，但它应该显示用户从选择框中选择的日期，然后在模态中显示。

有没有人知道如何做到这一点，因为我是PHP的新手，只能找到通过POST和GET显示它的文档，其中涉及使用两个页面。

表单实时示例的网址为：http://temp.tefl.org.uk/callback

enter image description here

代码：

        <h6 style="color:#7F7F7F; padding-bottom:15px">Select the day and time that you would prefer an advisor to call you back on.</h6>

        <form class="form-horizontal">     
<div class="control-group">
   <label class="control-label" for="inputEmail">Date To Call</label>
     <div class="controls">
        <select>
            <option>Monday 1st September </option>
            <option>Tuesday 2st September</option>
            <option>Wednesday 3st September</option>
            <option>Thursday 4st September</option>
            <option>Friday 5st September</option>
         </select>
     </div>
 </div>
         <div class="control-group">
           <label class="control-label" for="inputEmail">Time To Call</label>
            <div class="controls">
              <select>
                  <option>Please select...</option>
                  <option>09:00</option>
                  <option>09:30</option>
                  <option>10:00</option>
                  <option>10:30</option>
                  <option>11:00</option>
                  <option>11:30</option>
                  <option>12:00</option>
                  <option>12:30</option>
                  <option>13:00</option>
                  <option>13:30</option>
                  <option>14:00</option>
                  <option>14:30</option>
                  <option>15:00</option>
                  <option>15:30</option>
                  <option>16:00</option>
                  <option>16:30</option>
                  <option>17:00</option>
              </select>
            </div>
         </div>
        </form>         
        <a class="btn btn-danger" style="margin-top:15px"  href="#openModal">Request A Call Back</a>

    </div>

    </div><!--.row-->

 <div id="openModal" class="modalDialog">
 <div><a href="#close" title="Close" class="close">X</a>
  <h1 style="text-align:center">Thank you, <?php echo $_POST["forename"]; ?></h1>
    <h4 style="text-align:center; margin-top:15px">Your call back request has been logged, a member of our team will contact you on</h4>
    <h4 style="text-align:center; margin-top:25px; color:#7f7f7f"><b>27th September 2014 @ 0900</b></h4>
  <center><a href="http://temp.tefl.org.uk/callback" class="btn btn-success" style="margin-top:15px; margin-bottom:10px">Okay great!</a></center>

</div>
</div>

Answer 1

我试过这种方式

脚本

<script>
function requestSent(thisValue,className){
    $('.'+className).html(thisValue);
}
</script>

HTML

     <select name="dmy" id="dmy" onchange="requestSent(this.value,'responseRecvd1')">
        <option>Monday 1st September </option>
        <option>Tuesday 2st September</option>
        <option>Wednesday 3st September</option>
        <option>Thursday 4st September</option>
        <option>Friday 5st September</option>
     </select>

     <select name="tme" id="tme" onchange="requestSent(this.value,'responseRecvd2')">
              <option>Please select...</option>
              <option>09:00</option>
              <option>09:30</option>
              <option>10:00</option>
              <option>10:30</option>
              <option>11:00</option>
              <option>11:30</option>
              <option>12:00</option>
              <option>12:30</option>
              <option>13:00</option>
              <option>13:30</option>
              <option>14:00</option>
              <option>14:30</option>
              <option>15:00</option>
              <option>15:30</option>
              <option>16:00</option>
              <option>16:30</option>
              <option>17:00</option>
          </select>     

 <h4 style="text-align:center; margin-top:25px; color:#7f7f7f" class="responseRecvd1"><b>27th September 2014</b></h4>
 <h4 style="text-align:center; margin-top:25px; color:#7f7f7f" class="responseRecvd2"><b>@ 0900</b></h4>

或

How to pass values arguments to modal.show() function in Bootstrap

Answer 2

我假设模态窗口与您的表单在同一个html页面上？在这种情况下你不能使用POST，因为它还没有包含用户输入（页面是在用户提交数据之前呈现的）。

我猜你也用Javascript来显示那个模态窗口？在这种情况下，您只需使用javascript替换用户输入的日期和时间（只是一个快速示例，其中包含对您的HTML的一些更新）：

<select id='selected_date'>
            <option>Monday 1st September </option>
            <option>Tuesday 2st September</option>
            <option>Wednesday 3st September</option>
            <option>Thursday 4st September</option>
            <option>Friday 5st September</option>
         </select>

<div id="openModal" class="modalDialog">
 <div><a href="#close" title="Close" class="close">X</a>
  <h1 style="text-align:center">Thank you, <span class="username"><span> ?></h1>
    <h4 style="text-align:center; margin-top:15px">Your call back request has been logged, a member of our team will contact you on</h4>
    <h4 style="text-align:center; margin-top:25px; color:#7f7f7f"><b><span class="date"></span> @ 0900</b></h4>
  <center><a href="http://temp.tefl.org.uk/callback" class="btn btn-success" style="margin-top:15px; margin-bottom:10px">Okay great!</a></center>

</div>

$("form a.btn-danger").click(function(){
  //your modal page opening is handled somewhere here

  var selectedDate = $("#selected_date").find(":selected").text();
  $("#openModal").find("span.date").html(selectedDate);
});

快速说明一下：使用css代替内联样式定义会更好;）

Answer 3

因为我尝试过使用jquery。它与我合作。刚刚添加了＃34; id＆＃34;到选择元素和到日期放置区域的跨度。

它可以帮助你。

    <script>
    $(document).ready(function(){
        $('.btn-danger').click(function(){
            var datetocall = $('#date-to-call').val();
            var datetotime = $('#date-to-time').val();
            if(datetotime == 'Please select...')
            {
                var datetottime = '';
            }
            var addeddate = datetocall +' '+datetotime;
            $('#element_date').html(addeddate);
        });
    });
    </script>
<h6 style="color:#7F7F7F; padding-bottom:15px">Select the day and time that you would prefer an advisor to call you back on.</h6>

        <form class="form-horizontal">     
<div class="control-group">
   <label class="control-label" for="inputEmail">Date To Call</label>
     <div class="controls">
        <select id="date-to-call">
            <option>Monday 1st September </option>
            <option>Tuesday 2st September</option>
            <option>Wednesday 3st September</option>
            <option>Thursday 4st September</option>
            <option>Friday 5st September</option>
         </select>
     </div>
 </div>
         <div class="control-group">
           <label class="control-label" for="inputEmail">Time To Call</label>
            <div class="controls">
              <select id="date-to-time">
                  <option>Please select...</option>
                  <option>09:00</option>
                  <option>09:30</option>
                  <option>10:00</option>
                  <option>10:30</option>
                  <option>11:00</option>
                  <option>11:30</option>
                  <option>12:00</option>
                  <option>12:30</option>
                  <option>13:00</option>
                  <option>13:30</option>
                  <option>14:00</option>
                  <option>14:30</option>
                  <option>15:00</option>
                  <option>15:30</option>
                  <option>16:00</option>
                  <option>16:30</option>
                  <option>17:00</option>
              </select>
            </div>
         </div>
        </form>         
        <a class="btn btn-danger" style="margin-top:15px"  href="#openModal">Request A Call Back</a>

    </div>

    </div><!--.row-->

 <div id="openModal" class="modalDialog">
 <div><a href="#close" title="Close" class="close">X</a>
  <h1 style="text-align:center">Thank you, <?php echo $_POST["forename"]; ?></h1>
    <h4 style="text-align:center; margin-top:15px">Your call back request has been logged, a member of our team will contact you on</h4>
    <h4 style="text-align:center; margin-top:25px; color:#7f7f7f"><b><span id="element_date">27th September 2014 @ 0900</span></b></h4>
  <center><a href="http://temp.tefl.org.uk/callback" class="btn btn-success" style="margin-top:15px; margin-bottom:10px">Okay great!</a></center>

</div>
</div>

如何用PHP显示html输入框值

3 个答案: