Redirect wp_dropdown_pages() to an AJax request?

Question

I want to get the result of wp_dropdown_pages() to fire an ajax request to show an image instead of redirecting the user to the page url.

In other words, my pages are all for car models. I want to use the wordpress function to offer a list of the site's available car models and display their photo in a hidden carsphoto div.

The following is the code I have thus far which displays the list of my site's pages (cars) and fires a jquery submit automatically when an option is selected - no submit button needed.

<li id="pages">
<form action="<?php bloginfo('url'); ?>" method="get">
<?php  
$select = wp_dropdown_pages(
                    array(
                        'post_type' => 'page',
                        'show_option_none' => 'Select Car',
                        'echo' => 0
                    )
                );

echo str_replace('<select ', '<select onchange="this.form.submit()" ', $select);
?>
</form>
</li>

<div class="carphoto" style="display:hidden"></div>

The photos of the cars are stored in a cars folder in my uploads directory. Each car photo has a name that corresponds to the page title (without spaces).

So I know what I want to do is modify the "select onchange" code to send the stripped page title to an ajax request to fetch the photo corresponding to the page title selected in the dropdown... I just don't know how.

Your guidance is appreciated!

Answer 1

The following is the solution I came up with:

<div id="selection1">
<div id="dropdown1">
   <form id="choice1" action="<?php bloginfo('url'); ?>" method="get">
   <?php  
   $select = wp_dropdown_pages(
                        array(
                            'post_type' => 'page',
                            'show_option_none' => 'Select Car',
                            'echo' => 0
                        )
                    );

    echo $select; 
    ?>
   </form>
</div>

<div id="firstchoice"></div>
</div>

<script>
$('#choice1').change(function(){ //if the select value gets changed
var png = '.png';
var urlstart = <?php echo json_encode($url); ?>;
var imageSource = $(this).find('option:selected').text().replace(/\s/g, '').substring(6); //get the data from data-picture attribute
if(imageSource){ //if it has data
  $('#firstchoice').html('<img src="'+urlstart+imageSource+png+'">'); // insert image in div firstchoice
} else {
  $('#firstchoice').html(''); //remove content from div firstchoice, thus removing the image
}
})
</script>