Solved

ENTER key problem

Posted on 2006-07-14
19
21,181 Views
Last Modified: 2011-08-18

I have JSP page which has a form with text fields and checkboxes. These fields are displayed by applying XSL on an XML.
There is also is submit button in the form. This button is coded for in the JSP page.

<input type="button" name="btnSubmit" value="Search" onClick="javascript:submitSrch('change');" />

So that the form is submitted when the user presses ENTER key, following code has been written in this page


/* This will submit the form upon pressing enter key */
document.onkeydown = function() {
      return alertkey(event)
};

function alertkey(e) {
  if( !e ) {
    if( window.event ) {
     //Internet Explorer
      e = window.event;
    } else {
      return;
    }
  }
  if( typeof( e.keyCode ) == 'number'  ) {
    //DOM
      e = e.keyCode;
  } else if( typeof( e.which ) == 'number' ) {
    //NS 4 compatible
      e = e.which;
  } else if( typeof( e.charCode ) == 'number'  ) {
    //also NS 6+, Mozilla 0.9+
      e = e.charCode;
  } else {
    //total failure, we have no way of obtaining the key code
    return;
  }
  if(e==13) {
     submitadvancedSearch('change');
     return false;
  }
}

</script>


This JSP page includes another JSP page which displays a left navigation in the page specified above. This left navigation has a form with only one text field.

<input type="text" name="word" onkeypress="javascript:submitEnterKey();"/>

This used to work fine befroe the above specified Javascript was added in the main page. But now when the user is in this text field and presses ENTER then the form specified above (in the main page) gets submitted.
Please tell me how to resolve this issue.
0
Comment
Question by:thomas908
  • 7
  • 6
  • 2
  • +2
19 Comments
 
LVL 17

Expert Comment

by:gops1
ID: 17107115
In your form tag you can capture the submit action by calling a function or writing a javascript code

<form onsubmit="return functionName()">
0
 
LVL 8

Author Comment

by:thomas908
ID: 17107144
Thanks for replying
In that case i'll need a submit button.
And there are validations happening in the form. So if the user closes the alert(by pressing OK, which means user stays on the same page) the page still refreshes. So i have used button, instead of submit button.
0
 
LVL 17

Expert Comment

by:gops1
ID: 17107168
See now there are two ways by which your form is getting submitted:

One is press enter inside the text box and the other by just pressing the Enter anywhere on the body. Now in either of the case you need to validate your form I guess. If that is the case, you must have an onsubmit inside the form tag.

0
 
LVL 8

Author Comment

by:thomas908
ID: 17107297
In that case, how will I solve the refreshing problem, when user clicks on an alert?

My page is lke this

left Navigation                            main page

text field ->button                     text field 1
                                              text field 2
                                              text field 3
                                              text field 4
                                              Button




0
 
LVL 17

Expert Comment

by:mreuring
ID: 17107571
I think you should realise that if you use an onsubmit event to validate your form, you should cancel the submit action if the form doesn't validate. You can do this by having your validation function return false and making sure that you return your results in the onsubmit:

<form id="dodo" action="killthedo.do" onsubmit="return validate(this);">

With example function:

function validate(form) {
return confirm("Do you want the last dodo to die?");
}

Hope this helps,

 Martin
0
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 150 total points
ID: 17107612
0
 
LVL 17

Expert Comment

