Select option from dropdown to be passed to variable and reload page with new domDocument

Question

ok. have been fighting this for long now. I have following code that feches html from add site:

$articleClassName = 'relative isolate sf-search-ad cursor-pointer overflow-hidden relative transition-all outline-none p-10 hover:bg-aqua-50 focus:bg-aqua-50 sf-search-ad-legendary  -m-8';
$merchantID = '3553552';
$finn_link = 'https://www.addsite.tv/car/used/search.html?orgId='.$merchantID.'&sort='.$sortBy;
$finnTagName = 'article';
$finnAttrName = 'class';
$finnAttrValue = $articleClassName;

$finnDom = new DOMDocument;
$finnDom->preserveWhiteSpace = false;
@$finnDom->loadHTMLFile($finn_link);

$finnHtml = getTags( $finnDom, $finnTagName, $finnAttrName, $finnAttrValue );
    
function getTags( $finnDom, $finnTagName, $finnAttrName, $finnAttrValue ){
    $finnHtml = '';
    $domxpath = new DOMXPath($finnDom);
    $newDom = new DOMDocument;
    $newDom->formatOutput = true;
    $filtered = $domxpath->query("//$finnTagName" . '[@' . $finnAttrName . "='$finnAttrValue']");
    // $filtered =  $domxpath->query('//div[@class="className"]');
    // '//' when you don't know 'absolute' path

    // since above returns DomNodeList Object
    // I use following routine to convert it to string(html);
    $i = 0;
    while( $myItem = $filtered->item($i++) ){
        $node = $newDom->importNode( $myItem, true );    // import node
        $newDom->appendChild($node);                    // append node
    }
    $finnHtml = $newDom->saveHTML();
    return $finnHtml;
}
?>

I have this selection dropdown:

<select id="search-sorter">
<option value="MILEAGE_DESC">Km h&oslash;y-lav</option>
<option value="MILEAGE_ASC">Km lav-h&oslash;y</option>
<option value="MODEL">Modell</option>
<option value="PRICE_DESC">Pris h&oslash;y-lav</option>
<option value="PRICE_ASC">Pris lav-h&oslash;y</option>
<option selected value="PUBLISHED_DESC">Publisert</option>
<option value="YEAR_ASC">&Aring;r eldst-nyest</option>
<option value="YEAR_DESC">&Aring;r nyest-eldst</option>
</select>

In short, I need to pass selected option value to variable $sortBy and reload page to update domDocument view with sorted order. as you can see link is formed with variables in URL. So how in ideal work this should work is that selected options values would be passed to variable $sortBy and after page would reload loading in newDOM using already altered link to source that is supplied by $finn_link and this way achieving result of sorting.

I realy need a hint here :D

Originaly there is also other options but I realy need those to work. I would consider also reloading only part of page that inholds actual html that is efected by changes in domDocument instead of reloading whole page but reload of whole page would work fine too.

Answer 1

I used javascript to do the job with this (I am very bad at javascript so just did what I could gather from all the internet):

const selectElement = document.getElementById('search-sorter');
    selectElement.addEventListener('change', function() {
        const selectedValue = selectElement.value;
        const urlParams = new URLSearchParams(window.location.search);
        urlParams.set('sortBy', selectedValue);
        window.location.href = window.location.pathname + '?' + urlParams.toString();
    });

and there after I used:

$sortBy = isset($_GET['sortBy']) ? $_GET['sortBy'] : 'PUBLISHED_DESC';

Answer 2

Another way you can do this is by putting your selector in a form element and add an onChange attribute to your selector element. The one I used here is JavaScript's way of submitting a form upon the selector changing, which seems to be what you want. I also added a name attribute to your selector for a reason that will be explained later. Your selector should now look like this:

<form method="post">
    <select id="search-sorter" name="search-sorter" onChange="this.form.submit()">
        <option value="MILEAGE_DESC">Km h&oslash;y-lav</option>
        <option value="MILEAGE_ASC">Km lav-h&oslash;y</option>
        <option value="MODEL">Modell</option>
        <option value="PRICE_DESC">Pris h&oslash;y-lav</option>
        <option value="PRICE_ASC">Pris lav-h&oslash;y</option>
        <option value="PUBLISHED_DESC">Publisert</option>
        <option value="YEAR_ASC">&Aring;r eldst-nyest</option>
        <option value="YEAR_DESC">&Aring;r nyest-eldst</option>
    </select>
</form>

A form with no defined action reloads the same page. You can use the $_POST super global variable to access the option value that the user actually selected. Given that said variable is indexed by name, you are now able to do the following:

$sortBy = $_POST['search-sorter'];

And that will give you a means to dynamically load the page with the proper $sortBy value that you have been looking for.

You may want to start with a default value for your link, so it'd be more like:

if (!empty($_POST)) {
    $sortBy = $_POST['search-sorter'];
} else {
    $sortBy = "MILEAGE_DESC";
}

Hope this helps you have yet another solution available to you for this problem and other similar situations you may find yourself in moving forward. You may even want to play around with sessions and cookies to ensure that the user's sort selection is not erased by refreshing their page, but this is just a solution I came to off the top of my head.

Answer 3

This works finaly.

$sortBy = $_GET['sortBy'];
<form method="get" id="sort-form">
<label for="search-sorter-label">Sortér på</label>
        <span class="spaceLabel1">    </span>

<select id="search-sorter" name="sortBy" onchange="document.getElementById('sort-form').submit();">
<option value="PUBLISHED_DESC" <?php if ($sortBy === 'PUBLISHED_DESC') echo 'selected'; ?>>Publisert</option>
<option value="MILEAGE_DESC" <?php if ($sortBy === 'MILEAGE_DESC') echo 'selected'; ?>>Km høy-lav</option>
<option value="MILEAGE_ASC" <?php if ($sortBy === 'MILEAGE_ASC') echo 'selected'; ?>>Km lav-høy</option>
<option value="PRICE_DESC" <?php if ($sortBy === 'PRICE_DESC') echo 'selected'; ?>>Pris høy-lav</option>
<option value="PRICE_ASC" <?php if ($sortBy === 'PRICE_ASC') echo 'selected'; ?>>Pris lav-høy</option>
<option value="YEAR_ASC" <?php if ($sortBy === 'YEAR_ASC') echo 'selected'; ?>>År eldst-nyest</option>
<option value="YEAR_DESC" <?php if ($sortBy === 'YEAR_DESC') echo 'selected'; ?>>År nyest-eldst</option>
<option value="MODEL" <?php if ($sortBy === 'MODEL') echo 'selected'; ?>>Modell</option>
        </select>
    </form>
<script type="application/javascript">
const selectElement = document.getElementById('search-sorter');
selectElement.addEventListener('change', function() {
    document.getElementById('sort-form').submit();
    const selectedValue = selectElement.value;
    const urlParams = new URLSearchParams(window.location.search);
    urlParams.set('sortBy', selectedValue);
    window.location.href = window.location.pathname + '?' + urlParams.toString();
});
</script>
</div>
<div class="grid f-grid grid-flow-row-dense overflow-hidden py-2 grid-cols-1 sm:grid-cols-2 gap-16 -mx-8 px-8 -my-8 py-8 md:mx-0 md:px-16"><?php echo $finnHtml; ?></div>
    <script>
    const selectElement = document.getElementById('search-sorter');
    selectElement.value = '<?php echo $sortBy; ?>';
</script>

Works as a charm and easy to edit and also code independent.