How do display an input type="number" using VisualForce

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.

Class:

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;
}

Page:

<apex:page id="wholePage">
<script>
function saveIt()
{
    // Getting the value from the html-input and set it to the apex-input
    jQuery('[id$=myHiddenNumber]').val(jQuery('#myInputNumber').val());
    //Now calling the controller function to save the inputs
    saveForm();
}
</script>

<apex:form>
    <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"/>
</apex:form>
</apex:page>

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.

Ex:

<apex:input value="{!numDays}" type="number" id="number_of_days"  html-min="0" html-max="264"/> 

Tags:

Visualforce