Possible to call a javascript and action function from click

Question

I want to call a Javascript function as well as issue a backend call at the moment a button is clicked.

This is my code right now :

<apex:commandButton value="Search" action="{!objectCollection}" style="margin-left:10px" reRender="source_search">
 <apex:param name="source" value="true"/>
 <apex:param name="target" value="false"/>
</apex:commandButton>

Is this possible?

Answer 1

Yes, you can.

You can use the onclick attribute like below.

<apex:commandButton value="Search" action="{!objectCollection}" 
  onclick="callJSFunc()" 
  style="margin-left:10px" reRender="source_search">
  <apex:param name="source" value="true"/>
  <apex:param name="target" value="false"/>
</apex:commandButton>

UPDATE

Based on your comments below, you want to call both JavaScript and Controller's function only if the input is valid. You can achieve this with following code:

<apex:commandButton value="Search" action="{!objectCollection}" 
  onclick="if(!isInputValid()){return false}else{callJSFunc()}" 
  style="margin-left:10px" reRender="source_search">
  <apex:param name="source" value="true"/>
  <apex:param name="target" value="false"/>
</apex:commandButton>

The idea is that the isInputValid() is also a JS function that will validate the input and return true if everything is valid, and false if the input is invalid. If the isInputValid() returns false, neither the controller's function, nor your JavaScript function in the else statement will get called.