1

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;
    }
}
  • Trying to pass phone number from vf page to the controller. – venky Mar 23 '17 at 9:05
  • You never assign the phone variable to a parameter. – Martin Lezer Mar 23 '17 at 9:07
  • You can use actionFunction to pass the value to controller from JavaScript – Raul Mar 23 '17 at 9:08
2

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.

| improve this answer | |
0

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;
    }
| improve this answer | |
  • I am creating a custom visualforce field, which is not available in the object and couldn't use apex:inputText tag – venky Mar 23 '17 at 9:17
  • @venky <apex:inputText> is not bind to any object. You can directly use it by binding any apex variable to it. <apex:inputField> are bound to object. See Component reference – Rohit Mourya Mar 23 '17 at 9:19
  • @venky, added another answer which is another version as rohit's but which supports apex:input. – Raul Mar 23 '17 at 9:49

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.