[SalesForce] getting null value in apex controller, when passing parameter from javascript

Hi I am trying to pass a field value from javascript code to apex controller. However I tried to pass value in multiple ways, I am still getting null value in the controller.

Here is my Code:

VF Page:

<apex:page controller="phone" docType="html-5.0" >
<script type="text/javascript">
function myPhone(){
    var phn=document.getElementById("phone").value;
    alert(document.getElementById("phone").value);
}
</script>
    <apex:form >
           <div class='form-group'>
           Enter Phone number here:
               <input class="form-control" type="text" id="phone" placeholder="Phone" />
           </div>
        <apex:commandButton styleClass="btn btn-default" onclick="myPhone()" value="Submit" id="findPhone" action="{!submit}" Rerender=""/>    
    </apex:form>
</apex:page>

Controller:

public without sharing class phone {

    public PageReference submit() {

        String phone = Apexpages.currentPage().getParameters().get('phn');
        system.debug('**********'+phone);
        PageReference retURL = new PageReference('/apex/FindCustomer?att='+phone);
        retURL.setRedirect(true);
        return retURL;
    }
}

Best Answer

If you want to strictly use apex:input instead of apex:inputText, You can use apex:actionFunction.

Removed submit action from apex:commandButton and added it to action which is being called from JavaScript:

<apex:outputPanel id="dummy"/>

<apex:commandButton styleClass="btn btn-default" onclick="myPhone()"  
    id="findPhone" 
    action="{!submit}" 
    rerender="dummy"/>    

<apex:actionFunction action="{!submit}" 
    name="submitActionFunction" reRender="">
    <apex:param name="phn" value="dummy"/>
</apex:actionFunction>

Invoke the actionFunction from JavaScript which would call your submit method, make sure to pass the parameter:

<!-- JavaScript Code -->
<script type="text/javascript">
    function myPhone(){
        var phn=document.getElementById("phone").value;
        // alert(document.getElementById("phone").value);

        // calling actionFunction
        submitActionFunction(phn);
    }
</script>

Note: You should rerender something, I had expected different issues over the past.