How do i display html inputbox value with php

Question

I am working on a callback page and after the user has entered their details and press the "request a callback" button it toggles a modal i made with CSS3. I put in 27th September but it should display the date that the user selected from the select box and then display it in the modal.

Does anyone know how to do this as i am new to PHP and could only find documentation for displaying it via POST and GET which involved using two pages.

The URL for the live example of the form is: http://temp.tefl.org.uk/callback

Code:

        <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

Just I tried this way

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>

or

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

Answer 2

I assume the modal window is on the same html page with your form? You can't use POST is this case, as it does not contain user input yet (the page was rendered before user submitted his data).

I guess you also use Javascript to display that modal window? In this case you can simply substitute the date and time from user's input with javascript (just a quick example with some updates to your 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);
});

And as a quick note: it's better to use css instead of inline style definitions;)

Answer 3

As i have tried using jquery. Its working with me. Just added "id" to the select element and a span to the date placing area.

May it helps you.

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