Want enter key to go to a specific action per input box

I have a screen with multiple input boxes and multiple buttons. There is no default button. If a user hit enter in a particular input box, I want a particular action to be executed for that input box. What is happening is that the first button it finds gets executed. 

I have tried many options mention on the Forum and pressing the enter key still goes to the first button's action.


. I tied a hidden button to the input box called CourtMemberHiddenSearch. . I added a onKeypress on the input box with the following JavaScript.

SyntaxEditor Code Snippet

"
<script>
    // if the keyCode is 13 ( enter key was pressed )
    if (event.keyCode === 13) {

        // prevents default behaviour
        event.preventDefault();
       $('#" + CourtMemberHidderSearch.Id + "').click();
        return false;
    }
</script>

"

But it still goes to the first button as the default. 


Any suggestion on what I am doing wrong. I looked at

https://www.outsystems.com/forums/discussion/47228/enter-key-does-not-trigger-default-button-triggers-another-one-instead/

and

https://www.outsystems.com/forums/discussion/27124/how-to-force-a-button-click-using-javascript/

but they don't give me what I want. 


I do not want to remove the capability of some one entering the enter key and forcing the use to click a button to perform the action, unless this is the only way in outsystems. 


Thanks


Hi Kevin,

Do let me know if i have understood your scenario correctly.

Let's assume we have 3 input box as Name, Surname & Email and value of each inputbox are saved by actions SaveName, SaveSurname & SaveEmail respectively.

So as per requirement, if user writes something in Name inputbox and hits enter, you need to call the SaveName action and respectively for other inputboxes. You don't want to stop the enter key event.

Let me know if my understanding is correct.


Meanwhile if you want to disable the "Enter" key event, you can use below code:

SyntaxEditor Code Snippet

$(document).ready(function() {
    $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});


Kind Regard's,

Lakshmi Kumar Yadav

 

Lakshmi Kumar Yadav wrote:

Hi Kevin,

Do let me know if i have understood your scenario correctly.

Let's assume we have 3 input box as Name, Surname & Email and value of each inputbox are saved by actions SaveName, SaveSurname & SaveEmail respectively.

So as per requirement, if user writes something in Name inputbox and hits enter, you need to call the SaveName action and respectively for other inputboxes. You don't want to stop the enter key event.

Let me know if my understanding is correct.


Meanwhile if you want to disable the "Enter" key event, use below code:

SyntaxEditor Code Snippet

$(document).ready(function() {
    $(window).keydown(function(event){
    if(event.keyCode == 13) {
      event.preventDefault();
      return false;
    }
  });
});


Kind Regard's,

Lakshmi Kumar Yadav

 

Lakshmi

You are correct. I want if someone hits enter in a particular input box, I want an action associated with that input but to be executed.


Kevin


Hi Kevin,

As per  requirement i have create the sample page.

Kindly look so that if it suits the requirement i can share the oml with you.

https://lkyadav.outsystemscloud.com/PreventEnter/Home.aspx

Here you can save the value by button as well as by hitting enter key.


Regard's,

Lakshmi Kumar Yadav


Lakshmi Kumar Yadav wrote:

Hi Kevin,

As per  requirement i have create the sample page.

Kindly look so that if it suits the requirement i can share the oml with you.

https://lkyadav.outsystemscloud.com/PreventEnter/Home.aspx

Here you can save the value by button as well as by hitting enter key.


Regard's,

Lakshmi Kumar Yadav



Lakshmi 

Instead of doing save we would use the for searching a table grid or initializing other textbox. But this is what we are looking for.

Please shared the oml. 

Thanks

Kevin









Hi Kevin,

Definitely, that totally depends on you to perform the type of action as per requirement.

Please find attached oml.


Regards,

Lakshmi Kumar

Lakshmi Kumar Yadav wrote:

Hi Kevin,

Definitely, that totally depends on you to perform the type of action as per requirement.

Please find attached oml.


Regards,

Lakshmi Kumar

Lakshmi

Looking at this, it is almost where I want to be. If someone hit enter in the Name box it would trigger the action associated with Name. If someone hit enter in the Surname it would trigger the action with Surname.

