JQuery won't set right value onclick of button-CodePudding

So what I'm trying to achieve is to set the value of a hidden input so that I can send that value to a PHP file where this value will be used to execute a delete query.

The only problem that I'm facing is that it will only select the data-id from the first element, which is not what I want.

Here is the JQuery code, if any other files are required for more info I'll post those aswell.

$('document').ready(function(){
    // Makes menu visibility toggable
    $('#hamburger_btn').on("click", function() {
        $('#sidemenu').toggleClass("show");
    })

    // Closes menu via separate button
    $('#close_btn').on("click", function() {
        $('#sidemenu').removeClass("show");
    })

    // Opens dialogbox
    $('.openDialog').on("click", function() {
        $('#dialog').addClass("showBox");
        $('#overlay').addClass("showOv");

        // Sets the input value in dialog
        $('#post_id').val($('.openDialog').data("id")); // Here lies the problem
    })

    // Closes dialogbox
    $('#closeDialog').on("click", function() {
        $('#dialog').removeClass("showBox");
        $('#overlay').removeClass("showOv");

        // Sets value to empty and remove attribute value
        $('#post_id').val('').removeAttr("value");
    })
});

If this question has already been answered elsewhere please let me know aswell, because I couldnt find it.

EDIT:

The HTML

<?php
// Get all posts from DB
$sql = "SELECT * FROM cm_posts";
$stmt = $conn->prepare($sql);
$stmt->execute();

$results = $stmt->get_result();
?>

<section >
    <div id="top"></div>
    <div >
        <h3 >Overview</h3>
        <div >
            <?php // Display all posts in a card ?>
            <?php while($row = $results->fetch_assoc()):?>
            <div >
                <h4 ><?php echo $row["post_title"];?></h4>
                <h5 ><?php echo $row["post_date"];?></h5>
                <div >
                    <button><a href="?page=Blog-post&page_id=<?php echo $row["post_id"];?>">View</a></button>
                    <button  id="openDialog" data-id="<?php echo $row["post_id"];?>">
                        <i ></i>
                    </button>
                </div>
            </div>
            <?php endwhile ?>
        </div>
        <div >
        <a href="#top" >
                <i ></i>
            </a>
            <a href="#bottom" >
                <i ></i>
            </a>
        </div>
    </div>
    <div id="bottom"></div>
</section>

<div  id="overlay"></div>
<div  id="dialog">
    <div >
        <h3>Are you sure you want to delete this item?</h3>
        <form action="data/post_db_files/delete-post-db.php" method="post" id="del_post_item">
            <input type="hidden" id="post_id" name="post_id">
            <input type="submit" value="Delete" id="del_post" >
        </form>
        <button id="closeDialog" >Cancel</button>
    </div>
</div>

Picture of the browser with devtools

The image shows where the id is supposed to appear, now if i click the delete button on any of these elements, I always get the value of 1, but if I select "hello 2" which has a post_id of 2 I want that id to appear in the hidden input. I hope this clears somethings up.

CodePudding user response：

You are trying to get the data-id of the clicked item, but you are using $('.openDialog') => This would get all elements wich class is openDialog.

Use this instead:

$('#post_id').val($(this).data("id"));

CodePudding user response：

you can also create on onClick function on this button like this & pass value in that function

after this just create function in your Js file or tag

function openDialogButtonClick(id){

//in this id param you will get id then set this id to your hidden field

$("#post_id").val(id);

}