Javascript data from foreach in php.

Question

Related to my previous question: How to use javascript load function twice? (load in load)

I've got everything working (load in load). But now I want to use a foreach which sends data to the second load.

When I use this foreach the data (POST ID) remains the same.

Example code:

<script >
    $(document).ready(function () {
        // Forum categories
        $("#main").on("click", "#message", function () {
            $("#getmessage").load("forum/getmessage.php", {'id': $("#id").val()});
        });
    });
</script >

<?php foreach($stickies as $sticky): ?>
                <form id="form_id" >
                    <a href="#" class="list-group-item small" id="message"
                       style="background-color:black; color:white;" >
                        <span class="glyphicon glyphicon-pushpin" aria-hidden="true" ></span >
                        | <?php echo $sticky['header']; ?>
                    </a >

                    <input type="hidden" id="id" name="id" value="<?php echo $sticky['id']; ?>" >

                </form >
            <?php endforeach; ?>

As you can see I'd like to push the value ID as POST data, so the loaded file can perform a query on this POST ID.

How can I send the correct ID for every foreach?

Start with understanding that id of an element must be unique — u_mulder
– u_mulder, Commented Jun 1, 2017 at 21:01

u_mulder · Accepted Answer · 2017-06-01 21:16:27Z

There are a lot of ways to achieve what you need. So it's just an example.

First of all - value of id attribute must be unique. No exceptions. That's why id="message" for every a and id="id" for every input are invalid. For similar elements - use classes.

Fixed code will be:

<?php foreach($stickies as $sticky): ?>
    <form>
        <a href="#" class="list-group-item small js-message"
           style="background-color:black; color:white;" >
            <span class="glyphicon glyphicon-pushpin" aria-hidden="true" ></span >
            | <?php echo $sticky['header']; ?>
        </a >
        <input type="hidden" name="id" value="<?php echo $sticky['id']; ?>" >
    </form >
<?php endforeach; ?>

As you can see, I removed id attributes with same values. For inputs and forms you don't even need them, for as I added class js-message.

Next is handler:

$(document).ready(function () {
    // Forum categories
    $("#main").on("click", ".js-message", function () {
        // ways of getting value id can be different.
        $("#getmessage").load(
            "forum/getmessage.php", 
             {'id': $(this).parent().find("input").val()
        });

        // optionally you can add
        return false;
        // to prevent default click action which in case
        // of link is scrolling to the top of a page
    });
});

Here, as one of the ways to get value I used

$(this).parent().find("input").val()

which is:

$(this).parent()    // find a parent of a clicked a, it will be `form`
    .find("input")  // among `form` children find `input`
    .val()          // take value from found input

Surely, if your markup will change and more inputs will appear on the form, this may stop working. But it's just an example, you can modify this as you want.

This worked! Thank you very much u_mulder. I marked it as the answer

Ryan Tuosto · Accepted Answer · 2017-06-01 21:17:04Z

1

You are creating many elements with an id="id" which is incorrect. The id attribute must be unique per page and therefore your jQuery is only returning the value of the first one found when you use $("#id").val().

Instead add a data attribute to the button which can be retrieved on the click event like this, note I've also removed the id="message" and added a message class for the reason noted above and removed the form element as it is not needed:

<?php foreach($stickies as $sticky): ?>
    <a href="#" class="list-group-item small message"
       style="background-color:black; color:white;" data-id="<?php echo $sticky['id'] ?>">
        <span class="glyphicon glyphicon-pushpin" aria-hidden="true"></span> | <?php echo $sticky['header']; ?>
    </a>
<?php endforeach; ?>


<script >
    $(document).ready(function () {
        // Forum categories
        $("#main").on("click", "#message", function () {
            $("#getmessage").load("forum/getmessage.php", {'id': $(this).attr('data-id')});
        });
    });
</script >

edited Jun 1, 2017 at 21:17

answered Jun 1, 2017 at 21:08

Ryan Tuosto

1,95115 silver badges23 bronze badges

3 Comments

u_mulder Over a year ago

The id attribute must be unique but you still use #message.

Adrian Over a year ago

And you'll have multiple forms with id=form_id

Ronnie Oosting Over a year ago

Hi Ryan, thanks for your help. I used the code from u_mulder, it worked.

Collectives™ on Stack Overflow

Javascript data from foreach in php.

2 Answers 2

1 Comment

3 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related