6

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
    }
});
MadsterMaddness
  • 725
  • 3
  • 12
  • 35
  • 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?? – vikram.fartyal Sep 01 '15 at 17:58

2 Answers2

5

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");
     }
});
EricBellDesigns
  • 955
  • 1
  • 9
  • 33
  • 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? – MadsterMaddness Nov 04 '14 at 23:48
  • Hmmm... I might try setting the focus outside the textbox, then simulating an enter keypress. – EricBellDesigns Nov 05 '14 at 00:02
  • 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? – MadsterMaddness Nov 05 '14 at 00:19
  • 1
    I'm not sure about the alert appearing twice. This is a post that explains how to simulate an enter press with jQuery: http://stackoverflow.com/questions/3276794/jquery-or-pure-js-simulate-enter-key-pressed-for-testing – EricBellDesigns Nov 05 '14 at 15:12
0

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

biko
  • 510
  • 6
  • 15