Demonstration of using an apex:actionSupport with a "hidden" input

HiddenInputSupportDemo.page

<apex:page standardController="Account">
    <h2>Form</h2>
    <apex:form>
        <apex:inputText id="accountNameInput" styleClass="with-hidden"/>
        <apex:inputText id="accountNameInputHidden"
                        value="{!Account.Name}"
                        style="display:none">
            <apex:actionSupport event="onchange" action="{!quicksave}"
                                reRender="accountNameOutput"
                                status="accountNameStatus"/>
        </apex:inputText>
    </apex:form>
    
    <h2>Output Panel</h2>
    <apex:outputPanel>
        <apex:outputField id="accountNameOutput"
                          value="{!Account.Name}"/>
        <apex:actionStatus id="accountNameStatus">
            <apex:facet name="start">Rerendering...</apex:facet>
        </apex:actionStatus>
    </apex:outputPanel>
    
    <script>
    // Initialize the inputs that have hidden elements
    var withHiddenInputs = document.getElementsByClassName("with-hidden");
    for (var i = 0; i < withHiddenInputs.length; i++) {
        
        // Get the current input element
        var input = withHiddenInputs[i];
        
        // Get the associated "hidden" input element
        var inputHidden = document.getElementById(input.id + "Hidden");
        
        // Add an event handler to the visible input element
        // so that it updates the associated hidden input element
        // and also fires a change event on that hidden input
        input.addEventListener("change", function(event) {
            
            // Log the event
            console.log("event: %o", event);
            
            // Propagate the new value when needed
            if (input.value != inputHidden.value) {
	            inputHidden.value = input.value;
                
                // Fire the change event
                var changeEvent = new Event("change");
                inputHidden.dispatchEvent(changeEvent);
            }
        });
    };
    </script>
</apex:page>