Visualforce: Pass inputHidden value to controller variable

Question

I am attempting to use jQuery autocomplete to pass values to my controller. Autocomplete doesn't seem to work with apex:inputField so I am forced to use an html input. The problem is I can't seem to be able to properly get the value inside the input.

The auto complete is working and will populate with values test value,Test 2

I have a string variable hidden {get; set;} in my controller. I want to grab whatever is entered in the input with Id apiName and save that in my controller variable called hidden

<apex:page standardController="Object__c" extensions="ctrl">

    <script src="https://code.jquery.com/jquery-1.8.2.js"></script>
    <script src="https://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
    <link rel="stylesheet" href="https://code.jquery.com/ui/1.9.1/themes/base/jquery-ui.css"/>
    <script type="text/javascript">
        //Create a new variable j$ just to avoid any conflicts with other libraries which may be using $.
        var j$ = jQuery.noConflict();
        //Capture the list of countries in a Array.
        var myVar = ['test value','Test 2'];
        //on Document ready
        j$(document).ready(function(){
            j$("#apiName").autocomplete({
                source : myVar
            });
        });
    </script> 

     <script type="text/javascript">
      function setHidden() {
        var hiddenRep = document.getElementById('theHiddenInput');
        hiddenRep.value = document.getElementById('apiName').value;
      }
    </script>

  <apex:form >
      <apex:pageBlock >
          <apex:pageBlockButtons location="top">
              <apex:commandButton value="Save" action="{!save}" onclick="setHidden();"/>
          </apex:pageBlockButtons>

          <apex:pageblockSection >    
                <input id="apiName"/>
                <apex:inputHidden value="{!hiddenValue}" id="theHiddenInput"/>
          </apex:pageblockSection> 

      </apex:pageBlock>
  </apex:form>
</apex:page>

Answer 1

Visualforce creates a special hierarchy of Ids to ensure a unique Id for every element (take a look via the Chrom Dev Console to see what I mean - so getElementbyId doesn't usually work.

If you are already using jQuery, I would use that to do what you need e.g.

function setHidden() {
       j$("[id*='theHiddenInput']").val(j$("[id*='apiName']").val());
      }