Submit value from first dropdown to second dropdown without reloading the page - php

Question

I have a repair prices calculator on my website, where users can first select the brand from a dropdown and then select the exact model from the second dropdown.
Currently the page reloads after selecting an option from the first dropdown and passes the selected value with $_POST, the second dropdown then shows all devices from the selected brand. After selecting the model, the user gets forwarded to the specific device page.
I would prefer to pass the value and show the second dropdown without the page being reloaded. I have tried doing this with ajax, but wasn't able to get the correct code, so I went back to the first working setup. Could anyone tell me the code I need to submit the value to the second dropdown without reloading?
This is the code I have so far:
<h2>Preisrechner</h2>
<div class="preisrechner-select-wrapper">
<form method="POST" action="">
<div>
<?php
$args = array(
'hierarchical' => 1,
'depth' => 1,
'orderby' => 'name',
'echo' => 0,
'taxonomy' => 'marke',
// this leads to variable name $_POST['marke']
'name' => 'marke-sel'
);
if( ! isset($_POST['marke-sel']) ):
$args['show_option_none'] = 'Hersteller auswählen';
else:
$args['selected'] = $_POST['marke-sel'];
endif;
$marke = wp_dropdown_categories( $args );
// this enables the buttonless js possibility
$marke = preg_replace("#<select([^>]*)>#", "<select$1 onchange='return this.form.submit()'>", $marke);
echo $marke;
?>
<noscript>
<div>
<input type="submit" value="marke"/>
</div>
</noscript>
</div>
</form>
<?php
if( isset($_POST['marke-sel']) && $_POST['marke-sel'] ):
?>
<form method="POST" action="<? bloginfo('url'); ?>">
<input type="hidden" name="marke" value="<?php echo $_POST['marke-sel'] ?>">
<div>
<?php
$the_query = new WP_Query( array(
'post_type' => 'reparaturpreise',
'tax_query' => array(
array (
'taxonomy' => 'marke',
'field' => 'id',
'terms' => $_POST['marke-sel'],
)
),
) );
if ( $the_query->have_posts() ) :
?>
<div class="form-option parent-field-wrapper">
<label for=""/>
<select name='modell' id='modell' onchange='document.location=this.value'>
<option value="">Modell auswählen</option>
<?php while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<option value="<?php the_permalink();?>">
<?php the_title(); ?>
</option>
<?php endwhile; ?>
</select>
</div>
<?php endif;
wp_reset_postdata();
$modell = preg_replace("#<select([^>]*)>#", "<select$1 onchange='this.form.submit()'>", $modell);
echo $modell;
?>
<noscript>
<div>
<input type="submit" value="modell"/>
</div>
</noscript>
</div>
</form>
<?php endif; ?>
<?php
if( isset($_POST['marke-sel']) && $_POST['modell'] ):
$args = array(
'post_type' => 'reparaturpreise',
'cat' => $_POST['marke-sel'],
'posts_per_page' => 1
);
$loop = new WP_Query( $args );
while ( $loop->have_posts() ) : $loop->the_post();
the_title();
echo '<div class="entry-content">';
the_content();
echo '</div>';
endwhile;
endif;
?>
</div>

Answer 1

If the code generated by PHP needs to change (ie results) then the page will need to reload. The only way around this would be to move this code to an endpoint which can be called via an AJAX call and returns the results.
A good example which can be changed for your scenario can be found here:
https://premium.wpmudev.org/blog/using-ajax-with-wordpress/