ENTER key problem


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.
LVL 8
thomas908Asked:
Who is Participating?
 
mreuringConnect With a Mentor Commented:
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
 
gops1Commented:
In your form tag you can capture the submit action by calling a function or writing a javascript code

<form onsubmit="return functionName()">
0
 
thomas908Author Commented:
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
Cloud Class® Course: MCSA MCSE Windows Server 2012

This course teaches how to install and configure Windows Server 2012 R2.  It is the first step on your path to becoming a Microsoft Certified Solutions Expert (MCSE).

 
gops1Commented:
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
 
thomas908Author Commented:
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
 
mreuringCommented:
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
 
mreuringCommented:
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
 
Michel PlungjanIT ExpertCommented:
The document.onkeydown code did not work for FF
The artivcle I suggested also shows how to access element that fired the enter
0
 
mreuringCommented:
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
 
thomas908Author Commented:
>> 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
 
ThinkPaperIT ConsultantCommented:
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
 
ThinkPaperConnect With a Mentor IT ConsultantCommented:
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
 
thomas908Author Commented:
>>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
 
mreuringCommented:
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
 
thomas908Author Commented:
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
 
thomas908Author Commented:
Link may not be possible, since the site is currently not on internet.
0
 
thomas908Author Commented:
thanks.
it got solved after doing this

 onSubmit="javascript:submitSearch('change'); return false;"
0
 
mreuringCommented:
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
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.