How to get the attributes's values of an object in a JQuery function?

Question

So, I'm using PDO to store data from a database. I have an array ($myitems) with a few items where each item has two attributes: id and name. with PHP I created a list using this array, like you can see in the code below:

in index.php

        <ul class="items">
            <?php foreach($myitems as $item): ?>
            <li class="test">
                <form action="edit.php" method="post">
                    <span class="itemlist"><?php echo $item['name']; ?></span>                    
                </form>
            </li>
            <?php endforeach; ?>

        </ul>

So when the user double clicks in an item of the list, it "transforms" the span into an input text, so the user can update de name of the item. I managed to do this using JQuery where I'm able to get the name of the item because it's being displayed in the span tag. This is how I'm getting the name's value and changing the the span to an input text:

in JS file

 $(".itemlist").dblclick(function (e) {        
            e.stopPropagation();
            var currentEle = $(this);
            var name = $(this).html();
            updateVal(currentEle, name);        
});

function updateVal(currentEle, name) {
    $(document).off('click');
    $(currentEle).html('<input class="liVal"  name="editname" type="text" value="' + name+ '" />');

    $(".thVal").focus();
    $(".thVal").keyup(function (event) {
        if (event.keyCode == 13) {

            $(currentEle).html($(".liVal").val());
        }
    });
}

It works fine in browser but to update the value of the item in the database I need to submit the form, and this is how I'm doing it:

also in JS file

$(".liVal").onkeyup(function(event) {
    if (event.keyCode == 13) {
        this.form.submit();
        return false;
     }
});

After submit the form, I can get the value of the item's name in the edit.php using the input's attribute name, like this:

in the edit.php

if(isset($_POST['editname'])){
    $newname= trim($_POST['editname']);     
}

But to update an item I also need its id. And here is THE PROBLEM, how can I get the id? I really new in PHP and JQuery, I need help with this.

BTW, thanks for asking a clear question. Surprisingly rare on SO. — Jeremy Harris
– Jeremy Harris, Commented Dec 16, 2016 at 18:09

Jeremy Harris · Accepted Answer · 2016-12-16 18:05:42Z

1

You need to add the ID as a hidden input field in your form.

<ul class="items">
    <?php foreach($myitems as $item): ?>
        <li class="test">
            <form action="edit.php" method="post">
                <!-- ADD ID BELOW -->
                <input type="hidden" name="id" value="<?php echo($item['id']); ?>">
                <span class="itemlist"><?php echo $item['name']; ?></span>                    
            </form>
        </li>
    <?php endforeach; ?>
</ul>

Then when you submit the form, it should have both the ID and your dynamic element.

answered Dec 16, 2016 at 18:05

Jeremy Harris

24.7k13 gold badges84 silver badges133 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

user5529144 Over a year ago

I was almost finishing my Answer, but you beat me to it. Not sure about the php syntax, but that's definitely how you do it.

Jeremy Harris Over a year ago

It is not personally how I would do it, but given the current structure, it is one way of doing it. I personally would use data attributes and AJAX to track all of this and do it dynamically.

Collectives™ on Stack Overflow

How to get the attributes's values of an object in a JQuery function?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related