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

Question

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;
    }
}

Answer 1

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.

Answer 2

You are not binding javaScript variable with apex variable that's why you're getting an error. You can directly bind apex variable to <apex:inputText> and and use it in your controller.

From Component Reference for inputText:

An HTML input element of type text. Use this component to get user input for a controller method that does not correspond to a field on a Salesforce object. This component doesn't use Salesforce styling. Also, since it doesn't correspond to a field, or any other data on an object, custom code is required to use the value the user enters. This component supports HTML pass-through attributes using the "html-" prefix. Pass-through attributes are attached to the generated tag.

This can be done without using javaScript. To send Phone Number from VF page to Controller you should try something like this:

Visualforce Page

<div class='form-group'>
           Enter Phone number here:
               <apex:inputText styleclass="form-control" id="phone" value="{!phoneNo}" />
           </div>
        <apex:commandButton styleClass="btn btn-default" value="Submit" id="findPhone" action="{!submit}" Rerender=""/>

And your Controller should be:

public String phoneNo{get;set;}
public PageReference submit() {
        PageReference retURL = new PageReference('/apex/FindCustomer?att='+phoneNo);
        retURL.setRedirect(true);
        return retURL;
    }