AJAX POST & PHP POST In Same Page

Question

I have 2 dropdowns called drpcategory and drpitem as below;

<div class="form-group">
<label>Category</label>
<select class="form-control bg-dark btn-dark text-white" id="drpcategory" name="drpcategory" required>
<?php
$category = ''.$dir.'/template/post/category.txt';
$category = file($category, FILE_IGNORE_NEW_LINES);

foreach($category as $category)
{
echo "<option value='".$category."'>$category</option>";
}
?>
</select>
</div> 

<div class="form-group">
<label>Item</label>
<select class="form-control bg-dark btn-dark text-white" id="drpitem" name="drpitem">
<?php
$category = $_POST["drpcategory"] ?? 'Electronics';
$item = ''.$dir.'/template/post/'.$category.'/item.txt';
$item = file($item, FILE_IGNORE_NEW_LINES);

foreach($item as $item)
{
echo "<option value='".$item."'>$item</option>";
}
?>
</select>
</div>

As you can see, depending on the selected value of drpcategory, the drpitem should be dynamically populated.

In case you were wondering, both dropdowns will go through the PHP loop and populate if I set $category manually without any post checks.

Now, I'm using AJAX post to post the changes in drpcategory into the same page as below;

<script>
  $(function(){

    $('#drpcategory').on('change',function()
    {

      $.ajax({
        method: 'post',
        data: $(this).serialize(),
        success: function(data)
        {
          alert(data);
        }
      });

    });    

  });
</script>

Here is the Chrome Browser > Inspect > Network tab output for the above AJAX post;

And yes, I'm posting this AJAX into the same page and the url is: http://example.com/?page=post which is the same as this Network tab shows.

I have removed the url field from AJAX function because the browser automatically picks up the current page so it's better, and no, manually writing any url in there didn't change anything about what I'm about to ask below.

Question is, how can I make that drpitem to pickup the AJAX posted drpcategory value and start populating dynamically?

I want to AJAX post to the same page and all of this should happen without a page reload.

well first of all, you fundamentally started it wrong; Dont place php inside dome elements if you are working with ajax; you put all php on top and fetch post request; and return object that you can use to populate forms with js ; this will never work, you'll be returning all html elements — Milan Rilex Ristic, Mar 03 '19 at 12:35
@Milan Rilex Ristic Exactly. I get a return of all html elements. Better if someone can order this code and post a working model because I just can't figure it out. — haZh, Mar 03 '19 at 12:38
Check this out - https://stackoverflow.com/a/38172523/1117368 — mujuonly, Mar 06 '19 at 05:15
Possible duplicate of [How to POST jQuery variables to PHP in same page?](https://stackoverflow.com/questions/38172312/how-to-post-jquery-variables-to-php-in-same-page) — mujuonly, Mar 06 '19 at 05:17
@mujuonly No, that didn't solve my issue. His file has nothing within `` tags, but in my file the above 2 dropdowns are within `` tags. Also he is calling files in AJAX `url` and getting `json` data. It appear as the same question but too hard for me to understand until someone post a working model answer for my exact question. — haZh, Mar 06 '19 at 05:52

score 0 · Answer 1 · answered Mar 06 '19 at 05:13

0

You get return of all html elements? Please make 'if condition' in your php function if Post request occur return php result else return html elements. Whats is the '/?page=post' in your url ? please var_dump($_POST,$_GET); in ajax request function please give me the response. Otherwise can you please send this request to newly created function for test propose?

answered Mar 06 '19 at 05:13

Anandhukrishna VR

279
4
19

It's hard for me to understand this whole process. If you can just copy paste my code in the question into a file and post a working model here, it would be easy for me to understand since I have tried everything. Just change `$dir` variable to a folder you like and test it yourself, but I think you already know what it is. – haZh Mar 06 '19 at 05:59
new_php_request_page.php – Anandhukrishna VR Mar 06 '19 at 06:13
– Anandhukrishna VR Mar 06 '19 at 06:17
request_in_same_page_url.php -> ?> – Anandhukrishna VR Mar 06 '19 at 06:18
Can I do this in the same file without that external `request_in_same_page_url.php` file? You can just copy paste the code in my question and try for a direct answer because right now that's will be the only way I can catch this. – haZh Mar 06 '19 at 06:28

score 0 · Accepted Answer · answered Mar 06 '19 at 08:15

Finally after waiting more than 7 days trying to figure this out, I couldn't AJAX post to the same page probably because there are too much of <html> elements already in the same page. But here goes it using an external post.php file. Only these changes were required for me to get this working other than mentioned in my original question above.

<script>
$(function()
{
$('#drpcategory').change(function()
{
$.ajax({
method: 'post',
url: 'post.php',
data: $(this).serialize(),
success: function(data)
{
$('#drpitem').html(data);
}
});
});
});
</script>

Then I had to save this post.php in the root website directory where index.php is located. Change your directory as necessary and also remember to change the url field in the above AJAX function.

<?php include 'config.php';?> //this is where the $dir variable is derived in my website. i had to include this since post.php is an external file that doesn't know about the variable.

<?php
$category = $_POST["drpcategory"];
$item = ''.$dir.'/template/post/'.$category.'/item.txt';
$item = file($item, FILE_IGNORE_NEW_LINES);

foreach($item as $item)
{
echo "<option value='".$item."'>$item</option>";
}
?>

Thank you for each and everyone of you for walking me through this. I would have marked someone of you as the answer if a direct answer was given but if someone already given this, I'm sorry for not understanding you properly. But I think the end goal is for someone to use this as help.

"I couldn't AJAX post to the same page probably because there are too much of elements already in the same page". That's why my first answer demonstrated the PRG pattern: first work your post and then either redirect or die before any other output. It'll work in your index.php page if you really want it there; you just have to do all your PHP stuff before there's any HTML stuff. Anyway, glad you got it working. — Tim Morton, Mar 06 '19 at 21:50

AJAX POST & PHP POST In Same Page

2 Answers2

Linked