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:
$(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:
Meanwhile if you want to disable the "Enter" key event, use below code:
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
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,
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.
Definitely, that totally depends on you to perform the type of action as per requirement.
Please find attached oml.
Regards,
Lakshmi Kumar
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?
Hey Kevin, good to hear that it is useful to solve your problem.
Please mark the appropriate post as solution.
Regard's
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.
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
It is traditional. Again thanks for your help. This is the last issue I have before publishing to Production.
attached is the updated oml.
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
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.
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.