How to call function on text input enter key pressed?

Question

I have created a div in a table format that I am using to filter data options. I am having problems with pressing enter from inside the text box. When I press enter, the alert appears, but the page just reloads and isn't properly filtered with any of the options. Can anyone explain to me what is going on?

Please let me know if I was unclear or need to explain anything!

This is what my filter option bar looks like:

HTML:

<form name="myform">

   <center><table id="mykeyTable" border="1" cellspacing="10" cellpadding="10">
   <center></center>

</td>


<!--Search bar -->
   <tr>
    <td colspan="4">
    <center>
      <form>
        Starts With: <input type="text" id="myText" value=""><br>
      </form>
    </center>
   </tr>

<!-- Site Options -->
  <td><center>Site</center><br>
                  <input type="radio" name="siteID" onclick="updateSiteID(this.value)" value="Asc"checked>
                  <input type ='button' id='siteIDChosen' class='button-addAsc'/>
              <br>
                  <input type="radio" name="siteID" onclick="updateSiteID(this.value)" value="Desc" >
                  <input type ='button' id='siteIDChosen' class='button-addDesc'/>
              <br>
         </input>
     </form></td>

<!-- Status options -->

    <td><center>Status
   <br><br></center><input type="radio" name="siteStatus" onclick="updateSiteStatus(this.value)"value="Online"> Online<br><input type="radio" name="siteStatus" onclick="up\
dateSiteStatus(this.value)" value="Offline"> Offline<br><input type="radio" name="siteStatus" onclick="updateSiteStatus(this.value)" value="Both" checked> Both </form></td\
>



<!-- usage plan -->
   <td><center>Usage Plan (in MB)</center>
<br><input type="radio" name="usagePlan" onclick="updateUsagePlan(this.value)" value="yesUsagePlan"> Data Plan<br><input type="radio" name="usagePlan" onclick="updateUsage\
Plan(this.value)" value="noUsagePlan"> No Data Plan<br><input type="radio" name ="usagePlan" onclick="updateUsagePlan(this.value)" value="bothUsagePlan" checked> All Plans\
</form></td>



     </table>
<br>
<form><input type='button' id='filter' name='Submit' onclick='validate()' class='button-add' value=" Filter Selections"/></form>

</center>

</form>
</div>

Javascript:

<script>


$("#myText").keypress(function(event) {
    if (event.which == 13) {
      alert("You pressed enter");
     validate();

    }
});



$(document).keypress(function(event){
    if(event.keyCode == 13){

        validate();
    }
});




function validate() {
//...
}

</script>

---

SOLVED:

I used jQuery click to call the same function used as the button.

$(document).keypress(function(event){
    if(event.keyCode == 13){
     $('#filter').click();
      //  validate(); doesn't need to be called from here
    }
});

Solution

I would suspect you are getting an error in your validate() function. Try putting the alert after you call the validate() and see if you still receive the alert message. Like this...

$("#myText").keypress(function(event) {
    if (event.which == 13) {
        validate();
        alert("You pressed enter");
     }
});

Comments

[vikram.fartyal]

Your solution worked only if i enter on the document but if i focus into inputText and press enter it overrides the '$('#filter').click()' method and call all other methods available in script. any idea what is the issue??

[MadsterMaddness]

I switched my two lines and I am still receiving the alert message, but no filter. When I insert text inside of the input box and click outside of the text box and either press enter or click the filter button, then it works. But why would it not work from inside the text box? Is there a hacky way to call the onClick filter button from within my jQuery?

[EricBellDesigns]

Hmmm... I might try setting the focus outside the textbox, then simulating an enter keypress.

[MadsterMaddness]

When I move the alert to validate function then the alert is appearing twice. Do you know what would cause something like that? How do you simulate a button press from within the jQuery?

[EricBellDesigns]

I'm not sure about the alert appearing twice. This is a post that explains how to simulate an enter press with jQuery: stackoverflow.com/questions/3276794/…