function readOnly(count){ }
Starting November 20, the site will be set to read-only. On December 4, 2023,
forum discussions will move to the Trailblazer Community.
+ Start a Discussion
justin_sfdcjustin_sfdc 

How to get the value using html input tag to a controller?

Hi everyone,
I am currently designing a vf page where I am using html input tag but I am not sure how to pull that value into the controller. If I use <apex:inputText> component it works but I want to use html input tag in the vf page rather. Below is a simple example of what I want to do. If there is a textbox and a button then how do I retrieve that value in a controller when the button is clicked.

VF Page:
<input type="text" name = "name"/>
<input type= "submit" value = "submit"/>

Controller:
public string name {get; set;}

public void submit() {
   System.debug('The value entered for name is: '+ name);
}

Any help is appreciated.

Thanks!
Best Answer chosen by justin_sfdc
justin_sfdcjustin_sfdc
Hi guys,
I was able to get the value. Sharing it so that it might help someone who might be in need:
<!-------------- VF page ------------------->
<apex:page standardController="Account" extensions="actionFunctionTestController">
    <script type="text/javascript">
        function callActionFunction() {
            var n = document.getElementById("input1").value;
            afunction(n);
        }
    </script>

    <apex:form id="aform1">
        <apex:pageBlock title="Test Page" id="pb1">         
            <label> Name </label>
            <input type="text" id="input1" name="input1"/>
            <button type="submit" onClick="callActionFunction();return false;">Click Me! </button>
            <apex:actionFunction name="afunction" action="{!receiveInput}" onComplete="alert('Completed');">
                <apex:param id="aname" name="input1" value="" />
            </apex:actionFunction>
         </apex:pageBlock>
    </apex:form>
</apex:page>

<!———————Controller —————————>
public with sharing class actionFunctionTestController {
    public actionFunctionTestController(ApexPages.StandardController controller) {
    public void receiveInput() {
       String input1=Apexpages.currentPage().getParameters().get('input1');
        system.debug('==Entered the Controller: '+ input1);
    }
}

All Answers

Chamil MadusankaChamil Madusanka
<apex:page controller="testHTMLController">
  <apex:form >
  <input type="text" name = "name" value="{!name}"/>

<apex:commandButton value="submit method" action="{!submit}"/>
  </apex:form>
</apex:page>
public with sharing class testHTMLController {

public string name {get; set;}

public void submit() {
   name='chamil';
}
}

Try this. I this what you want?
 
justin_sfdcjustin_sfdc

Hi Chamil,
Thanks for the reply.
Actually, I am also using html button tag rather than <apex:commandbutton>
I am trying this in a simple example below:
<!--------Visualforce page----------->
<apex:page standardController="Account" extensions="actionFunctionTestController">
    <script type="text/javascript">
        function callActionFunction(v1) {
            alert('javascript' + v1);
            var val1;
            val1 = document.getElementById(v1).value;
            alert(val1);
            afunction1(val1);
        }
    </script>
    
    <apex:form id="aform1">
        <apex:pageBlock title="Test Page" id="pb1">         
            <label> Name </label>
            <input type="text" id="input1" name="input1"/>
            
            <button type="submit" onClick="callActionFunction('{!$Component.aform1.pb1.input1}');return false;">Click Me! </button>
            
            <apex:actionFunction name="afunction" action="{!receiveInput}">
                <apex:param name="firstparam" assignTo="{!input1}" value=""/>
                <!--apex:param name="secondparam" assignTo="{!Num2}" value=""/-->
            </apex:actionFunction>
         </apex:pageBlock>
    </apex:form>
</apex:page>

<!----------Controller--------------->
public with sharing class actionFunctionTestController {
    public actionFunctionTestController(ApexPages.StandardController controller) {}
    public void receiveInput() {
        string passedParam1 = Apexpages.currentPage().getParameters().get('myParam');
        system.debug('==Entered the Controller: '+ passedParam1);
    }
}
 

justin_sfdcjustin_sfdc
Hi guys,
I was able to get the value. Sharing it so that it might help someone who might be in need:
<!-------------- VF page ------------------->
<apex:page standardController="Account" extensions="actionFunctionTestController">
    <script type="text/javascript">
        function callActionFunction() {
            var n = document.getElementById("input1").value;
            afunction(n);
        }
    </script>

    <apex:form id="aform1">
        <apex:pageBlock title="Test Page" id="pb1">         
            <label> Name </label>
            <input type="text" id="input1" name="input1"/>
            <button type="submit" onClick="callActionFunction();return false;">Click Me! </button>
            <apex:actionFunction name="afunction" action="{!receiveInput}" onComplete="alert('Completed');">
                <apex:param id="aname" name="input1" value="" />
            </apex:actionFunction>
         </apex:pageBlock>
    </apex:form>
</apex:page>

<!———————Controller —————————>
public with sharing class actionFunctionTestController {
    public actionFunctionTestController(ApexPages.StandardController controller) {
    public void receiveInput() {
       String input1=Apexpages.currentPage().getParameters().get('input1');
        system.debug('==Entered the Controller: '+ input1);
    }
}
This was selected as the best answer
Sujeet PatelSujeet Patel
thanks justin_sfdc