Get text input value with the help of HTML and pass it to controller

Question

I have designed my VF UI using HTML.

I have a doubt, is it possible to get a Value in HTML (Input Type:Text) box and pass it to controller ?

Please find the codes below

My current VF page declaration

<td><input type="text" value="{!strSearchList}" placeholder="Search Knowldege" id="IDTextInput"/> </td>

This 'strSearchList' value is actually set in my Custom controller as

 public String strSearchList {set;get;}

When i am trying to use

<apex:inputtext value="{!strSearchList}" >

the value is getting passed to my controller from VF page with out any issue.

But, when i use the HTML and pass my value it doesn't seem to be working. I need to use only the HTML because of my UI requirement.

Please give me some ideas.

Thanks for your time.

Answer 1

Using HTML <input> doesn't automatically bind the field to the variable in your controller. It'll only output the current value in your input on page load and that's all. You'll have to explicitly pass the value back to the controller either by an <apex:actionFunction> with a parameter (called from a JS event on the input, e.g. onBlur or on click of a button) if you also need to execute some other functions:

<apex:actionFunction action="{!setParam}" name="setParam">
    <apex:param name="yourVariable" value="" assignTo="{!yourVariable}"/>
</apex:actionFunction>

<input type="text" value="{!yourVariable}" onblur="setParam(this.value);" />

Or you can use <apex:inputHidden> and set it's value with JavaScript:

<apex:inputHidden value="{!yourVariable}" id="myHiddenVar" />

<input type="text" value="{!yourVariable}" onblur="document.getElementById('{!$Component.myHiddenVar}').value = this.value;" />

Another option is to use JavaScript Remoting.

There might be some typos in the code above but with minor fixes you can get going.

Answer 2

The <input> tag is getting rendered without vf ids, so it doesn't look like it will be processed by the controller.

<input type="text" value="{!Account.Name}" placeholder="Search Knowldege" id="IDTextInput"/>
<br/>
<apex:inputText value="{!Account.Name}" />