Sunday, December 16, 2012

Implementing HTML form Submit action using Javascript

In some scenarios, we might need to integrate HTML content with ADF/Webcenter pages. During this integration, the HTML tags used in HTML page might get conflicted with ADF faces components. Among those, we cannot have two HTML form element on same page. For example, in order to display JSF page with actions, we need to use af:form component on JSF page, which generates HTML form element in run time. In this case, if we are trying to embed a HTML page i.e. having another form element, the page will not get displayed properly, and also some abnormal behavior shown up on web page.
  • ADF popups may display on corner of the screen, instead of center of the screen.
  • Submit functionality may not work in some browsers. 

To overcome this issue, we could try following approach:
  1. Remove form element on HTML page
  2. Add onkeypress event to other HTML tags where submit functionaly requires
  3. Use following JS to perform Submit functionality when user pressed Enter button
Mentioned java script performs following actions.
  • When user entered a value in search box and clicked on Enter button, it will append the search value to URL highlighted in green below and opens Google search page in the same window.
  • If user entered NULL value and clicked on Enter button, it will display a alert to enter a value in search box. 

****************************************************************************************************************   
//added onkeypress event to searchbox in html page
    <input name="q"  type="text" class="searchbox" id="autocomplete" onkeypress="return search(event, this.value);">
****************************************************************************************************************

****************************************************************************************************************
//add following java script to perform search when Enter button is pressed
<script type="text/javascript">
<!--
function search(e, message)
{  
    if (isNotEnter(e))
    {  
          return true;
    }  
    else // pressed enter button
    {  
        // only proceed to search if search box message is not empty
        if (message.length >= 1)
        {  
                var url = 'https://www.google.com/search?q='+message;
                window.open(url,'_self',false);
        }  
       else // if search box message is empty
        {
                alert("You must enter a search value. Please supply a search value and try again.");
         }
        return false;
    }  
}

function isNotEnter(e)
{  
    if (e.keyCode == 13)
    {  
        return false;
    }  
    else
    {  
        return true;
    }  
}
//-->
     </script>
****************************************************************************************************************

No comments:

Post a Comment

Provide your thoughts !