CODEWITHSUNDEEP
javascriptphpjquerywordpressforms
blackhill24
blackhill24

Reputation: 452

Unable to change jQuery button submit to drop down select and submit

I have a wp_query where I would like to change the posts per page via a drop-down select box. The code I have has been pieced together from various tutorials and snippets I already have so bear with me...

My basic wp_query is;

<?php

$postsperpage = isset($_POST['amt_per'])? $_POST['amt_per']: 10;


        $args = array(
        'post_type'=>'product',
        'posts_per_page' => $postsperpage,
    );

    $the_query = new WP_Query( $args );

    if ( $the_query->have_posts() ) {
        echo '<ul>';
        while ( $the_query->have_posts() ) {
            $the_query->the_post();

            echo '<li>' . get_the_title() . '</li>';
        }
        echo '</ul>';

        wp_reset_postdata();

    } else {

    }

?>

The tutorial I used had a few buttons where the values were the number of posts per page;

    <form method="post">
  <select id="select-box">
    <option class="amt-button" name="amt_per" value="1">1</option>
    <option class="amt-button" name="amt_per" value="2">2</option>
    <option class="amt-button" name="amt_per" value="3">3</option>
    <option class="amt-button" name="amt_per" value="4">4</option>
  </select>
</form>

and the jQuery;

<script>
jQuery(document).ready(function($) {
    // Postsperpage
    $('select').click(function(){
        $(this).closest('form').submit();
    });
});
</script>

What I want to do is change the buttons into a drop-down select box like this;

<select id="select-box" method="post">
    <option class="amt-button" name="amt_per" value="1">1</option>
    <option class="amt-button" name="amt_per" value="2">2</option>
    <option class="amt-button" name="amt_per" value="3">3</option>
    <option class="amt-button" name="amt_per" value="4">4</option>
</select>

The problem I now have is my amended jQuery won't update the query with correct posts per page, this is what I have come up with;

$(function() {
  $('#select-box').on('change', function(e) {
    $(this).closest('form')
           .trigger('submit')
  })
})

any and all help is appreciated, Thanks!!

UPDATE

Thanks to @Krystian Barchański I've updated my dropdown code and wrapped the in a . This has got the form firing when you select a dropdown value but now the page just reloads with the same posts per page and the dropdown changes back the initial value, I'm assuming this is a jquery issue as when using the buttons everything worked fine?

Upvotes: 0

Views: 88

Answers (2)

Vel
Vel

Reputation: 9331

You need to change the select box name amt_per. not for options.

 <form method="post" action="">
  <select id="select-box" name="amt_per">
    <option class="amt-button" value="1">1</option>
    <option class="amt-button" value="2">2</option>
    <option class="amt-button" value="3">3</option>
    <option class="amt-button" value="4">4</option>
  </select>
</form>

Upvotes: 1

Krystian
Krystian

Reputation: 19

You have to wrap your <select> with a <form> like this:

<form  method="post">
  <select id="select-box">
    <option class="amt-button" name="amt_per" value="1">1</option>
    <option class="amt-button" name="amt_per" value="2">2</option>
    <option class="amt-button" name="amt_per" value="3">3</option>
    <option class="amt-button" name="amt_per" value="4">4</option>
  </select>
</form>

In your example you treat <select> as it could be submitted and it would send a post request but that can be done only by a form.

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/select - here you'll find list of available attributes for select there is no method nor url.

Upvotes: 1

Related Questions