Take the 2-minute tour ×
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.

       //Code
       <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
add comment

2 Answers

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

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()" />

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

I will be happy to get some more alternatives.

share|improve this answer
1  
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
add comment

Your Answer

 
discard

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.