Currently with our non Outsystems pages, hitting enter will trigger an action. It will be hard to get people to change that behavior. So is it easy to modified the oml to perform this kind of task?

Thanks

Kevin


Hey Kevin, good to hear that it is useful to solve your problem.

Please mark the appropriate post as solution.


Regard's

Lakshmi Kumar Yadav

Lakshmi Kumar Yadav wrote:

Hey Kevin, good to hear that it is useful to solve your problem.

Please mark the appropriate post as solution.


Regard's

Lakshmi Kumar Yadav

Lakshmi

Not quite. I didn't see how hitting enter in a text box will trigger the button action associated with text box. Looking at what you provided instead of the button being save they would be doing a search in a table or another type of action. I want the people to enter text, hit enter and preform like a search or another action without having to hit another button to do the action. 

Here is a better example. I have created a change dynamic paging size and dynamic go to  paging for a table aggregate when there are a lot of pages. There are several tables and buttons on a page. 

If they what to change the paging size, they would enter the new paging size then hit enter to change the paging size. Same applies to go to page. What been happing is if the hit enter the action associated with the first button on the page get executed. The same applies search textbox associated with a table aggregate. The first button's action will be executed. 

So how easy is it to have a text box doing a specific action when hitting enter in the text box? Some examples on the Forum indicated using JavaScript. But there seem to be different versions on how to do this. None of them have worked for what I want. Actually they still cause the first button's action even with the JavaScript.

Sorry if I originally cause some confusion . Oh by the way, some of these pages were created using Lisbon other are using outsystems 11. We did not want to change all the Lisbon pages to outsystems 11. So new ones are using outsystems 11. 

Thanks

Kevin



Hey Kevin,

No problem, forum is for helping only.

1. For triggering the action, their is some javascript code written at page level.

2. The button action is example of what needs to be done inside it, i have jst displayed feedback message.

 You can write the logic of search functionality as per need.

I'll try to implement the example given by you above for pagination.

Are you using OS11 reactive or traditional web application?


Thanks,

LK

 







Lakshmi Kumar Yadav wrote:

Hey Kevin,

No problem, forum is for helping only.

1. For triggering the action, their is some javascript code written at page level.

2. The button action is example of what needs to be done inside it, i have jst displayed feedback message.

 You can write the logic of search functionality as per need.

I'll try to implement the example given by you above for pagination.

Are you using OS11 reactive or traditional web application?


Thanks,

LK

 







Lakshmi

It is  traditional. Again thanks for your help. This is the last issue I have before publishing to Production.

Kevin


Hi Kevin,

attached is the updated oml.

Thanks,

LK

Lakshmi Kumar Yadav wrote:

Hi Kevin,

attached is the updated oml.

Thanks,

LK

Lakshmi

I think I understand what you are doing but I have one more question. The JavaScript function will be called everything a key press happens on the page. Then it will look at which if input was cause the keypress then process if enter was one of the keys? I assume if you had multiple input fields that just add a 

$('.input').keypress(function (e) ... for each input. like you had input name member and courts there would be an $('.member').keypress(function(e) and an $('.court').keyperss(function(e)…

Other than this question, I am ready to give this a try

Kevin

Hey Kevin,

Yes, the function will be called everytime on keypress, but you need not have to write for every inputbox, just when you are adding a new inputbox, add a extended property to inputbox and their respective buttons like other inputs/buttons have and the javascript function will handle it automatically.


Thanks,

LK



Lakshmi Kumar Yadav wrote:

Hey Kevin,

Yes, the function will be called everytime on keypress, but you need not have to write for every inputbox, just when you are adding a new inputbox, add a extended property to inputbox and their respective buttons like other inputs/buttons have and the javascript function will handle it automatically.


Thanks,

LK



LK

Since you will be see this when you come to work and I will still be sleeping, Here is what I found. 

It works the very first time I enter the page or reset the page. Then after that it stops working and will go to the first button on the page. I have 3 text boxes and several buttons. It works for each text box the first time you enter data then hit the enter key. After that, it will stop working regardless which textbox you enter data.

Almost there except of this minor detail.

Kevin