How to call a function when entering text, enter the key pressed?

Question

I created a div in a table format that I use to filter data parameters. I'm having problems with pressing the enter key inside the text box. When I press enter, a warning appears, but the page just reloads and is not properly filtered using any of the options. Can someone explain to me what is going on?

Please let me know if I am unclear or need to explain something!

Here's what the filter options panel 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>

---

SOLVE:

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

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

Answer 1

, validate(). , validate(), , . ...

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

Answer 2

, , " , ?" , , Enter. , . , , .

, , HTML ... - . . , . , , , , HTML- , .

. - Chrome, , . View- > Developer- > Javascript Console