CODEWITHSUNDEEP
javascriptphphtmlajax
haZh
haZh

Reputation: 127

Submit Without Page Reload

I have 2 dropdowns as below;

<div class="form-group">
<label>Category</label>
<select class="form-control bg-dark btn-dark text-white" id="drpcategory" name="drpcategory" onchange="submit()" 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'];
$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>

The drpitem dropdown is populated according to the selection made by the drpcategory dropdown. Currently I can catch the $category variable in drpitem by $_POST['drpcategory'] and it works. But the problem is that I use submit() function for the onchange event in drpcategory, so that the whole page simply reloads and then drpitem gets populated as expected. This makes the drpcategory to reset back to it's default selection since it doesn't remember what was it's value before the page was reloaded.

How can I catch the $_POST['drpcategory'] in drpitem without reloading the page? I'm trying to stick with PHP and use minimum amount of JavaScript if required.

This question was later updated and answered here: AJAX POST & PHP POST In Same Page

Upvotes: 2

Views: 126

Answers (3)

Professor Abronsius
Professor Abronsius

Reputation: 33813

Once the vital piece of information is know it is quite simple and no doubt you could have found other examples of chained select using ajax but an untested example could be of use/interest.

The change event fires the ajax request to the same php page in this case - the php at the top of the script processes this POST request and uses the POST data to build the path to the next menu source file.

<?php
    /* top of same page to the javascript/html */
    if( $_SERVER['REQUEST_METHOD']=='POST' && !empty( $_POST['drpcategory'] ) ){
        ob_clean();

        $category=$_POST['drpcategory'];
        $path=$dir.'/template/post/'.$category.'/item.txt';
        $item = file($path, FILE_IGNORE_NEW_LINES);
        foreach( $item as $item ) printf('<option value="%s">%s',$item,$item);

        exit();
    }

?>
<!doctype html>
<html lang='en'>
    <head>
        <meta charset='utf-8' />
        <title>chained select</title>
        <script>
            const ajax=function( params ){
                let xhr=new XMLHttpRequest();
                with( xhr ){
                    onreadystatechange=function(e){
                        if( this.status==200 && this.readyState==4 ){
                            document.querySelector('select[name="drpitem"]').innerHTML=this.response
                        }                       
                    }
                    open( 'POST', location.href, true );
                    setRequestHeader('Content-Type','application/x-www-form-urlencoded');
                    send( params );
                }
            }

            document.addEventListener('DOMContentLoaded', event=>{
                document.querySelector('select[name="drpcategory"]').addEventListener('change',e=>{
                    e.preventDefault();
                    ajax( 'drpcategory='+e.target.value );
                },false);
            },false );

        </script>
    </head>
    <body>
        <div class="form-group">
            <label>Category</label>
            <select class="form-control bg-dark btn-dark text-white" name="drpcategory" required>
            <?php

                $category = $dir.'/template/post/category.txt';
                $category = file($category, FILE_IGNORE_NEW_LINES);

                foreach($category as $category) {
                    printf('<option value="%s">%s',$category,$category);
                }
            ?>
            </select>
        </div>

        <div class="form-group">
            <label>Item</label>
            <select class="form-control bg-dark btn-dark text-white" name="drpitem"></select>
        </div>
    </body>
</html>

Upvotes: 1

Khoa Nguyen
Khoa Nguyen

Reputation: 1

You can have an if condition in the foreach statement.

foreach($category as $category_item)
{
    if ($_POST['drpcategory'] == $category_item) {
        echo "<option selected value='".$category_item."'>".$category_item."</option>";
    } else {
        echo "<option value='".$category_item."'>".$category_item."</option>";
    }
}

I see your foreach statement is not correct in syntax. Do not use the same variable name for the list and the item.

Upvotes: 0

Artur Leinweber
Artur Leinweber

Reputation: 256

You can put the value of the first Dropdown in a session.

Then on submit you can simply set the first dropdown value to the value in the session.

No change on the submit handling required

Upvotes: 0

Related Questions