Php AJAX更新和显示/隐藏Div

需要一些关于我的更新Ajax调用的帮助。我想让我的代码在单击我的更新表单时显示，并通过AJAX将表单中的数据传递给我的更新。到目前为止，表单没有在单击时显示，更新也不起作用。除此之外，其他一切似乎都运转正常

index.php

<?php include 'includes/header.php' ?>
<div class="main" id="maincontent">
<div class="main-section">
    <div class="add-section">
        <form action="app/add.php" method="POST" autocomplete="off">
        <?php if(isset($_GET['mess']) && $_GET['mess'] == 'error'){ ?>
            <label for="title">To Do*</label>
            <input type="text" id= "title" name="title" 
            style="border-color: #ff6666"
            placeholder="This is required" aria-label="You need to create a to do!"/> 

            <label for="month">Month</label>
            <input type="text" id="month" name="month" placeholder="Month Not Required" aria-label="Enter a month if needed"/>
            
            <label for="year">Year</label>
            <input type="text" id="year" name="year" placeholder="Year Not Required" aria-label="Enter a year if needed"/>

            <button type="submit" aria-label="Enter"> &plus; </button>

            <?php }else{ ?>
            <label for="title">To Do*</label>
                <input type="text" id= "title" name="title" placeholder="Enter a To Do" aria-label="Enter a To Do"/>
            
            <label for="month">Month</label>    
                <input type="text" id="month" name="month" placeholder="Enter Month [1-12]" aria-label="Enter month if needed for your to do"/>  
            
            <label for="year">Year</label>     
                <input type="text" id="year" name="year" placeholder="Enter Year [yyyy]" aria-label="Enter a year if needed for your to do"/>

            <button type="submit" aria-label="Enter"> &plus; </button>
                
            <?php } ?>
        </form>

    </div>  
    <?php
        $todos = $conn->query("SELECT * FROM todos  ORDER BY id DESC"); 
    ?>
    <div class="show-todo-section">
    <?php if($todos->rowCount() <= 0){?>
        <div class="todo-item">
            <div class="empty">
                <p>Enter a To Do!</p>
                <img src="img/f.jpg" alt="Notebook" width="100%" height="175px" />
                
            </div>
        </div>
    <?php } ?>  

    <?php while($todo = $todos->fetch(PDO::FETCH_ASSOC)) { ?>
        <div class="todo-item">
            <span id="<?php echo $todo['id']; ?>" class="remove-to-do" aria-label="Delete"><i class="fa fa-trash" style="font-size:18px"></i></span>
      

            <span id="<?php echo $todo['id']; ?>" class="update-to-do" aria-label="Edit">
            <i class="fa fa-pencil" style="font-size:18px"></i></span>

            <?php if($todo['checked']) { ?> 
                <input type="checkbox" data-todo-id="<?php echo $todo['id']; ?>" class="check-box" checked />

                <h2 class="checked"><?php echo $todo['title'] ?></h2>

            <?php }else{ ?>
                <input type="checkbox" data-todo-id="<?php echo $todo['id']; ?>" class="check-box">
                <h2><?php echo $todo['title'] ?></h2>

            <?php } ?>
            <br>
            <small>Created: <?php echo $todo['date_time'] ?> &nbsp; </small> 
            <div style="display:none;" class="update"><?php include 'updateForm.php'?></div> 
            <!---->
        </div>
           
        
    <?php } ?>   

做*
月
年
&加；
做*
月
年
&加；
输入一个待办事项

我看到两个明显的问题：1）document.getElementsByClassName（“.update”）

——不应该在那里添加点，应该是没有选择器的类名，请参阅；2） 您将表单引用放入变量

x

（这将是一个节点列表，而不仅仅是一个表单元素），然后使用变量

表单

，它似乎没有在任何地方定义。@alx我修复了.update以更新。至于变量x，这是因为我希望在单击edit时，表单会在每个“to do”下弹出。所以每个“待办事项”上都应该有一个隐藏的表单@ikiK你能给我举个例子吗？还是一些消息来源？@ikiK好的，我会解决的。更多信息，请参阅此处

