我如何顯示HTML輸入框值與PHP

Question

我正在回調頁面上，並在用戶已經輸入他們的細節，並按下「請求回調」按鈕它切換我用CSS3製作的模式。我在9月27日放入，但它應該顯示用戶從選擇框中選擇的日期，然後將其顯示在模式中。

有沒有人知道如何做到這一點，因爲我是PHP的新手，只能找到文檔通過POST和GET顯示它涉及使用兩頁。

爲形式的活生生的例子網址爲：http://temp.tefl.org.uk/callback

代碼：

 <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試過。它與我合作。只需在選擇元素中添加「id」，並在日期放置區域添加一個範圍。

它可以幫助你。

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