Changing the value of hidden input field to PHP variable with AJAX success function

Question

I have the following hidden input field with a dynamic value.

<input id='max' type='hidden' value='<?php echo $num_rows; ?>'>

I'm wanting to update that value based on $num_rows that are returned from a ajax_load_profile_friends.php page.

Here is what I have so far:

    $("#viewAllFriends").click(function(){
        counter = counter+16;

            $.ajax({

                url:'includes/handlers/ajax_load_profile_friends.php',
                type:'POST',
                data:{'username':username, 'num_friends':num_friends, 'counter':counter},

                    success: function(data) {
                        $('#data_friends').html(data);
                        $('#max').val("??");
                            }

                    });
            });

With each successive click of View More Friends button, I get a new value for $num_rows. Being new to Ajax I'm not sure how to return it to the success function and then update the value in the hidden input.

$num_rows returns like this $num_rows = $result->num_rows; in ajax_load_profile_friends.php.

This is part of a larger problem I was having earlier but have narrowed it down to this and tried to simplify my question. Any help, examples, links would be super!

so what is your problem ?

Kelvin
– Kelvin

2019-02-26 02:41:29 +00:00
Commented Feb 26, 2019 at 2:41 — Kelvin
– Kelvin, Commented Feb 26, 2019 at 2:41

Barmar · Accepted Answer · 2019-02-26 03:30:58Z

1

Change the PHP so it returns JSON. So instead of

echo $html;

it should do:

echo json_encode(array('num_rows' => $num_rows, 'html' => $html));

Then in the JavaScript you can extract both return values:

        $.ajax({

            url:'includes/handlers/ajax_load_profile_friends.php',
            type:'POST',
            dataType: 'json',
            data:{'username':username, 'num_friends':num_friends, 'counter':counter},

            success: function(data) {
                $('#data_friends').html(data.html);
                $('#max').val(data.num_rows);
            }

        });

edited Feb 26, 2019 at 3:30

answered Feb 26, 2019 at 2:57

Barmar

789k57 gold badges555 silver badges669 bronze badges

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

19 Comments

Raylene Over a year ago

hmmm...The button goes dead with this script and I get some console errors.

Barmar Over a year ago

Is #viewAllFriends inside #data_friends?

Barmar Over a year ago

If you're overwriting any elements that have event bindings, see stackoverflow.com/questions/203198/…

Raylene Over a year ago

no #viewAllFriends is just below the #data_friends div .

Barmar Over a year ago

Then I can't think of any reason why the button would go dead. Unless there's a syntax error that's causing this function not to run at all.

|

Collectives™ on Stack Overflow

Changing the value of hidden input field to PHP variable with AJAX success function

1 Answer 1

19 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

19 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related