I am trying to use HTML5 new number control using type="number" with one of my custom fields. I have problem to set the proper ID of the field so the controller will get it properly and store it.

       <apex:page id="wholePage" ... >
       <apex:form >
       <input id="..." type="number" min="0" max="99" value=" {!jobPosition.Number_Of_Seats__c}"/>

How do I create the ID for the input element or use other means to do so?

4 Answers 4


If you want to send the value from the 'native' html input field to the controller you can use the construct with a hidden apex input field, that will hold the value to send it to the controller.


public Integer myNumber { get; set; }

public PageReference saveForm()
    // Just controlling that we get the right number from the page
    System.debug('check myNumber: ' + myNumber);
    return null;


<apex:page id="wholePage">
function saveIt()
    // Getting the value from the html-input and set it to the apex-input
    //Now calling the controller function to save the inputs

    <apex:actionFunction name="saveForm" action="{!saveForm}" rerender="none"/>
    <input id="myInputNumber" type="number" min="0" max="99" value=" {!jobPosition.Number_Of_Seats__c}"/>
    <apex:commandButton value="Save" onclick="saveIt();return false;"  rerender="none"/>
    <!-- The hidden field holds the value of the input field -->
    <apex:inputHidden value="{!myNumber}" id="myHiddenNumber"/>

You can use apex:input component to get user input for a controller property or method that does not correspond to a field on a Salesforce object. Then you can assign value in side the controller.


<apex:input value="{!numDays}" type="number" id="number_of_days"  html-min="0" html-max="264"/> 
  • 2
    Awesome @Ruwantha... The attribute html-min and html-max helped me a lot in apex:input Commented Apr 26, 2016 at 7:34
  • 2
    @RajeshKamath don't forget html-step="1" to keep it as an Integer! Commented Mar 24, 2019 at 15:27

I have managed to find a workaround (but since I am new I can only post my own answer after 8 hours :)). I am using an apex:hiddenField with the actual field and an input type="number" element to get the user input. I am using a change event on the input element and update the real "hidden" field every time it changes.

           <apex:inputHidden id="hNumOfSeats" value="{!jobPosition.Number_Of_Seats__c}"/>
           <input id="numOfSeats"  type="number"   min="0" max="99" value="{!jobPosition.Number_Of_Seats__c}" onchange="populate()" />

                  function populate(){            
                    document.getElementById('{!$Component.hNumOfSeats}').value = document.getElementById('numOfSeats').value;

I will be happy to get some more alternatives.

  • 2
    I ran into this issue and ended up using javascript to add the attribute to the field then switching it back to text before saving so it would save correctly.
    – Phil B
    Commented Jan 29, 2013 at 22:53

I needed to trigger mobile device keyboards but keep the <apex:inputText>, and I couldn't switch to html5. I ended up going with a javascript solution to switch the type="" attribute dynamically. It triggers the mobile keyboards and works well.

Here's the example for the phone field.

<apex:inputText value="{!phone}" styleclass="phone form-input" id="phone"  maxlength="25" html-mobile-input="tel" html-placeholder="Phone *" >

And this is the jquery that sets the mobile type.

    $('input[mobile-input]').each(function() {

And after validation but prior to submission I reassign the input to type=text.


Note, this is essentially the same solution Phil B suggests in his comment to another solution.

You must log in to answer this question.

Not the answer you're looking for? Browse other questions tagged .