CODEWITHSUNDEEP
javascriptphp
Ronnie Oosting
Ronnie Oosting

Reputation: 1252

Javascript data from foreach in php.

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?

Upvotes: 0

Views: 67

Answers (2)

Ryan Tuosto
Ryan Tuosto

Reputation: 1951

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 >

Upvotes: 1

u_mulder
u_mulder

Reputation: 54796

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.

Upvotes: 2

Related Questions