Hello Techies, 
I have a requirement, I need to pass the value of the few <apex:inputfield> to the controller. I have written code as below, 
<apex:page docType="html-5.0" standardController="Account" extensions="ComplaintQualityController" >
   <script type="text/javascript">
    function Callmefunc()
   {
   alert('test'); 
       
   var dg = document.getElementById('{!$Component.form1.division1}').value;
       alert(dg);
   var pg = document.getElementById("{!$Component.form1.divisiongrp}").value;
       alert(pg);
   var di = document.getElementById("{!$Component.form1.dateId}").value;
       alert(di);
  Var oi=document.getElementById({!$Component.form1.ownerid}").value;   
      alert(oi);

   searchnow(dg,pg,di,oi);
   }
    
    </script>
     <apex:pageBlock >
        <apex:form id="form1" >
    <apex:actionFunction name="searchnow" action="{!search}" oncomplete="alert('called successfully');" reRender="recordsection"  >
                 <apex:param name="divparam"  value=""  />
                <apex:param name="divgrpparam" value=""  />
                <apex:param name="dateparam" value=""  />
                <apex:param name="ownerparam" value=""  />
            </apex:actionFunction>
    <ul style="list-style-type: none">
        <li>
           <span class="txt"> Division </span>
           <apex:inputField style="width:50px" id="division1" value="{!cc.GC_Division_Descr__c}"/>
        </li>
        <li>
           <span class="txt"> Product Group</span>
            <apex:inputField style="width:100px" id="divisiongrp" value="{!cc.GC_Prdt_Group_Descr__c}" />           
        </li>
       <li>
        <span class="txt">Status</span>
           <apex:selectList style="width: 150px" size="1" value="{!status}">
               <apex:selectOptions value="{!lststatus}"/>
           </apex:selectList>
        </li>
        <li>
        <span class="txt">Origin</span>
        <apex:selectList size="1" value="{!Origin}"> 
            <apex:selectOptions value="{!lstorigin}"/>
        </apex:selectList>
        </li>
        <li>
        <span class="txt">Date</span>
        <strong>    <apex:inputField id="dateId" value="{!cc.Agent_Modified_Date__c}" /></strong>
            
        </li>
        <li>
         <span class="txt">Priority</span>
            <apex:selectList size="1" value="{!priority}">
                <apex:selectOptions value="{!lstpriority}"/>
            </apex:selectList>
        </li>
        <li>
        <span class="txt">CaseRecordType</span>
            <apex:selectList style="width:100px" size="1" value="{!rectype}">
                <apex:selectOptions value="{!lstrectype}"/>
            </apex:selectList>
        </li>
        <li style="display : inline-block" >
        <span class="txt">CaseOwner</span>
           
            <strong>  <apex:inputField required="false" id="ownerid" value="{!cc.Ownerid}"/>
               
              
           
              </strong>
          
            
        </li>
        <li>
                                <apex:actionStatus id="actStatusId" >
                        <apex:facet name="start" >
                          <img src="/img/loading.gif" />                    
                        </apex:facet>
                    </apex:actionStatus>
                    &nbsp;
            <apex:commandButton value="search1" reRender="recordsection"
                                onclick="showSpinner(); Callmefunc();" oncomplete="stopspinner()" />
            

</apex:page>

On the controller side
public class ComplaintQualityController {
public string division;
public string divisiongroup;
    public string assigndate;
    public string getownerdetails;
 public ComplaintQualityController(apexpages.StandardController cont){
      recordId =apexpages.currentpage().getparameters().get('id');
        account acc = new account();
        case cc = new case();
   }
public void search(){
      
       division = Apexpages.currentPage().getParameters().get('divparam');
       divisiongroup =Apexpages.currentPage().getParameters().get('divgrpparam');
       assigndate =Apexpages.currentPage().getParameters().get('dateparam');
       getownerdetails =Apexpages.currentPage().getParameters().get('ownerparam');
          system.debug('values are 1--'+division +'2--'+divisiongroup +'3--'+assigndate+'4--'+getownerdetails );
      //  cont = null;
        //getlstcases();
        
    }
}


The page gets reloaded when ever I click search button.. Please help to fix the issue. 
Thank you in advance.