Each submit button calls the same function

Question

I'm calling function for selecting component ID after page refresh:

$(document).ready(
  function() {
    document.getElementById('form:#{myBDE.componentId}').focus();
    document.getElementById('form:#{myBDE.componentId}').select();
  }
)

My submit button example:

<h:form id="form">
  <h:commandButton id="btnSubmit" action="#{myBDE.save}" type="submit" >
    <f:ajax execute="@form" render="@form"/>
  </h:commandButton>
  ...
</form>

How can I create the same function to be called each time I click any submit button (I'm using ajax, so I'm working without page reloading, document.ready is not enough for me). Is it possible?

update (partially functional solution):

var myFunc = function() {
  document.getElementById('form:#{myBDE.componentId}').focus();
  document.getElementById('form:#{myBDE.componentId}').select();
};

$(document).ready(function() {
  myFunc();
  $('input[type=submit]').click(myFunc);    
});

I can call the function adding onclick="return myFunc();" to h:commandButton, problem is, that <f:ajax> render the form after calling the function, so the select and focus is cleared :(

Answer 1

This should work

$('input[type="submit"]').click(function(){ 
  document.getElementById('form:#{myBDE.componentId}').focus(); 
  document.getElementById('form:#{myBDE.componentId}').select();
 });

In fact you can bind a function to any events. In this case it is the click event for the input tag with the attribute type=submit

Answer 2

Give the function a name (currently, its an anonymous function), and then call the function as and when you need.

$(document).ready(
  onPageLoad(); // call it when page loads    
  $('form').submit(onPageLoad); // also call whenever a form is submitted
)

function onPageLoad() {
    document.getElementById('form:#{myBDE.componentId}').focus();
    document.getElementById('form:#{myBDE.componentId}').select();
    return true;
}

Answer 3

You should delegate the handler to a higher-level dom element:

$(document).ready(function() {
  $('h:body').on('click', 'input[type=submit]', function() {
    document.getElementById('form:#{myBDE.componentId}').focus();
    document.getElementById('form:#{myBDE.componentId}').select();
  });    
});

See jQuery.on().

When a selector is provided, the event handler is referred to as delegated. The handler is not called when the event occurs directly on the bound element, but only for descendants (inner elements) that match the selector. jQuery bubbles the event from the event target up to the element where the handler is attached (i.e., innermost to outermost element) and runs the handler for any elements along that path matching the selector.

And then later:

Delegated events have the advantage that they can process events from descendant elements that are added to the document at a later time. By picking an element that is guaranteed to be present at the time the delegated event handler is attached, you can use delegated events to avoid the need to frequently attach and remove event handlers.

So the event will be handled for all elements of that type, even if they are added later via ajax. Note that I used h:body here as the element to delegate to but you can use any element that exists at document.ready time and is guaranteed to be an ancestor of all submit inputs.

Answer 4

If you have different ID or Name on them it's just to do somthing like

$(document).ready(function(){
    $('#btn1, #btn2, #btn3').on('click', function(evt){
        evt.preventDefault();
        //your code
        $(this).submit(); // or not submit, your choice
    });
});

Answer 5

Try this thing

 $(document).ready( function (){

           $('input[type=submit]').click( function (){
                  // Whatever you want on submit button click option.
           }
 });

This will grab every submit button on the page and will bind click event to it, and this code will be called on any submit button click.