TypeError: object is not a function, when it is!

Question

I am having trouble with some Ajax functionality.

I have a single dropdown that needs to update a record when the option changes. Here is a snippet of the Javascript:

function changeResponsibleParty(selectObj, targetDiv){
    var idx = selectObj.selectedIndex;
    var which = selectObj.options[idx].value;
    target = document.getElementById(targetDiv);
    target.value = which;
    document.forms["changeResponsibleParty"].submit();
}

And the HTML:

<form name="changeResponsibleParty" action="javascript:changeResponsiblePartyAjax('project_todos');" method="post" style="display:inline;">

<input type="hidden" name="todo_id" id="todo_id_15" value="15" />
<input type="hidden" name="project_id" id="project_id_15" value="2" />
<input type="hidden" name="user_id" id="user_id_15" value="" />

<select name="user_id_pick" id="user_id_pick_15" onchange="changeResponsibleParty(this, 'user_id_15');" style="border:0;">

<option value="0">Anyone</option>
<option value="1" selected="selected">Allen McCabe</option>
<option value="2">Thomas Martinez</option>
</select>
</form>

I am using the function to update a hidden input element because for some reason, the tag was posting 1 regardless of which option I chose (1 is my user_id, which I set as selected if the database record value is 1.

Can anyone see what is wrong here?

Answer 1

You use changeResponsibleParty as name for the form and also as name for the function, which will cause conflicts. Rename one of them.