Как отобразить значение ввода ввода html с помощью php

Question

Я работаю над страницей обратного вызова и после того, как пользователь ввел свои данные и нажал кнопку «запросить обратный вызов», он переключает модальный код i, сделанный с помощью CSS3. Я поставил 27 сентября, но он должен отображать дату, которую пользователь выбрал в поле выбора, а затем отобразить ее в модальном режиме.

Кто-нибудь знает, как это сделать, поскольку я новичок в PHP и могу найти документацию для ее отображения через POST и GET, которые используют две страницы.

URL-адрес для живого примера формы: 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

<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» к элементу select и пробелу в область размещения даты.

Это поможет вам.

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