CODEWITHSUNDEEP
phpjquery
Tom
Tom

Reputation: 244

Search box to work on both click a button PHP Jquery

i am trying to get a search box to work on both click a button or an enter action yet i cant get the enter action to work as well as enter. I know this isnt strictly php but i am using all php functions with the search and wondered if anyone could help.

This is my code:

function get() {
    $.post('search_tsr.php', {
        search_term: form.name.value
    }, function (output) {
        $('#search_results').html(output).show();
    });
}
$(document).ready(function () {
    $(document).keyup(function (event) {
        if (event.keyCode == 13) {
            $("#form").submit();
            $.post('search_tsr.php', {
                search_term: form.name.value
            }, function (output) {
                $('#search_results').html(output).show();
            });
        }
    })
});

Form :

<form name="form">
    <img src="gfx/search_magnifyer.jpg" width="18" height="18" border="0"
    align="absmiddle">
    <input name="name" type="text">
    <input type="button" onClick="get()" value="Go">
</form>

Anyone can you help?

Upvotes: 2

Views: 1238

Answers (3)

sergiocruz
sergiocruz

Reputation: 652

To get either "Enter button" or "Button click" to work, change the type of your button to "submit" instead of button:

<input type="submit" value="Go">

Then you can do the following:

$(document).ready(function () {
  $("#searchform").submit(function(e){
      e.preventDefault(); // prevents default form submition
      get(); // executes your get function
    });
});

Upvotes: 2

Arif
Arif

Reputation: 1726

You should make input type submit and call your function onsubmit event of form. you can do

in this way return false in get() if you want to use ajax.

 <form name="form" onsubmit="return get();">
              <img src="gfx/search_magnifyer.jpg" width="18" height="18" border="0" align="absmiddle">   
              <input name="name" type="text"><input type="submit" value="Go">

Upvotes: 0

Ayush
Ayush

Reputation: 42450

Rather than using the onClick event, use the submit event.

Give your form an id of searchform and do

$('#searchform').submit(function(){
  // do your stuff here
});

Upvotes: 0

Related Questions