CODEWITHSUNDEEP
javascriptjquery
user3583361
user3583361

Reputation: 1

jquery load function doesnot work inside keypress function

I am facing a problem. I have this simple html code. 

<form name="myform" method="POST" action="">
    <div>
        <p>
            <input id="query" type="text" size ="60" title="Enter your search string here." style="font-size:12px;" />
            <input id="startSearch" type="button" value="Search Resource" />
         </p>
    </div>

    <div id="pageContents" >

    </div>
</form>

and I am using this Jquery code to run my program

$(document).ready(function() {

    $('#query').keypress(function(e) {
        if (e.keyCode == '13') {
            alert( 'enter key is pressed ');
            $('#startSearch').click();
        }
    });

    $('#startSearch').click(function() {
        query = $('#query').val();
        model = $('input:radio[name="model"]:checked').val();
        if(model=='combined'){
            $('#pageContents').load('combinedsearch.jsp?q='+encodeURIComponent(query)+'&m='+model);
        } else {
            $('#pageContents').load('search.jsp?q='+encodeURIComponent(query)+'&m='+model);
        }

    });
});

issue is: $('#startSearch').click(function() works well when someone press start search button. but $('#query').keypress(function(e)) captures event and process my code but never show results back to the browser. I thinks load function is not working inside $('#query').keypress(function(e)) function. Can anyone please guide me

Upvotes: 0

Views: 290

Answers (4)

christian314159
christian314159

Reputation: 639

You are doing too much ;) It's a form, and its "main event" is a submit - which happens when someone hits "enter" or clicks the submit button. Thus your HTML should look like this:

<form id="myform">
  <input id="query">
  <input type="submit" value="Search Resource" />
</form>

and your JS:

$(function(){

  // DOM ready

  $('#myform').on('submit', function(e){

    e.preventDefault();

    // Your search code
    // ...

  });

});

Upvotes: 1

Barmar
Barmar

Reputation: 780879

You need to prevent the default action of submitting the form when you press Enter.

$('#query').keypress(function(e) {
    if (e.keyCode == '13') {
        e.preventDefault();
        alert( 'enter key is pressed ');
        $('#startSearch').click();
    }
});

Upvotes: 1

sahbeewah
sahbeewah

Reputation: 2690

According to my fiddle this works as expected: http://jsfiddle.net/65HSm/

HTML:

<div id="pageContents"></div>
<input type="text" id="query">
<input type="button" id="startSearch" value="search">

JS:

$(document).ready(function () {
    $('#query').keypress(function (e) {
        if (e.keyCode == '13') {
            alert('enter key is pressed ');
            $('#startSearch').click();
        }
    });

    $('#startSearch').click(function () {
        query = $('#query').val();
        model = $('input:radio[name="model"]:checked').val();
        if (model == 'combined') {
            console.log('load 1');
            console.log(query);
            $('#pageContents').load('combinedsearch.jsp?q=' + encodeURIComponent(query) + '&m=' + model);
        } else {
            console.log('load 2');
            console.log(query);
            $('#pageContents').load('search.jsp?q=' + encodeURIComponent(query) + '&m=' + model);
        }

    });
});

Upvotes: 0

Papa
Papa

Reputation: 1638

I wouldn't use keypress. Use keydown or keyup.

As stated in the jquery api:

Note: as the keypress event isn't covered by any official specification, the actual behavior encountered when using it may differ across browsers, browser versions, and platforms.

Upvotes: 0

Related Questions