[SalesForce] Difference behavior with input button and button tag in VF page

I have created two VF page.

  1. With input type button

  2. With button tag like below

First VF page

<apex:page controller="testVFPageCtrl">
    <apex:form id="frm">
        {!string1}
        <input type="button" onclick="actionFunction();" value=" click here " class="btn"/>
        <apex:actionFunction name="actionFunction" action="{!testCallMethod}" rerender="frm"/>
    </apex:form>       
</apex:page>

Second VF page

<apex:page controller="testVFPageCtrl">
    <apex:form id="frm">
        {!string1}
        <button onclick="actionFunction();"  class="btn"> click here </button>
        <apex:actionFunction name="actionFunction" action="{!testCallMethod}" rerender="frm"/>
    </apex:form>       
</apex:page>

For both controller 

public class testVFPageCtrl 
{
    public String string1 {get; private set;}

    public testVFPageCtrl()
    {
        string1 = '-----inside controller----';
    }
    public void testCallMethod()
    {
        string1 = '-----inside test call method----';
        system.debug('=========method called=====');
    }
}

So when I click on input Type button then page doesn't load simply rerender the form.

But when I Click on button tag. first it call the method i.e. testCallMethod then page reloaded and my all variable reinitialize.

Just wanted to know why input button and button tag behave differently here.
And what is the reason button tag reload the page

As per my understanding looks like button tag try to submit the form.

Best Answer

The second VF page has "button" tag. But you didn't specify the type of the button. "button" tag has attribute "type", "type" attribute has 2 values

  1. type="button"
  2. type="submit"
  1. It will not submit the form, just calls the events if it has, in your case it will just call actionFunction() method
  2. It will call actionFunction() method and submits the form.

If you don't specify the type attribute, each browser handles it differently. You can refer here

Related Topic