如何使用 php 显示 html 输入框值答案

【问题标题】：How do i display html inputbox value with php如何使用 php 显示 html 输入框值
【发布时间】：2014-10-20 23:09:55
【问题描述】：

我正在处理回调页面，在用户输入他们的详细信息并按下“请求回调”按钮后，它会切换我使用 CSS3 制作的模式。我输入的是 9 月 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>

【问题讨论】：

实际上，当您单击“请求回拨”按钮时，您会触发某种脚本 - 我快速查看了您的代码，但什么也没看到。如果您知道它是哪一个，您能否将我们指向您包含的模态脚本，以便我们可以看到它与哪些变量一起使用。
您的敏感信息（日期等）写得不好。考虑添加一个 id 或一个类，以便 javascript 可以访问它们。

标签： javascript php html css

【解决方案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

【讨论】：

【解决方案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 而不是内联样式定义；）

【讨论】：

【解决方案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>

【讨论】：