by:mreuring
ID: 17107736
Although I appreciate the article as a good introduction to attaching events in a more web 2.0 fasion, this article doesn't mention how to cancel an event's default action (which would be important if we'd want to properly attach the unsubmit function) while it completely ignores closures and context-driven events (Getting the events target from event.target||event.srcElement).
So, how do you see this as a solution to the problem at hand?
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 17107915
The document.onkeydown code did not work for FF
The artivcle I suggested also shows how to access element that fired the enter
0
 
LVL 17

Expert Comment

by:mreuring
ID: 17107992
Ah, sorry, I skipped one of the code-sections when I read adds by google :(. Interresting way of  accessing the target and it's properties though.
0
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 8

Author Comment

by:thomas908
ID: 17121325
>> I think you should realise that if you use an onsubmit event to validate your form, you should cancel the submit

I am already doing that. This is what I have written, but it still refreshes the page (when the user clicks OK on the alert)



  if (flagCheck == 1) {
     alert(lessDate);
     return false;
   }    
   else if(flagCheck == 2){
       alert(notInFormat);
       return false;
    }
  else
   return true;            
0
 
LVL 16

Expert Comment

by:ThinkPaper
ID: 17122543
change your ALERT to a CONFIRM as mreuring has posted in his code. ALERT only gives user option to click OK. CONFIRM gives the option of clicking OK or CANCEL.

So in case of "Do you want the last dodo to die?"
OK will continue the submission.
CANCEL will stop it.
0
 
LVL 16

Assisted Solution

by:ThinkPaper
ThinkPaper earned 50 total points
ID: 17122572
woops didnt look carefully. u can also do it the way you were doing it.
it looks like your validation is failing somewhere then. do this and do an alert on the actual value

alert("flag value is: " + flagCheck);

if (flagCheck == 1) {
     alert(lessDate);
     return false;
   }    
   else if(flagCheck == 2){
       alert(notInFormat);
       return false;
    }
  else
   return true;        
0
 
LVL 8

Author Comment

by:thomas908
ID: 17127772
>>alert("flag value is: " + flagCheck);

Flag value is displayed as 1, so the first alert is displayed. But after I click OK on the alert, the page gets refreshed (it is not submitted but only refreshes), so the values entered by the user are lost.
0
 
LVL 17

Expert Comment

by:mreuring
ID: 17128549
Alright, before I keep shooting in the dark, a few questions on how to proceed:
- Do you want to solve your issue by:
  a. fixing the submit handler so that it doesn't 'refresh' the page anymore (Would be my preference as it doesn't involve a work-around)
  b. fixing the onkeydown handler so that it only submits your misbehaving form and not any other

- Can you provide a link to the document that has this issue? This might help us determine what's accually going on without shooting in the dark, suggesting all sorts of fixes that may or may not be appropriate.
0
 
LVL 8

Author Comment

by:thomas908
ID: 17128731
Thanks for replying,
I'll prefer (a), since it looks to me to be an easier option. Although I  don't have any problem in changing the approach
0
 
LVL 8

Author Comment

by:thomas908
ID: 17128735
Link may not be possible, since the site is currently not on internet.
0
 
LVL 17

Accepted Solution

by:
mreuring earned 300 total points
ID: 17128777
Ok, in that case I will try and give you some debug information and add my assumptions to it, I hope that'll help :)

Assumption: You're linking your function inline (that is <form onsubmit="...">)

Check:

 - Your function is returning false when validation fails (I think we covered this)
 - Your inline statement returns the result of the handler function (<form onsubmit="return ......">)

Test:

  - Disable all non-essential javascripts, that is, any script that is not used for the submition and validation of your form

  - Have your form's onsubmit function simply return false
  - Return false in your inline statement without calling your onsubmit action (<form onsubmit="return false">)

I know this is largely testing by trial and error, but it's the best I can give you without access to the source...

 Martin
0
 
LVL 8

Author Comment

by:thomas908
ID: 17128840
thanks.
it got solved after doing this

 onSubmit="javascript:submitSearch('change'); return false;"
0
 
LVL 17

Expert Comment

by:mreuring
ID: 17129031
Alright, that's good to know, one important little thing about that. onsubmit (and all other inline events) only allows javascript as it's value so you should not add the javascript: protocol to it.
onSubmit="submitSearch('change'); return false;"

Also, although I could quite understand if you want to leave it at this, you should be able to have the submitSearch function return either true or false depending on the validation. But this would most likely be where you had your issue before.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

Today I would like to talk about localizing (Internationalization) JavaScript applications. Introduction When creating an application that is going to be used by many people around the globe, it is important to remember that not everyone speak…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

706 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

17 Experts available now in Live!

Get 1:1 Help Now