How can I submit tr:inputText javascript when enter is pressed

Question

Currently, my tr:inputText can only submit once the button is pressed. I am trying to get it to also submit when I hit the enter button on the input text. It appears to try to listen but it isn't. Any help would be much appreciated.

At first, I have tried to use in built Trinidad functionality to make this happen but now I am trying to use JavaScript to make this happen. What should I do?

<SCRIPT LANGUAGE="JavaScript">  
      function enter(event) {
          var acctNumber = document.getElementById('acctNumber');
          acctNumber.addEventListener('keypress', function enter(event))
           {
              if (event.keyCode == 13) {
               
                     <!-- document.getElementById('Search').click();-->
                   <!--   document.send.submit();    -->
                   submitForm();
                  }
          }
      }

   function submitForm() {
    $('#send').submit();
   }
   
   </SCRIPT>
   
 <ui:composition template="#{processPanelLayoutManager.layoutTemplate}">

  <ui:define name="processTitle">  
  </ui:define>
  <ui:define name="processPanel">
   <tr:form usesUpload="true" id="send" >
    <trh:tableLayout width="100%" cellPadding="10" borderWidth="0"
     id="Table">

     <trh:rowLayout>
      <trh:cellFormat columnSpan="4">
       <ocau:inlineMessage />
      </trh:cellFormat>
     </trh:rowLayout>
         
     <tr:panelBox styleClass="roundedPanelPrimary">
       <trh:rowLayout halign="center">
       <trh:cellFormat halign="center">        
        <tr:inputText styleClass="tabdata" contentStyle="normalContent"
           id= "acctNumber"
         label="Account Number"
         type="enter" 
         value="#{fraudSearch.fraudCustomerReqtUIModelBean.accountNumber}"
        >
                                
          </tr:inputText>

       </trh:cellFormat>
       
       <trh:cellFormat halign="left">
        <tr:commandButton text="Search" id="Search"
         action="#{fraudSearch.getIBSNotesData}" styleClass="Button"
         halign="center"
        
         >
         </tr:commandButton>
       </trh:cellFormat>       
      </trh:rowLayout>      
     </tr:panelBox>

     <tr:panelBox styleClass="roundedPanelPrimary"
      rendered="#{fraudSearch.displaySearchResults}">
      <trh:tableLayout cellPadding="10" borderWidth="0" id="Table"
       width="100%">
       <trh:rowLayout>
        <tr:panelTabbed position="above" inlineStyle="width:auto">

         <tr:showDetailItem text="IBS Data Extract" id="IBSDataExtract"
          immediate="true">
          <ui:include
           src="/pages/recovery/fraud/displayFraudRPAIBSDataExtract.jspx">
          </ui:include>
         </tr:showDetailItem>
         <!--  
         <tr:showDetailItem text="Non-Monetary Data" id="IBSNonMonData"
          immediate="true">
          <ui:include
           src="/pages/recovery/fraud/displayFraudRPANonMonetaryData.jspx">
          </ui:include>
         </tr:showDetailItem>
         -->
        </tr:panelTabbed>
        
        
        
        
       </trh:rowLayout>
      </trh:tableLayout>
     </tr:panelBox>
    </trh:tableLayout>


   </tr:form>
   
  </ui:define>

 </ui:composition>
 <script language="javascript">
  document.forms["send"].focus();
 </script>

Answer 1

Your event listener seems to have incorrect syntax; you have the second bracket after the event argument rather than after the block's closing curly brace.

You also have HTML comments inside your script tags -- change these to JS compatible comments.

I have amended this in this codepen and the event listener is working.

And with your original script:

<SCRIPT LANGUAGE="JavaScript">  
      function enter(event) {
          var acctNumber = document.getElementById('acctNumber');
          acctNumber.addEventListener('keypress', function enter(event)
           {
              if (event.keyCode == 13) {
               
                   // document.getElementById('Search').click();
                   // document.send.submit();  
                   submitForm();
                  }
          });
      }

   function submitForm() {
    $('#send').submit();
   }
   
   </SCRIPT>

Further, there are a few things I would suggest you look into to avoid such issues in the future:

• Check the console log; this error was highly visible
• Use strict equality (===) where possible to avoid unneeded errors
• Run your code through a linter