需要在ajax上传递两个元素的值 - Need to pass two element value on ajax

Need to pass two element value on ajax

本文关键字：两个元素 ajax | 更新日期: 2023-09-27

我创建了一个为用户提供预约的程序。日期和时间这是两个不同的元素。我将时间动态保存到数据库中，用户可以选择日期和时间。现在我创建一个Ajax请求来匹配日期&时间给不给任何人。

function Filter(str)
{
  var xmlhttp;    
  if (str=="")
  {
    document.getElementById("txtHint").innerHTML="";
    return;
  }
  if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  }
  else
  {// code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function()
  {
    if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
      document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
  xmlhttp.open("GET","filter.php?id="+str,true);
  xmlhttp.send();
}

<input type="text" class="form-control hide_date" value="" id="appoint" name="appoint" placeholder="Date" readonly>
<select type="select" name="appoint_time" class="form-control appoint_time" id="time-app" onchange="Filter(this.value)">
  <option value="">Time</option>                                            
  
<?php 
$sql5 = mysqli_query($link, "SELECT `id` FROM `time_slots` where `status` = '1'");
$query =	mysqli_fetch_assoc($sql5);
$solt_id = $query['id'];
$sql6 = mysqli_query($link, "SELECT `time` FROM `time_picker` where `time_slot` = '$solt_id'");
while($row = mysqli_fetch_assoc($sql6))
{
?><option value="<?php echo $row['time']; ?>"><?php echo $row['time']; ?></option>
  <?php
}
?>
</select>

在这段代码中，ajax运行良好，但这只会将约会时间值发送到筛选页面。我还需要将约会日期值传递到筛选页面。每当我尝试时，它都显示为空。请告诉我如何在一个请求中同时传递两个元素值。

谢谢。

在此处输入图像描述

当两个元素值都收到时，此代码将工作

function Filter(str)
{
var xmlhttp;
var date=document.getElementById("appoint").value;
if (date=="")
  {
	document.getElementById("txtHint").innerHTML="";
	return;
  }
if (str=="")
  {
	document.getElementById("txtHint").innerHTML="";
	return;
  }
 
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  
	xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
	xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
	xmlhttp.onreadystatechange=function()
  {
	  if (xmlhttp.readyState==4 && xmlhttp.status==200)
		{
			document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
		}
  }
xmlhttp.open("GET","filter.php?id="+str+"&date="+date,true);
xmlhttp.send();
}

您可以通过这种方式获取日期值

var date=document.getElementById("appoint").value;
xmlhttp.open("GET","filter.php?id="+str+"&date="+date,true);

试试这个

     <select type="select" name="appoint_time" class="form-control appoint_time" id="time-app" onchange="Filter(this.value,appoint.value)">

在脚本函数中

         function Filter(str,datz)                           
          xmlhttp.open("GET","filter.php?id="+str+"&date="+datz,true);
          xmlhttp.send();