Question

I’m trying to submit a form without a submit button.
This form takes values from custom fields in wordpress, displaying results in another page. I’ve been trying with the usual javascript function onchange and nothing happens, I’ve tried with functions as well…does anyone know what’s wrong with this or if is there a better way to solve it? Can it be something related to WordPress, or the post method? This is the code for the form:

<form method="get" name="form" action="/busqueda/" >
        <div class="search">

            <select class="styled" name="author"  onChange="this.form.submit();">
            <option value="-1" selected>Authors</option>    
            <?php
            $metakey = 'author';
            $autores = $wpdb->get_col($wpdb->prepare("SELECT DISTINCT meta_value FROM $wpdb->postmeta WHERE meta_key = %s ORDER BY meta_value ASC", $metakey) );
            if ($authors) {
            foreach ($authors as $author) {
            echo "<option VALUE=\"" . $author . "\">" . $author . "</option>";
                                    }
                            }
                ?>
            </select>
        </div><!-- #search1 -->

</form>

BTW, the form works fine when displaying results with a standard submit button.
Any hint of what can be wrong is welcome. Thanks a lot!

Answer 1

Try this one:

<form method="get" name="form" action="/busqueda/" >
        <div class="search">

            <select class="styled" name="author" onChange="document.forms['form'].submit();">

            <?php
            $metakey = 'author';
            $autores = $wpdb->get_col($wpdb->prepare("SELECT DISTINCT meta_value FROM $wpdb->postmeta WHERE meta_key = %s ORDER BY meta_value ASC", $metakey) );
            if ($authors) {
            foreach ($authors as $author) {
            echo "<option VALUE=\"" . $author . "\">" . $author . "</option>";
                                    }
                            }
                ?>
            </select>
        </div><!-- #search1 -->

</form>

Updated with jQuery submit

The updated form:

<form id="authorForm" method="get" name="form" action="/busqueda/" >
        <div class="search">

            <select id="author" class="styled" name="author">
                <option value="default">Choose an author...</option>
                <?php
                $metakey = 'author';
                $autores = $wpdb->get_col($wpdb->prepare("SELECT DISTINCT meta_value FROM $wpdb->postmeta WHERE meta_key = %s ORDER BY meta_value ASC", $metakey) );
                if ($authors){
                    foreach ($authors as $author) {
                        echo '<option value="' . $author . '">' . $author . '</option>';
                    }
                }
                ?>
            </select>
        </div><!-- #search1 -->

</form>

jQuery script change event handling and form submit:

<script type="text/javascript">
$(document).ready(function(){
    $('#author').change(function(){
        if($(this).val() !== 'default'){
            $('#authorForm').submit();
        }
    }); 
});
</script>

You can test the jQuery from submit on drop box change event