javascript - 一页错误中有多个java脚本

Question

我有这个最初可以工作的代码:

<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>

获取数据.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 } } ?>

这给了我一个下拉列表，其中包含用于搜索表格的日期。我想创建一个新的下拉列表，但我需要显示名称而不是日期来进行搜索，我更改了其中的一些关键字，因此我将这个新代码添加到同一页面:

<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 文件:

<?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。如何解决这个问题。 P.S.:我搜索了这些链接，但没有一个对我有帮助:

When I add two scripts to a html page..one is doesnt work

Implications of multiple <script> tags in HTML

现在我将下拉列表中选择的名称显示在 div 中，但没有其他内容。

Answer 1

正如评论中所建议的，您在代码中犯了错误；

1.绑定(bind)change function选择器 ID 错误

 $("#Name2").change(function(){ 

HTML 是

<select name="Name" required class="form-control" id="Name">

应该是$("#Name").change(function(){它将修复问题第 5 行未定义的 selname

2.名称 Ajax方法成功函数

success: function(data) {
  $("#Schedule2").html(dataname); 
}

应该是$("#Schedule2").html(data);

在 PHP 中；功劳归@j08691

更改$selDate

$selDate = $_POST['selname'];

至 $selname

$selname = $_POST['selname'];
$sql="SELECT * FROM clinic.appoint WHERE name='$selname'";

正如您所说，您的第一个 Ajax 调用工作正常，并且在修复上述错误后，您在第二个 Ajax 调用方法中遇到问题

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 通过电子邮件联系我并解释了他想要做什么)
现在，您正在通过 2 个不同的 <select> 获取结果使用 Ajax 的元素并尝试显示基于 <select> 的结果元素和两个 Ajax 调用 success: function您的目标是 2 个不同的 id's显示每个 <select> 的数据Ajax 调用例如

//For Date Result
$("#Schedule").html(data);
//For Name Result
$("#Schedule2").html(data);

我建议使用相同的 id两个 Ajax 调用中的选择器 success: function显示数据

$("#Schedule").html(data);

通过这样做，当您在 select 元素之间切换时，要显示的数据，它将替换第一个获取的数据。

最后，我完全同意 @Jared Smith 关于混合 PHP 和 JavaScript 的说法，这确实不是一个好的做法。