一页中有多个Java脚本错误 [英] multiple java script in one page error
问题描述
我有这个本来可以工作的代码:
I have this code that is working originally:
<th scope="row">
<select name="Date" required class="form-control" id="Date">
<option value="">Please Select Date</option>
<?php $sql2="SELECT * FROM clinic.appoint GROUP BY date ORDER BY date ASC";
$result2 = mysqli_query($con, $sql2) or die($sql2."<br/><br/>".mysql_error());
while($rows2=mysqli_fetch_array($result2)){?>
<option value="<?php echo $rows2['date'] ?>"><?php echo $rows2['date'] ?></option>
<?php } ?>
</select>
</th>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#Date").change(function(){
var seldate =$(this).val();
display_data(seldate);
});
// This is the function...
function display_data(seldate) {
$("#scheduleDate").html(seldate);
var dataString = 'seldate='+ seldate;
$.ajax({
type: "POST",
url: "getdata.php",
data: dataString,
cache: false,
success: function(data) {
$("#Schedule").html(data);
}
});
}
// Now here is the real code for retaining your Date...
<?php
if (!empty($_GET['date'])) {
?>
display_data('<?php echo $_GET["date"]; ?>')
<?php
}
?>
document.getElementById('Date').value = '<?php echo @$_GET["date"]; ?>';
});
$(document).ready(function(){
$("#Name2").change(function(){
var selname =$(this).val();
display_name(selname);
});
// This is the function...
function display_name(selname) {
$("#scheduleName").html(selname);
var dataString = 'selname='+ selname;
$.ajax({
type: "POST",
url: "getdatabyname.php",
data: dataString,
cache: false,
success: function(data) {
$("#Schedule2").html(dataname);
}
});
}
// Now here is the real code for retaining your Date...
<?php
if (!empty($_GET['name'])) {
?>
display_name('<?php echo $_GET["name"]; ?>')
<?php
}
?>
document.getElementById('Name2').value = '<?php echo @$_GET["name"]; ?>';
});
</script>
getdata.php:
getdata.php:
<?php
require_once ('../include/global.php');
if($_POST['seldate']) {
$selDate = $_POST['seldate'];
$sql="SELECT * FROM clinic.appoint WHERE date='$selDate'";
$result = mysqli_query($con, $sql) or die($sql."<br/><br/>".mysql_error());
while($rows=mysqli_fetch_array($result)){
?>
<tr>
<td scope="row"><?php echo $rows['time'] ?></td>
<td scope="row"><?php echo $rows['name'] ?></td>
<td scope="row"><?php echo $rows['date'] ?></td>
<td scope="row"><form action='/clinic form/appoint/delete.php'=<?php echo $rows['id']; ?>' method="post">
<input type="hidden" name="id" value="<?php echo $rows['id']; ?>">
<input type="submit" name="submit1" value="Done">
</form>
</td>
</tr>
<?php } } ?>
这给了我一个带日期的下拉列表，用于搜索表格.我想创建一个新的下拉列表，但是要代替日期，我需要显示名称以进行搜索，因此我更改了其中的一些关键字，因此我将此新代码添加到了同一页面:
This gives me a drop down list with dates in to search a table. I want to make a new drop down list but instead of date, I need to display names to make the search, I changed some key words in it, so I added this new code to the same page:
<th>
<select name="Name" required class="form-control" id="Name">
<option value="">Please Select Name</option>
<?php $sql3="SELECT * FROM clinic.appoint GROUP BY name";
$result3 = mysqli_query($con, $sql3) or die($sql3."<br/><br/>".mysql_error());
while($rows3=mysqli_fetch_array($result3)){?>
<option value="<?php echo $rows3['name'] ?>"><?php echo $rows3['name'] ?></option>
<?php } ?>
</select>
</th>
并制作一个新的php文件:
and make a new php file:
<?php
require_once ('../include/global.php');
if($_POST['selname']) {
$selDate = $_POST['selname'];
$sql="SELECT * FROM clinic.appoint WHERE name='$selname'";
$result = mysqli_query($con, $sql) or die($sql."<br/><br/>".mysql_error());
while($rows=mysqli_fetch_array($result)){
?>
<tr>
<td scope="row"><?php echo $rows['time'] ?></td>
<td scope="row"><?php echo $rows['name'] ?></td>
<td scope="row"><?php echo $rows['date'] ?></td>
<td scope="row"><form action='/clinic form/appoint/delete.php'=<?php echo $rows['id']; ?>' method="post">
<input type="hidden" name="id" value="<?php echo $rows['id']; ?>">
<input type="submit" name="submit1" value="Done">
</form>
</td>
</tr>
<?php } } ?>
现在，只有日期列表框有效，另一个显示: 第5行的未定义selname. 如何解决.附注:我搜索了这些链接，但没有一个对我有帮助:
Now, only the dates list box is working and the other says: Undefined selname at line 5. How to fix that. P.S.: I searched those links but none of them helped me:
现在，我将在div中显示的下拉列表中选择的名称，但是没有其他显示.
Now I am having the name selected in dropdown list displayed in a div but nothing else with it.
推荐答案
如注释中所建议，您在代码中犯了错误；
As suggested in Comments, you made mistakes in your code;
1.使用错误的选择器ID绑定change function
1.Binding change function with wrong selector id
$("#Name2").change(function(){
HTML是
<select name="Name" required class="form-control" id="Name">
应该为$("#Name").change(function(){，它将解决问题第5行的未定义selname
Should be $("#Name").change(function(){ it will fix the problem Undefined selname at line 5
2. 名称 Ajax方法成功功能
2.Name Ajax Method success function
success: function(data) {
$("#Schedule2").html(dataname);
}
应该是$("#Schedule2").html(data);
在PHP中；归功于@ j08691
And in PHP; credit goes to @j08691
更改$selDate
$selDate = $_POST['selname'];
到$selname
$selname = $_POST['selname'];
$sql="SELECT * FROM clinic.appoint WHERE name='$selname'";
正如您所说的那样，在解决了上述错误之后，您的第一个Ajax调用工作正常，并且在第二个Ajax调用方法中遇到了问题
As you said in question, your first Ajax Call is working fine and you are facing problem in 2nd Ajax call method, after fixing above mistakes
HTML
<th>
<select name="Name" required class="form-control" id="Name">
<option value="">Please Select Name</option>
<?php $sql3="SELECT * FROM clinic.appoint GROUP BY name";
$result3 = mysqli_query($con, $sql3) or die($sql3."<br/><br/>".mysql_error());
while($rows3=mysqli_fetch_array($result3)){?>
<option value="<?php echo $rows3['name'] ?>"><?php echo $rows3['name'] ?></option>
<?php } ?>
</select>
</th>
AJAX
$(document).ready(function(){
$("#Name").change(function(){
var selname =$(this).val();
display_name(selname);
});
// This is the function...
function display_name(selname) {
$("#scheduleName").html(selname);
var dataString = 'selname='+ selname;
$.ajax({
type: "POST",
url: "getdatabyname.php",
data: dataString,
cache: false,
success: function(data) {
$("#Schedule").html(data);
}
});
}
});
PHP
<?php
require_once ('../include/global.php');
if($_POST['selname']) {
$selname = $_POST['selname'];
$sql="SELECT * FROM clinic.appoint WHERE name='$selname'";
$result = mysqli_query($con, $sql) or die($sql."<br/><br/>".mysql_error());
while($rows=mysqli_fetch_array($result)){
?>
<tr>
<td scope="row"><?php echo $rows['time'] ?></td>
<td scope="row"><?php echo $rows['name'] ?></td>
<td scope="row"><?php echo $rows['date'] ?></td>
<td scope="row"><form action='/clinic form/appoint/delete.php'=<?php echo $rows['id']; ?>' method="post">
<input type="hidden" name="id" value="<?php echo $rows['id']; ?>">
<input type="submit" name="submit1" value="Done">
</form>
</td>
</tr>
<?php } } ?>
(OP通过电子邮件与我联系，并解释了他的工作意图)
现在，您正在使用Ajax提取2个不同的<select>元素的结果，并尝试显示基于<select>元素的结果，并且在两个Ajax调用success: function中，您都将2个不同的id's定位为显示每个<select> Ajax调用，例如
(OP reached me via email and explained what he is trying to do)
Now, you are fetching result by 2 different <select> element using Ajax and trying to show the result based on <select> element and in both Ajax calls success: function you are targeting 2 different id's to show the data for each <select> Ajax call e.g
//For Date Result
$("#Schedule").html(data);
//For Name Result
$("#Schedule2").html(data);
我建议在两个Ajax调用success: function中使用相同的id选择器以显示数据
I would suggest to use the same id selector in both Ajax calls success: function to show the data
$("#Schedule").html(data);
这样做，当您在选择元素之间切换以显示数据时，它将替换第一个获取的数据.
By doing so, when you switch between select element, to show the data, it will replace the first fetched data.
最后，我完全同意@Jared Smith所说的关于混合PHP和JavaScript的说法，这确实不是一个好习惯.
Last, I totally agree with @Jared Smith what he said about mixing PHP and JavaScript, it's really not good practice.
这篇关于一页中有多个Java脚本错误的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
