How to submit the page on hitting the enter key

[Former Member]

Hi,

Can anyone please suggest how should I go about solving the problem below.

I have created a bsp page on which i want to present data in the table view when i hit ENTER KEY.

I also have the enter button present on the page and i have aded the functionality to it as mentioned above.

Can i have the same event as that of enter button triggered when i hit the enter key.

Thanks for the help in advence

Nikhil

[former_member181879]

It was not even three weeks ago that this thread passed through this forum:

Part of the responsibility that comes with asking questions here, is to also read backposts, and later when you feel up to speed, to answer a few.

If the thread above is not yet on the mark, we can try again on a second round.

++bcm

[Former Member]

Hi Brian,

I looked through those threads actually, however since Nikhil stated, after I asked, that yes they have only a tableView and a Button I hestitated to mention them (should have I know, sorry!).

Therefore (oh I know bad thinking on my part) I <b>assumed</b> that they were not doing input and just wanted the page reloaded in which case the JavaScript seemed the most likely chance of success.

A lot of "shooting in the dark" and "shooting from the hip" and all the other little sayings that used in these cases.

This morning I played around with a page with these two elements and this is the result.

<%@page language="abap"%>
<%@extension name="htmlb" prefix="htmlb"%>

<htmlb:content design="design2003">
  <htmlb:page title = "Test submit ">
    <htmlb:form id="myform" method="GET">

      <script>
        document.onkeydown=function(){
          if(event.keyCode==13) {   
            document.forms.myform.submit()
          }
        };
      </script>

      <htmlb:tableView  id = 'mytable'
                     width = '100%'
             footerVisible = 'true'
           fillUpEmptyRows = 'true'
  	             design = 'ALTERNATING'
  	               sort = 'SERVER'
           visibleRowCount = '10'
                     table = '<%= systemresults %>' />
  	
      <htmlb:button       text          = "Press Me"
                          onClick       = "myClickHandler" />

    </htmlb:form>
  </htmlb:page>
</htmlb:content>

The keycode value for the JavaScript is the ASCII value of the return key, you could also play around with this value for other keystroke types, for example using <i>event.keyCode==9</i> would allow you to hit tab to reload your page.

Given some thought this might make for a nice refresh of a page??

Of course you will need to change your "table" in the tableView but this does seem to work OK.

You can now handle any processing if the button is clicked or "enter" is hit in the event handlers. As you can see since I set the <i><htmlb:form id="myform" method="GET"></i> with GET you can see all the parameters and values in the URL. So the page is "submitted" after the "enter" is hit.

[Former Member]

Hi,

The page is getting submitted but the control is not passing to the event handling code.

What i needed exactly was on submit to call the code written in the event handeling of enter button.

It seems that i will have to install the SP so as to facilitate this.

Please advice.

Thanks

Nikhil

[former_member181879]

There are a few ideas:

You can play around with approach that Craig suggest. It is excellent appends (worth minimum 6 points!). The only small change, is not to submit the form, but to get to the button, and a do a button.click(). This way your event passes through the HTMLB event system.

You can use the same as Craig suggest. Instead of the form submit, you replace it with a htmlbSubmit() call. This has been discussed in depth in a <a href="/people/brian.mckellar/blog/2004/07/18/bsp-in-depth-using-the-htmlb-event-system">previous weblog</a>.

You can hook the enter key, and then just do the form submit. However, how to get the event to appear inside the onInputProcessing? This you can do by rendering a hidden input field inside your form with the format (only needed if you do not use our htmlb form):

<input type="hidden" name="onInputProcessing" value="xyz">

You can just wait for the next SP. Or repair the code yourself.

[former_member181879]

Your answer is perfectly correct. I have just over time learned that the questions people ask are not always the question that is really been asked. Different people have different experience levels, and sometimes I just "shoot at another target", thinking that it is the more important one. Sometimes I have to come back and cleanup the mess.

<i>The only thing with your answer is that it will not run through the onInputProcessing method. To get into this method, we use look for a (hidden) form field that has specifically the name onInputProcessing. You can just manually set it in your form, or .....</i> Oops. Ok, it will go into the onInputProcessing, because you are using the <htmlb:form> tag. And this guy already renders out the hidden inputfield for you. (For the record, our coding is about what you have shown here.)

++bcm

[Former Member]

Hi Brian,

I'm assuming (bad habit I think) that this response was directed to me.

Question, I've always used the htmlb:form on my pages regardless I've always considered it safe practice but once again I assume that it's not required for the event handling?

[former_member181879]

No, you actually must have a HTML <form> on the page, which is the <htmlb:form> to get data back to the server. If you really want to help yourself, look at the <htmlb:page> tag. It is just the sum of all the <htmlb:document*> tags. Now write for yourself a new tag, call it <my:page> and process inside it the htmlb content, page, and form. Have them there always. That is the best way to go.

For the record, for any event that the HTMLB manager renders out, it checks that it is used inside a htmlb form.

(Responses in my case are never directed. Unless I tell someone to read documentation! No, this is general communication. Those that read, just profit!)

++bcm

[Former Member]

Excellent idea Brian, thanks for the tip!

[Former Member]

Could you be a bit more specific?

What I understand is that you have a page with a table view and a button.

You want the user to be able to hit the physical "ENTER KEY" on the keyboard or click the BUTTON with the mouse and have the same thing happen?

Do I have the right?

[Former Member]

Hi Craig,

Sorry for the confusion.

But you have got it right.

Can you please help me to add this functionality

Thank

Nikhil

[Former Member]

What all do you have on the page? Just the htmlb:tableView and htmlb:button ?

Here is some Javascript you can try, I'm at home now and don't have the Mini WebAS Installed on this PC anymore. So you'll have to try the code and see if it works. Tomorrow morning I will go into our WebAS Development system and see what I can get out of the PAGE event of the BSP itself.

You'll need to modify the JavaScript code here to match your form name.

document.onkeydown=function(){
if(event.keyCode==13 && lastObj) {  
 document.forms.myform.submit()
}
};

However, and I wish I had the Mini WebAS still installed here at home you should really look at the htmlb:page and htmlb:form tags I'm pretty sure if you assign the method parameter and the action parameter to the htmlb:form then if the user hits enter on the page you can trap it similiar to the JavaScript. You know if I get motivated I might just try to install the Mini WebAS and play around a bit tonight. I'll post more tonight if I can and if not then tomorrow morning unless Brian or someone else beats me too it.