0

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.

  • I'm voting to close this as its purely html based one and already been discussed here : stackoverflow.com/questions/469059/… – Vamsi Krishna Feb 5 '16 at 11:24
  • 1
    @VamsiKrishna I totally agree this is offtopic unless it is causing my VF page to refresh. If I ask in other community probably they don't understand. Why this is refreshing page. May be they don't know about salesforce. So I think this is the best place to ask this type of question. – Ratan Paul Feb 5 '16 at 11:29
2

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

|improve this answer|||||
  • ahh good point.. good to know – Ratan Paul May 26 '16 at 7:41
2

<input type="button" /> buttons will not submit a form - they don't do anything by default. They're generally used in conjunction with JavaScript as part of an AJAX application.

buttons will submit the form they are in when the user clicks on them, unless you specify otherwise with JavaScript.

So you are right here that your button submit the form and refresh(rerender)the page.

|improve this answer|||||

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.