Tabs, Inputs, Ajax Submit, and ENTER KEY

Tabs, Inputs, Ajax Submit, and ENTER KEY

  

I need some advice on how to make 2 different Buttons (Ajax Submit) to both work with the ENTER KEY.

Scenario - I have a page with:

  1. A tab widget with 2 different tabs
  2. Each tab has a set of fields that are used as a "search" input
  3. Each tab has an Ajax Submit button that sends the inputs from the given tab to a different screen action
  4. IF the user clicks the ENTER KEY on when on the 1st tab, the 1st Ajax Submit button is activated - which is GOOD!
  5. However, IF the user clicks the ENTER KEY when on the 2nd tab, the 1st Ajax Submit button is activated as well (instead of the 2nd button on the 2nd tab) - which is BAD!


Back in the day, I would use 2 different forms that would each have a submit button that would end up targeting the correct button.


Soooo ... how do I make sure that the ENTER KEY activates the Ajax Submit button on the tab that is currently in focus?



Solution

Hi Bruce,

If you take the content of your tabs and put them in web blocks with each button linked to the action you want to trigger set to the default button, this should work fine.

The problem is the enter key is still triggering the default action which is tied to the first ajax submit button, because its set to the default button.

I've attached an OML of the behavior I *think* you are trying to reproduce.

Let me know if this helps.

Justin

Solution

Ah ... yes I think that will work - but since I have a bunch of local variables, RichWidgets\Tabs_ClientSide, Content\SectionExpandable involved ....

I can't just drag them into the WebBlock ... I have to tweak them to be standalone I guess and THEN drop the new weblocks into the page.


Thanks - I think I got it but will take me a bit to adjust.

Cool. Let me know if this gives you any more trouble.

okay Justin - it's official ... putting the SectionExpandable widgets into their own weblock did it!!

And actually, it was surprisingly fast --- cut/paste, tweak tweak and I had both tabs containing two SectionExpandables each all moved and tested in about 30 minutes!


Best of all - it works! 

Now users on the WEB can type and Click-or-Enter to search!

Now users on mobile devises can type and Tap-or-Go to search!


Thanks again for the super fast response! you rock.