How to update PHP string using POST Ajax without page refresh?

Question

I'm trying to change number in string $user_foreach_limit from 1 to 2 and 2 to 3... (on every button click +1 more). This string is foreach.

Current code: Ajax works, but I have to refresh my page to see changes. How I can do it without page refresh? Is there any other option to make it work without adding entire foreach to form-show-more.php ?

HTML

<form method='POST' id='form_show_more'>
  <input type='submit' value='Show more'/>
</form>
<?php
$user_foreach_limit = 1;
foreach ($modules_for_from as $m_foreach_as) if ($tmp++ < $user_foreach_limit) {
  // foreach content
}
?>

AJAX

$('#form_show_more').submit(function(event){
  event.preventDefault();
  $.ajax({
    url: 'form-show-more.php',
    type: 'POST',
    data: $('#form_show_more').serialize(),
    dataType: 'json'
  });
});

form-show-more.php

$user_foreach_limit = 2;

Answer 1

It's fairly simple, you can do html directly where your original loop is, you need a wrapper. jQuery allows you to just drop in html directly if need-be.

Create this as a view function to re-use it where ever you need to. The function won't work as is, you would need to inject $tmp or whatever else you need to, but the concept requires this as a function.

/functions/myfunction.php

<?php
function myfunction($user_foreach_limit = 1)
{
    # I would check if the value is a number first
    if(!is_numeric($user_foreach_limit))
        $user_foreach_limit = 1;
    # Do your loop stuffs
    foreach ($modules_for_from as $m_foreach_as) {
        if ($tmp++ < $user_foreach_limit) {
        // foreach content
        }
    }
}

Add in a couple hidden fields just to make it give some request identification markers.

/original-page.php

<form method='POST' id='form_show_more' action="form_show_more.php">
    <input type="hidden" name="action" value="get_more_mods" />
    <input type="hidden" name="increment" value="2" />
    <input type='submit' value='Show more'/>
</form>
<!-- create a wrapper so you can use it to drop the updated html into -->
<div id="table-list">
<?php
# Add the view function
include_once(__DIR__.'/functions/myfunction.php');
# Run the function right on load for incremental 1, ajax will replace this content
myfunction(1);
?>
</div>

<script>
$('#form_show_more').on('submit', function(event){
    event.preventDefault();
    $.ajax({
        // You can get the destination from the form
        url: $('#form_show_more').attr("action"),
        type: 'POST',
        data: $('#form_show_more').serialize(),
        success: function(response) {
            $('#table-list').html(response);
        }
    });
});
</script>

Don't do anything if the wrong request is being sent.

/form_show_more.php

<?php
# Stop if action not sent
if(empty($_POST['action']))
    die("Invalid request.");
# Stop if the action is not correct
elseif($_POST['action'] != 'form_show_more')
    die("Invalid action.");
# Add the view function
include_once(__DIR__.'/functions/myfunction.php');
myfunction($_POST['increment']);
exit;
?>