Sign up ×
Salesforce Stack Exchange is a question and answer site for Salesforce administrators, implementation experts, developers and anybody in-between. It's 100% free, no registration required.

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?

share|improve this question

4 Answers 4

up vote 4 down vote accepted

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"/>
share|improve this answer
Thanks, I just read your answer – Uri Jan 28 '13 at 15:20

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.

share|improve this answer
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 Jan 29 '13 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.

share|improve this answer

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"/> 
share|improve this answer

Your Answer


By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.