Using Javascript to send a keystroke in an input when a button is clicked

Question

Is there any way using Javascript to send the "enter" aka keystroke "13" in an input when a button is clicked?

Details on why I want this:

Basically I have a car part look up tool that uses jQuery to actively post to a php file that searchs a MySQL DB, I wanted to make a few buttons with common car part OEMs, like; Chevrolet, Ford, Toyota etc.. I have the buttons doing they're thing when I click on them then change what is in the search field but it won't post to the php file until I press enter, so I wanted to hit two birds with one stone, click the button and it will enter 'chevrolet' in the search in put and then press enter for me all at once with one click of a button. =)

here is the code I am using to post data to the php file:

$(document).ready(function() {  

    function search() {
        var query_value = $('input#search').val();
        $('b#search-string').html(query_value);
        if(query_value !== ''){
            $.ajax({
                type: "POST",
                url: "search.php",
                data: { query: query_value },
                cache: false,
                success: function(html){
                    $("ul#results").html(html);
                }
            });
        }return false;    
    }


    $("input#search").live("keyup", function(e) {
        clearTimeout($.data(this, 'timer'));

        var search_string = $(this).val();

        if (search_string == '') {
            $("ul#results").fadeOut();
            $('h4#results-text').fadeOut();
        }else{
            $("ul#results").fadeIn();
            $('h4#results-text').fadeIn();
            $(this).data('timer', setTimeout(search, 100));
        };
    });
});

UPDATE:

I was able to make it work with the following code:

Javascript:

$(".btn3").click(function() { var e = $.Event('keyup'); e.which= 13; $('#search').val($(this).val()); $('#search').trigger(e); });

HTML:

<input type="button" class="btn3" id="CHEVROLET" value="CHEVROLET" />

Answer 1

I'm assuming you have a function that handles the event of a user pressing the 'enter' key in the search input. Simply give that function a name and have it fire on the button click as well!

Answer 2

The way to do what you are asking:

$('#buttonID').click(function(){
// Create a new jQuery.Event object with 'keydown' event specified.
var e = jQuery.Event( "keydown", { keyCode: 13 } );

// trigger (send) an artificial keydown event with keyCode 13
jQuery( "body" ).trigger( e );
});

Depending on the application, if it is to make it so that the form submits when a non-submit button is pressed then

$('#buttonID').click(function(){
    $('#FormID').Submit();
});

would be the way to go.

Edit:

Alternatively to send the 'enter' command to the specific input box use:

$('#myInputId').trigger(jQuery.Event('keypress', {which: 13}));

You may need to replace which with keyCode depending on the version of jQuery you are using... JSFiddle Demo

from the updated description though, sounds like there must be a form on the page, if you can determine its id (look through source for <form .. id="FormID" then it would be better practice to use the submit function as above:

$('#buttonID').click(function(){
    $('#myInputID').val("Chevrolet"); // or however you are already doing this part
    $('#FormID').Submit();
});

What you should do is split the Javascript from the button so your final result will be something like:

    <script>

    $(".btn3").click(function() {
       $('#search').val($(this).val());
       $('#search').trigger(jQuery.Event('keypress', {which: 13}));
    });

    </script>
    <input type="button" class="btn3" id="Chevrolet" value="Chevrolet" />
<input type="button" class="btn3" id="Ford" value="Ford" />
<input type="button" class="btn3" id="Anotherone" value="Anotherone" />

What may be going wrong is you said you have multiple buttons, but keywords is a pretty generic id, which you may be repeating.. an ID must be unique or JS will not work correctly, if you want to perform a JS function for a group of things it is better to use the class, as this does not have to be unique.

so basically what the above does is waits for anything with class="btn3" in it to be clicked.

when that happens the input with id="search" gets filled with whatever the value= contains for what was clicked. Once that has happened the [enter] keypress is triggered inside the search input box.

This way, no matter which button gets pressed (Chevrolet, Ford or Anotherone) the search input box will get filled with the correct value. To add more buttons all you have to do is make sure they have class="btn3" and value="SOMETHING" and the above should work.

    $(document).ready(function() {  

        function search() {
            var query_value = $('input#search').val();
            $('b#search-string').html(query_value);
            if(query_value !== ''){
                $.ajax({
                    type: "POST",
                    url: "search.php",
                    data: { query: query_value },
                    cache: false,
                    success: function(html){
                        $("ul#results").html(html);
                    }
                });
            }return false;    
        }


        $("input#search").live("keyup", function(e) {
            clearTimeout($.data(this, 'timer'));

            var search_string = $(this).val();

            if (search_string == '') {
                $("ul#results").fadeOut();
                $('h4#results-text').fadeOut();
            }else{
                $("ul#results").fadeIn();
                $('h4#results-text').fadeIn();
                $(this).data('timer', setTimeout(search, 100));
            };
        });
    // ADD THIS
    $(".btn3").click(function() {
               $('#search').val($(this).val());
               search();
            });

    });

    ... 
<!-- Fix inputs -->
    <input type="button" class="btn3" id="Chevrolet" value="Chevrolet" />
        <input type="button" class="btn3" id="Ford" value="Ford" />
        <input type="button" class="btn3" id="Anotherone" value="Anotherone" />