When pressing enter on popup the submit buttons on landing page gets triggered

Question

I have a page with two submit buttons which also opens up a popup (id : addPopup) having another submit button. Whenever Enter is pressed on the popup the first submit button on the landing page is triggered, however I want to invoke the button on the popup instead. This is the code for the Submit button on popup:

<a4j:commandButton id="continueButton" styleClass="btn btn-primary"  
                    value="Continue" 
                    action="#{optionsController.continue()}"
                    render="menuPanel addSection addOptionsPanel"
                    oncomplete="if(#{empty facesContext.messageList})#{rich:component('addPopup')}.hide();"
                    disabled="#{empty optionsController.addParcelId and  empty optionsController.addGridReference}"  />

I have tried using richfaces hotkey, but it doesn't work and the page gets submitted

<rich:hotKey selector="#addPopup" enabledInInput="true" key="return" preventDefault="true"/>

Also have tried using

<script type="text/javascript">
$(document).bind('keydown', 'Return', function(e){
        key  = e.keyCode;
        if(key == 13){
            var continueBtn = document.getElementById('continueButton'));               
            continueBtn.click();
    }

});

but this does not work either. Any suggestions on what I am doing wrong or any other approach that might work?

Answer 1

I managed to handle the enter key by using this script:

<script type="text/javascript">
$(document).bind('keydown', 'Return', function(e){
        key  = e.keyCode;
        if(key == 13){  // Enter key pressed
            // Get button binding from backing bean.        
            var continueBtn = document.getElementById("#{optionsController.continueButton.clientId}");                 
            if(!continueBtn.disabled){
                continueBtn.click();
            }
            return false;
        }  
});  

Also added the binding for the continueButton in the backing bean, along with getter and setter

Answer 2

Try to have the popup-content rendered in an own <h:form> , this way the Enter will trigger the form you are currently in.

<rich:popupPanel id="loginPopup" show="true">
    <h:form id="login" class="compact-form clearfix">

    </h:form> 
</rich:popupPanel>

Within the rich:popupPanel , you can decide via the attribute domElementAttachment where the popup has to be attached.

Hope it helps...