<script>
 $(document).ready(function(){
    $('.remove-to-do').click(function(){
        const id = $(this).attr('id');

        $.post("app/remove.php",
        {
            id: id
        },
        (data) =>{
            if(data){
                $(this).parent().hide(600);
            }
        }         
        );  
    });       
    $(".check-box").click(function(e){
    const id = $(this).attr('data-todo-id');  
    
    $.post("app/check.php",
        {
            id: id
        },
        (data) =>{
            if(data != 'error')
            {
                const h2 = $(this).next();
                if(data === '1'){
                    h2.removeClass('checked');
                }else{
                    h2.addClass('checked');
                }
            }
        }
        );
    }); /* */
    $(".update-to-do").click(function(e){
        const id = $(this).attr('id');
    
    $.post("app/update.php",
        {
            id: id
            
        },
        (data) =>{
            //alert(id);
            
            if(data != 'error')
            {
                var x = document.getElementsByClassName("update");

                if(form.hide()){
                    form.show();
                }else{
                    form.hide();
                }
            }
        }
        );
    });
             
});

  <div class="add-section"> 
      <form action="app/update.php" method="POST" autocomplete="off">
            <?php if(isset($_GET['mess']) && $_GET['mess'] == 'error'){ ?>
                <label for="id" style="display:none;"></label>
                <input type="hidden" id= "id" name="id" value="<?php echo  $_GET['id']; ?>" aria-label=""/>

                <label for="title">To Do*</label>
                <input type="text" id= "title" name="title" 
                style="border-color: #ff6666"
                placeholder="This is required" aria-label="You need to create a to do!"/> 

                <label for="month">Month</label>
                <input type="text" id="month" name="month" placeholder="Month Not Required" aria-label="Enter a month if needed"/>
                
                <label for="year">Year</label>
                <input type="text" id="year" name="year" placeholder="Year Not Required" aria-label="Enter a year if needed"/>

                <button type="submit" aria-label="Enter"> &plus; </button>

                <?php }else{ ?>
                <label for="id" style="display:none;"></label>
                    <!--<input type="hidden" id= "id" name="id" value="<?php //echo  $_GET['id']; ?>" aria-label="id"/> -->
                
                <label for="title">To Do*</label>
                    <input type="text" id= "title" name="title" placeholder="Enter a To Do" aria-label="Enter a To Do"/>
                
                <label for="month">Month</label>    
                    <input type="text" id="month" name="month" placeholder="Enter Month [1-12]" aria-label="Enter month if needed for your to do"/>  
                
                <label for="year">Year</label>     
                    <input type="text" id="year" name="year" placeholder="Enter Year [yyyy]" aria-label="Enter a year if needed for your to do"/>
                    <div class="pad"></div>
                <button type="submit" aria-label="Enter"> &plus; </button>
                    
            <?php } ?>
        </form>
   </div> 

    <?php
if(isset($_POST['id'])){
    require '../includes/conn.php';
    include 'func.php';

    $id = $_POST['id'];
    echo $id;
    $title = $_POST['titleUp'];
    $month = $_POST['monthUp'];
    $year = $_POST['yearUp'];
    $dateMonth;
    $futureDate;
    
    if(empty($id))
    {
        header("Location: ../updateForm.php?id=" . $id . "mess=error");
    }
    else
    {
        if( (!empty($title)) &&  (empty($month)) && (empty($year)) )
        { //need to filter 0 so its registered as not empty
            $title = validTitle($title);
    
            $stmt = $conn->prepare("UPDATE todos(title) VALUE(?) WHERE id=?");
            $res = $stmt->execute([$title, $id]); 
    
            if($res)
            {
                header("Location: ../index.php");
            }
            else
            {           
                header("Location: ../updateForm.php?id=" . $id .  "mess=error");
            }
            $conn= null;
            exit();
    
        }
        else if( (!empty($title)) && (!empty($month)) && (empty($year)) )
        {
            $title = validTitle($title);
            $month = validMonth($month);
            $dateMonth = dateMonth($month);
            $year = date("Y");
    
            $futureDate = futureDate($dateMonth, $year);
            
            $stmt = $conn->prepare("UPDATE todos (title, future_datetime) VALUES (?,?) WHERE id=?");
            $res = $stmt->execute([$title ,$futureDate, $id]); 
    
            if($res)
            {
                header("Location: ../index.php");
            }
            else
            {           
            header("updateForm.php?id=" . $id .  "mess=error");
            }
            $conn= null;
            exit();
        }  
        else if( (!empty($title)) && (!empty($month)) && (!(empty($year))))
        {
            $title = validTitle($title);
            $month = validMonth($month);
            $dateMonth = dateMonth($month);
            $year = validYear($year);
    
            $futureDate = futureDate($dateMonth, $year);
            
            $stmt = $conn->prepare("UPDATE todos (title, future_datetime) VALUES (?,?) WHERE id=?");
            $res = $stmt->execute([$title ,$futureDate, $id]); 
    
            if($res)
            {
                header("Location: ../index.php");
            }
            else
            {           
            header("Location: ../updateForm.php?id=" . $id .  "mess=error");
            }
            $conn= null;
            exit();
        }     
        else 
        {
            header("Location: ../updateForm.php?id=" . $id . "mess=error");
        }       
    }
}
else
{
    header("Location: ../updateForm.php?id=" . $id .  "mess=error");
}


?>