Question

滑块的值显示在输入文本框中。当我移动滑块时，文本框中的值会相应更改。我在另一个php页面中回显了文本框中的值，它们是0.当我单击提交按钮时，它仍然回显数字0.例如，我将滑块移动到720但是当我单击提交按钮时它仍然显示0 。请在这件事上给予我帮助。任何形式的帮助表示赞赏。提前致谢。以下是表单的代码 index.php ：

    <form method="POST" action="index.php">

<p class="submitSlider">
    <input type="SUBMIT" name="submit" value="Submit" onclick="showAvailable()">
</p>

<div id="slider1Containter">
    <p>
        Time Range: <span class="slider-time">10:00 AM</span>
    </p>
    <input type="number" id="startShift" name="startShiftSlider">
    <div id="slider"></div>
</div>

<div id="slider2Containter">
    <p>
        Time Range: <span class="slider-time2">10:00 AM</span>
    </p>
    <input type="number" id="endShift" name="endShiftSlider">
    <div id="slider2"></div>
</div>

</form>

以下是 seatmap.php 的完整代码：

<?php  
if ($_SERVER['REQUEST_METHOD'] == 'POST'){
session_start();

$startShift = $_POST['startShiftSlider'];
$endShift = $_POST['endShiftSlider'];

$_SESSION['startShiftValue'] = $startShift;
$_SESSION['endShiftValue'] = $endShift;

$finalStartShiftValue = $_SESSION['startShiftValue'];
$finalEndShiftValue = $_SESSION['endShiftValue'];

echo $finalStartShiftValue;
echo $finalEndShiftValue;
}
?>

对于 functions.js 中的javascript / ajax函数：

function showAvailable(){
  var xmlhttp;

  var getStartShift;
  var getEndShift;

  if(window.XMLHttpRequest){
      xmlhttp=new XMLHttpRequest();
  }
  else{
      xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function(){
      if(xmlhttp.readyState==4 && xmlhttp.status==200)
      {
        getStartShift = document.getElementById("startShift").value;
        getEndShift = document.getElementById("endShift").value;

        xmlhttp.open("GET","seatmap.php?sendStartShift="+getStartShift+"&sendEndShift="+getEndShift,true);
        xmlhttp.send();
      }
  }  
}

这可能与另一个SO论坛重复，因为我刚刚关注该论坛的代码。

哦，这是 CSS ：

body{
font-family: tahoma;
margin: 50px;
font-size: 15px;
}

#slider{
width: 400px;
}  

#slider2{
width: 400px;
}

#slider1Containter{
display: inline-block;
}

#slider2Containter{
display: inline-block;
}

.submitSlider input{
border-radius: 0;
border: 0px none;
background-color: #00A0D1;
padding: 5px 10px 5px 10px;
color: white;
}

.submitSlider input:hover{
color: black;
cursor: pointer;
}

Answer 1

xmlhttp.onreadystatechange函数不会在xmlhttp.open(...)之前执行。只有当网页的readystate发生变化时，才会执行此函数，并且浏览器会调用该函数。在行;

xmlhttp.open("GET","seatmap.php?sendStartShift="+getStartShift+"&sendEndShift="+getEndShift,true);

你的获取请求将等同于;

seatmap.php?sendStartShift=null&sendEndShift=null

因为未声明变量getStartShift和getEndShift，因为您将其设为xmlhttp.onreadystatechange函数的本地

尝试改变这一点;

xmlhttp.onreadystatechange=function(){
   if(xmlhttp.readyState==4 && xmlhttp.status==200)
   {
      var getStartShift = document.getElementById("startShift").value;
      var getEndShift = document.getElementById("endShift").value;
   }
}
xmlhttp.open("GET","seatmap.php?sendStartShift="+getStartShift+"&sendEndShift="+getEndShift,true);
xmlhttp.send();

到此;

xmlhttp.onreadystatechange=function(){
   if(xmlhttp.readyState==4 && xmlhttp.status==200)
   {
      var getStartShift = document.getElementById("startShift").value;
      var getEndShift = document.getElementById("endShift").value;

      xmlhttp.open("GET","seatmap.php?sendStartShift="+getStartShift+"&sendEndShift="+getEndShift,true);
      xmlhttp.send();
   }
}

或者，您可以将变量设置为全局并以这种方式使用它;

   var getEndShift, getEndShift;
   function showAvailable(){
      var xmlhttp;

      getStartShift = document.getElementById("startShift").value;
      getEndShift = document.getElementById("endShift").value;

      if(window.XMLHttpRequest)
      {
          xmlhttp=new XMLHttpRequest();
      }else{
          xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
      }
      xmlhttp.onreadystatechange=function(){
          if(xmlhttp.readyState==4 && xmlhttp.status==200)
          {
             getStartShift = document.getElementById("startShift").value;
             getEndShift = document.getElementById("endShift").value;
          }
      }
      xmlhttp.open("GET","seatmap.php?sendStartShift="+getStartShift+"&sendEndShift="+getEndShift,true);
      xmlhttp.send();
   }

请注意var getEndShift, getEndShift;发生在函数showAvailable()之外，以使变量成为全局变量

通过使用AJAX的提交按钮从jQuery滑块发送输入文本框的值

1 个答案: