Get data-id from url using javascript ajax

Question

i've got stuck to get the data-id value from url. After user click the edit link from the url, i want to show the data in the modal dialog. I use the ajax script, but it doesnt work clearly. The modal dialog show an error warning.

This is my class_view.php

<script>
    $(document).ready(function(){   
      $(".edit").on('click', function(e){       
            var id = $(e.relatedTarget).data('id');
                    $.ajax({
                    type: 'post',
                    url: "class/edit_class_form.php",
                    data: 'id=' + id,
                    success: function(data){
                        $('.show_class').html(data);
                    }
                    });

            });
         });
</script>
        <table width="40%">
                <thead>
                <tr>
                    <th>No.</th>
                    <th>Kode</th>
                    <th>Name</th>
                    <th>Capacity</th>
                    <th>Action</th>
                </tr>
                </thead>
                <tbody>
                <?php
                    $query  = $db->prepare("SELECT * FROM class ORDER BY name ASC");
                    $query->execute();
                    for($no=1; $data = $query->fetch();){
                ?>
                <tr>
                    <td><?php echo $no++;?></td>
                    <td><?php echo $data['code'];?></td>
                    <td><?php echo $data['type']." ".$data['name'];?></td>
                    <td><?php echo number_format($data['capacity'], 2, '.', ',');?> Ton</td>
                    <td><a href="#edit_form" class="edit" data-id="<?php echo $data['id'];?>">edit</a>
                    </td>
                </tr>   
                <?php };?>
                </tbody>
            </table>
            </div>
            <?php
                include 'setting/class/edit_class_form.php';
            ?>

I use pure css modal. This is the code of my edit_class_form.php

    <div id="edit_form" class="modal">
        <div class="md-medium">
            <a href="#close" title="Close" class="close" id="close">X</a>
            <h2>Edit Class</h2>     
            <form method="post" action="setting/class/edit_class_update.php" id="form" autocomplete="off">
            <div class="md-content">
            <table class="show_class">
                <?php
                  require '../../inc/koneksi.php';
                  if($_POST['id']){
                      $id=$_POST['id'];
                      $stmt = $db->prepare("SELECT * FROM class WHERE id=:id");
                      $stmt->execute(array(':id' => $id));
                ?>
               <?php while($row=$stmt->fetch(PDO::FETCH_ASSOC)){?>
                <tr>
                    <td>Class Code</td>
                    <td><input type="text" name="code" size="5" maxlength="3" value="<?php echo $row['code'];?>" required></td>
                </tr>
                <tr>
                    <td>Class Type</td>
                    <td><input type="text" name="type" size="10" maxlength="5" value="<?php echo $row['type'];?>" required></td>
                </tr>
                <tr>
                    <td>Class Name</td>
                    <td><input type="text" name="name" size="40" maxlength="35" value="<?php echo $row['name'];?>" required></td>
                </tr>
                <tr>
                    <td>Capacity</td>
                    <td><input type="text" name="capacity" size="15" value="<?php echo $row['capacity];?>"maxlength="11" required> Persons</td>
                </tr>
            </table>
            <?php }}?>
            </div>
            <div class="md-footer">
                <a href="#close" id="cancel">Cancel</a>
                <input type="submit" value="insert"">
            </div>
            </form>
            </div>
        </div>

Can you help me?

Answer 1

You can get the data-id of an element in this way then you can add the value to the url for your ajax call and your data should be an object

  data: {id: id}

You can also var_dump($_POST) to check what are you receiving in PHP

 $(document).ready(function() { $(".edit").on('click', function(e) { $this = $(this); const id = $this.data("id") $.ajax({ type: 'post', url: "class/edit_class_form.php", data: { id: id }, success: function(data) { $('.show_class').html(data); } }); }); }); 

 .edit { cursor: pointer; background: green; width: 90px; padding: 20px; text-align: center; color: #fff; } 

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <div class="edit" data-id="5445454">Click me </div>