Question

我有一个带有下拉列表的表单来选择安排时间

我没有使用选择器输入，而是使用以下html来制作菜单，因为造型原因。

<div class="tabs">
  <div class="apt-time">
    <h3>&#64;Time</h3>
    <ul class="time-list">
      <li class="available">8:00am</li>
      <li class="available">9:00am</li>
      <li class="available">10:00am</li>
      <li class="available">11:00am</li>
      <li class="available">12:00am</li>
      <li class="available">1:00pm</li>
      <li class="available">2:00pm</li>
      <li class="available">3:00pm</li>
      <li class="available">4:00pm</li>
      <li class="available">5:00pm</li>
    </ul>
  </div>
</div>

因此我无法使用POST方法获取用户在菜单中单击的数据。所以我尝试提出一个解决方案，可以将带有事件的字符串变量传递给我的php页面，并在下面的代码中使用GET方法。 if语句将被使用，因此客户端无法在不单击菜单中的选项的情况下提交表单。如果不使用选择器输入，有没有办法解决这个问题呢？

$('.available').click(function() {
  return clockTime = $(event.target).text()
})
$('.btn').click(function() {
  if ($('.available').click) {
    window.location.href = "textsms.php?"+clockTime
  } else {
    // warn client that they need to chose a time
  }
})

Answer 1

您没有在重定向中定义get变量：

window.location.href = "textsms.php?"+clockTime

以下内容将“clockTime”存储在$ _GET ['time']

中

window.location.href = "textsms.php?time="+clockTime

编辑：无论如何你的JS不正确。

var clockTime;
$('.available').click(function(e) {
    clockTime = $(this).text();
})
$('.btn').click(function() {
    if(typeof clockTime !== "undefined"){
        window.location.href = "textsms.php?time="+clockTime
    }else{
        // warn client that they need to chose a time
    }
});

Answer 2

您可以使用控制变量（也定义显示所选选项的css类）：

var selectedTime = '';

$('.available').click(function() {
   $('.available').removeClass('clicked');
   $(this).addClass('clicked');
   selectedTime = $(this).text();
})

$('.btn').click(function() {
  if (selectedTime != '') {
      window.location.href = "textsms.php?time="+selectedTime;
  } else {
    // warn client that they need to chose a time
  }
})

Answer 3

您需要获取值并将其正确传递到您所在的位置：

$("ul.time-list").on("click","li.available",function(){
  var selectedTime = $(this).text();
  window.location.href = "textsms.php?varname="+selectedTime;
});

我喜欢在事件中使用jquery，因为它允许您动态使用加载内容，只要您定位外部静态元素。

http://api.jquery.com/on/

Answer 4

下面添加了AJAX功能。该脚本将POST值传递给名为textsms.php的PHP脚本，而不刷新浏览器。

更新代码：

<script>
$('.available').click(function() {
        var clockTime = $(this).text();
        $.ajax({
             url:"textsms.php",
             method:"POST",
             data:{'clockTime':clockTime,var2:'2',}, // modify fields
             success: function(data){
                alert(data); // Do something with data received
            },
       });    

});</script>

进行测试..

<强> textsms.php：

<?php
print_r( $_POST );
?>

如何使用jquery事件将变量传递给php？

4 个答案: