dongshi6710
dongshi6710
2014-08-27 11:24
浏览 20

如何用PHP显示html输入框值

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

enter image description here

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>
  • 点赞
  • 写回答
  • 关注问题
  • 收藏
  • 邀请回答

3条回答 默认 最新

  • douzhi1879
    douzhi1879 2014-08-27 11:46
    已采纳

    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

    点赞 评论
  • doushiposong30622
    doushiposong30622 2014-08-27 11:46

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

    点赞 评论
  • dongpu9852
    dongpu9852 2014-08-27 11:47

    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>
    
    点赞 评论

相关推荐