So my task is to get two dates from user and based on that do some fancy logic which will result in creation of table with data requested.

To begin with i wanted to create small VFpage with two input fields and button. Clicking on button would reload part of the page and populate it with the table filled with data.

My problem is that after i provide dates i do not see them moved to controller and i do not know if they should be or is set method only triggered at begining of the page load?

Here is Page:

<apex:page controller="pageGenerator" docType="html-5.0">
    <apex:form >
         <script>
            function sideSetter()
            {
                dataSetter();
                document.getElementById('{!$Component.mainform.mainBlock.mainDisplay}').innerHTML = '{!mainTableArea}';
            }
        </script>
        <apex:actionFunction name="dataSetter" action="{!dataSetter}" rerender="mainform.mainDisplay"/>
    </apex:form>
    <apex:form id="mainform">
        <apex:pageBlock title="dynamictest" id="mainBlock">
            <apex:pageBlockSection title="Filters" id="mainWork" columns="1">
                <apex:input title="Start date" label="Start date" type="date" value="{!startDate}"/>
                <apex:input title="End date" label="End date" type="date" value="{!endDate}"/>
                <apex:commandButton value="Generate" onclick="sideSetter();" rerender="mainform.mainDisplay"/>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="renderedpart" id="mainDisplay">
                Nothing yet....
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>    
</apex:page>

and here is controller:

public class pageGenerator
{

    // VF page variable
    public String mainTableArea {get;set;}
    public Date startDate {get;set;}
    public Date endDate {get;set;}

    public pageGenerator()
    {
        mainTableArea = 'nnothing';
    }
    
    // Display logic
    public PageReference dataSetter()
    {
        setMainTableArea( String.valueOf(startDate) + ' ' + String.valueOf(endDate) );
        system.debug( MainTableArea + ' ' + String.valueOf(startDate) + ' ' + String.valueOf(endDate) );
        
        return null;
    }
    
    private void setMainTableArea( String theString )
    {
        this.mainTableArea = theString;
    }
}

the second set class is result of me trying to establish what is wrong. What i want to see is after i put some date in inputfields and clikc the button i want the bottom block to be rerendered with the dates i provided. From there i think i can handle rest. But for some risen endDate sometimes is geting it value saved when startDate and mainTableArea do not get change. and i always get nnothing there instead of what i want.

May i please get explentation on why is that? Is my understanding of get and set methods wrong? How to make the values move and to show what i need in there ?

Update 28.02.2019

I managed to make part of the page change as i wish it to and now my function is triggering. But what stopped working is that now date field again do not provide values to controller. So i end up always with same defoult valuesi set up in controller. Any idea what could cause that?

New code! Page:

<apex:page controller="pageGenerator" docType="html-5.0">
    <apex:form>
        <apex:actionFunction name="setData" action="{!dataSetter}" rerender="mainform"/>
    </apex:form>           
    <apex:form id="mainform">
        <apex:pageBlock title="dynamictest" id="mainBlock">
            <apex:pageBlockSection title="Filters" id="mainWork" columns="1">
                <apex:input title="Start date" label="Start date" type="date" value="{!startDate}"/>
                <apex:input title="End date" label="End date" type="date" value="{!endDate}"/>
                <apex:commandButton value="Generate" onclick="setData(); return false;" rerender="mainform.mainBlock.mainWork"/>
            </apex:pageBlockSection>
            <apex:pageBlockSection title="renderedpart" id="mainDisplay">
                {!mainTableArea}
            </apex:pageBlockSection>
        </apex:pageBlock>
    </apex:form>    
</apex:page>