Use jQuery to get values of dropdownlists in an html table column for each row

Question

Hi All,

I have a requirement to build a simple html table of memos. The table consists of n-rows each with 2 columns: (1) a dropdownlist of types of memos and (2) the text of a memo - a textbox.

I have successfully implemented jQuery to allow the user to Add a new row. That entails the selecting of a type of memo and then typing something into the textbox.

I've also implemented jQuery to allow the user to mark a memo row for deletion.

This is a partial view and the Save is handled by a container page.

Requirements stipulate that there can be only one type of memo in the table. What I would like to be able to do is this: When the user clicks the Add button to add a new row (after having selected the memo type and entered some text into the textbox) I want the code to first examine each row in the table getting the value for each memo type dropdownlist. If the newly entered dropdownlist value is the same as one previously entered, I want to abort the add row process.

Requirements also stipulate that all dropdownlists remain enabled to allow the user to change the memo type at any time. Similarly, I would like to be able to scan the table checking to see if that same memo type has already been entered.

What would the jQuery look like for this kind of validation?

Thanks!

Arnold

Here are portions of the code:

<tr>

    <td>

        <%= Html.DropDownListFor(x => x.ContentMemoTypeId, Model.ContentMemoTypesList)%>

    </td>

    <td>

        <%= Html.TextBoxFor(x => x.ContentMemoText)%>

    </td>

</tr>


<tr id="ContentMemoAddRow">

    <td>

        <%= Html.DropDownList("ContentMemoTypeIdToAdd", Model.ContentMemoTypesList, "Select one...")%>

    </td>

    <td>

        <%= Html.TextBoxFor(x => x.ContentMemoTextToAdd)%>

    </td>

    <td>

        <a href="#" id="addlink" onclick="addContentMemo()">

        <img src="<%= Links.Content.images.add_png %>" alt="Add" title="Add" />

        </a>

    </td>

</tr>


function addContentMemo() {

//Get values to add from the Add row

var ContentMemoTextToAdd = $("#ContentMemoList_ContentMemoTextToAdd").val();

var ContentMemoTypeIdToAdd = $("#ContentMemoList_ContentMemoTypeIdToAdd").val();

var ContentMemoTypeNameToAdd = $("#ContentMemoList_ContentMemoTypeIdToAdd
option:selected").text();


//AT THIS POINT WE CAN CHECK THE VALUES OF THE PREVIOUSLY SELECTED DROPDOWNLISTS TO SEE IF ContentMemoTypeIdToAdd HAS ALREADY BEEN USED

//get row number of the row previous to the add row

var rowNumber = $("#ContentMemoAddRow").prev().attr("id");

rowNumber = rowNumber.substr(12, rowNumber.length);


//add 1 to get new row number

var newRowNumber = parseInt(rowNumber) + 1;


//get html of previous row

var prevRow = $("#ContentMemoAddRow").prev().html();


//replace old row number with new row number in the html
//more code follows tht is not directly related to the question


}

</script>