CODEWITHSUNDEEP
javascriptjqueryhtmlformskeypress
MadsterMaddness
MadsterMaddness

Reputation: 735

How to call function on text input enter key pressed?

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:

enter image description here

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
    }
});

Upvotes: 6

Views: 34318

Answers (2)

biko
biko

Reputation: 520

It looks like the issue as described in your question 'How to call function on text input enter key pressed?' is not an issue since you have the proper events set up to listen to the Enter key. What you need to do is to fix your validate function to update the UI. Try to move the alert to the first line of the validate function and go from there to figure out where your code is breaking.

Also, it looks like your HTML could be fixed up... tags are old-school deprecated code. You can't have nested tags. And last you aren't closing your tags properly. The issues you are experiencing could be related, especially with the nested tags as the browser would attempt to fix your HTML and who knows which post parameters the form would be sending.

Tip: Use Chrome web inspector's console to see exactly where your code is breaking. View->Developer->Javascript Console

Upvotes: 0

EricBellDesigns
EricBellDesigns

Reputation: 965

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");
     }
});

Upvotes: 5

Related Questions