[SalesForce] Set Visualforce whoid with jquery

I have recreated the Task Edit page in VF. If I have a contact Id in a jquery variable, how can I set that Id to the Name field so that when the Task record is saved, the correct contact is saved? Obviously, I can't put the Id in the name field…

Task Edit Screenshot

selContact() is fired on a selectList onchange event. I've taken the selected contact's id and put it in the Name field for illustration purposes. My page:

<apex:page standardController="Task" tabStyle="task" extensions="GetContactsOnTaskExtension">
<script type="text/javascript" src="/resource/jQuery_1_8/jquery-1.8.2.min.js"></script>
<script type="text/javascript">
var $j = jQuery.noConflict(); 

function selContact()
{       
    var val = $j("[id$='selContacts']").val();
    $j("[id$='whoid']").val(val);
}

function getParameterByName(name) 
{
    name = name.replace(/[\[]/, "\\[").replace(/[\]]/, "\\]");
    var regex = new RegExp("[\\?&]" + name + "=([^&#]*)"),
        results = regex.exec(location.search);
    return results == null ? "" : decodeURIComponent(results[1].replace(/\+/g, " "));
}
</script>
<apex:form >
    <apex:pageBlock title="Task Edit" mode="edit">
        <apex:pageBlockButtons >
            <apex:commandButton action="{!save}" value="Save"/>
            <apex:commandButton action="{!cancel}" value="Cancel"/>
        </apex:pageBlockButtons>
        <apex:pageBlockSection title="Task Information" columns="2">
            <apex:inputField value="{!Task.ownerid}"/>
            <apex:inputField value="{!Task.whatid}"/>
            <apex:inputField value="{!Task.subject}"/>

            <apex:inputHidden value="{!whoId}" id="whoid"/> 

            <apex:inputField value="{!Task.status}"/>
            <apex:inputField value="{!Task.activitydate}"/>
            <apex:inputField value="{!Task.Call_Date__c}"/>
            <apex:inputField value="{!Task.Upsells__c}"/>
            <apex:inputField value="{!Task.Call_Time__c}"/>
            <apex:inputField value="{!Task.Cross_Sells__c}"/>
            <apex:inputField value="{!Task.priority}"/>
            <apex:inputField value="{!Task.Interaction_Type__c}"/>
            <apex:inputField value="{!Task.description}" style="width:100%;height:100px"/>     
            <apex:selectList id="selContacts" value="{!ContactOptions}" size="1" onchange="selContact()">
                <apex:selectOptions value="{!items}"></apex:selectOptions>
            </apex:selectList>           
        </apex:pageBlockSection>

        <apex:pageBlockSection title="Task Subject" columns="2">
            <apex:inputField value="{!Task.Extracts__c}"/>
            <apex:inputField value="{!Task.Ancillary__c}"/>
            <apex:inputField value="{!Task.Left_Packet_Insert__c}"/>            
        </apex:pageBlockSection>
    </apex:pageBlock>
</apex:form>

My controller extension:

public with sharing class GetContactsOnTaskExtension 
{

    public String accountId {get; set;}
    public String subject {get; set;}
    public String contactId {get; set;}
    public String whoId {get; set;}
    public List<Contact> contacts {get;set;}
    public List<Contact> provContacts {get; set;}
    public List<Affiliation__c> providers {get;set;}
    public List<String> providerIds = new List<String>();

    String[] ContactOptions = new String[]{};

    //TODO
    public Contact contact {get;set;}

    // Constructor
    public GetContactsOnTaskExtension(ApexPages.StandardController controller)
    {
            getParms();

            //setDefaultValues();

            getContacts();

            //TODO
            contact = new Contact();

    }

    // Get URL Parameters
    private void getParms()
    {
            // Account ID
            accountId = System.currentPageReference().getParameters().get('what_id');

            // Owner ID
            //whoId = System.currentPageReference().getParameters().get('who_id');

            // Subject
            //subject = System.currentPageReference().getParameters().get('subject');
    }

    // Main
    private void getContacts()
    {
            if (null!=accountId)
            {
                    getBusinessContacts();

                    getProviderContacts();

                    addProviderContacts();
            }
    }

    // Get contacts under the Business account
    private void getBusinessContacts()
    {
            contacts =
            [
                    SELECT id,Name,FirstName, LastName 
                    FROM Contact 
                    WHERE AccountId = : accountId
            ];
    }

    // Get Provider contact records affiliated with this account
    private void getProviderContacts()
    {       
            // Get Accounts 
            providers =
            [
                    SELECT Provider_Account__c // Provider_Account__c is a formula field on Affiliation
                    FROM Affiliation__c 
                    WHERE Account__c = : accountId
            ];

            // Set list of Person Account Id strings for contact query
            for (Affiliation__c aff : providers)
            {
                    providerIds.add(aff.Provider_Account__c);
            }

            // Query contact records
            if (providerIds.size() > 0)
            {
                    provContacts =
                    [
                            SELECT Id, FirstName, LastName, Name
                            FROM Contact
                            WHERE AccountId IN : providerIds
                    ];
            }
    }

    // Add provider contacts to contacts list
    private void addProviderContacts()
    {
            for (Contact cnt : provContacts)
            {
                    contacts.add(cnt);
            }
    }

    public List<SelectOption> getItems() 
    {
        List<SelectOption> options = new List<SelectOption>();

        options.add(new SelectOption('', '--None--'));

        for (Contact cnt : contacts) 
        {
            options.add(new SelectOption(cnt.Id, cnt.Name));
        }
        return options;
    }

    public String[] getContactOptions() 
    {
        return ContactOptions;
    }

    public void setContactOptions(String[] ContactOptions) 
    {
        this.ContactOptions = ContactOptions;
    }      
}

Added save method:

public pageReference saveTheTask()
    {
        Task newTask = new Task();

        newTask.WhoId = items; // Not sure this is right
        newTask.WhatId = Task.whatid; // compile stops here: Illegal assignment from Schema.SObjectField to Id
        newTask.Status = Task.status;
        newTask.Priority = Task.priority;

        insert newTask;

        return null;
    }

Best Answer

If you have Id in a Jquery variable.

Add a hidden inputfield in the existing <apex:form> and assign id to its value attribute.

Ex:

<apex:inputHidden value="{!contactId}" id="whoid"/>

script

function selContact()
{ 
    // assuming "val" contains id      
    var val = $j("[id$='selContacts']").val();
    $j("[id$='whoid_lkid']").val(val); // this will assign id
}