My jquery .val() is not working as expected on retrieving a table's td value or type input. Only .html() is working but I need to get the values.

<style>
p {
    display: block;
    margin-top: 0;
    margin-bottom: 0;
    margin-left: 0;
    margin-right: 0;
}
#table-scroll {
  height:150px;
  overflow:auto;  
  margin-top:20px;
}
</style>

<table style="border: 1px solid black;">
	<tr>
	    <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td>
			<label id="user"><b>User</b></label><br/>
			<input for="user" id="user_identifier" name="user_identifier" type="text" value="${user_identifier}" />
		</td>
		<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td id="Roleddq">
			<label><b>Role</b></label><br/>			
			<input for="Role" id="Role" name="Role" type="text" value="${Role}" />
		</td>
		<td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td id="BU">
			<label><b>BU</b></label>	
			<input for="bu" id="bu" name="bu" type="text" value="${bu}" />
		</td>
	</tr>
	<tr>
	    <td>&nbsp;&nbsp;&nbsp;&nbsp;</td>
		<td colspan="3">
			<INPUT type="button" value="Add" onclick="addRow('dataTable')" />
			&nbsp;&nbsp;
			<INPUT type="button" value="Delete" onclick="deleteRow('dataTable')" />
		</td>
	</tr>
</table>
<table> <tr class="trForm" style="display:none;">
			<td width="10%"></td>
			<td width="5%" class="requiredField">*</td>
			<td class="label">Flag:</td>
			<td class="value">
				<input id="flag" name="flag" type="text" value="${flag}" />
			</td>
			<td width="5%"></td>
		</tr>
</table>


<table>
<thead>
<TR class=dataTable1HeaderRow>
<TH class=dataTable1HeaderCellWithSorting width=1 noWrap>Select</TH>
<TH class=dataTable1HeaderCellWithSorting width=1 noWrap>No</TH>
<TH class=dataTable1HeaderCellWithSorting noWrap>Role</TH>
<TH class=dataTable1HeaderCellWithSorting noWrap>In Business Unit</TH>
</TR>
</thead>
<table>
<table id= "dataTable">
				<tr style="display:none;">
					<td><input type="checkbox" name="chk"/></td>
					<td>0</td>
					<td class="inputvalue"><input type="text"/></td>
					<td class="inputvalue"><input type="text"/></td>
				</tr>
</table>				


			
			#customButton("submitBtn" "submit" "")
			#customButton("cancelBtn" "Cancel" "")


<SCRIPT language="javascript">
$(document).ready(function() {

   $("#submitBtn").click(function() {
                alert("hi1");
                submit1();  
                alert("hi2");
                document.getElementById("Role_DDQ").disabled = true;
                document.getElementById("BU_Picker").disabled = true;
	            //document.actimize_application_form.submit();		  		
    });
	
	$("#cancelBtn").click(function() {
		if(confirm('You are about to cancel the request. Are you sure?')) {
    		window.close();
		}
    });
});
	function addRow(tableID) {

			var table = document.getElementById(tableID);

			var rowCount = table.rows.length;
			var row = table.insertRow(rowCount);

			var cell1 = row.insertCell(0);
			var element1 = document.createElement("input");
			element1.type = "checkbox";
			element1.name="chkbox[]";
			cell1.appendChild(element1);

			var cell2 = row.insertCell(1);
			cell2.innerHTML = (rowCount + 1)-1;
			
			var cell3 = row.insertCell(2);
			var element2 = document.createElement("input");
			element2.type = "text";
			element2.name = "role[]";			
			element2.value = document.getElementById("Role_Name").value;
			cell3.appendChild(element2);
			
			var cell4 = row.insertCell(3);
			var element3 = document.createElement("input");
			element3.type = "text";
			element3.name = "bu[]";			
			element3.value = document.getElementById("BU_Name").value;
			cell4.appendChild(element3);
           
		}

		function deleteRow(tableID) {
			try {
			var table = document.getElementById(tableID);
			var rowCount = table.rows.length;

			for(var i=0; i<rowCount; i++) {
				var row = table.rows[i];
				var chkbox = row.cells[0].childNodes[0];
				if(null != chkbox && true == chkbox.checked) {
					table.deleteRow(i);
					rowCount--;
					i--;
				}


			}
			}catch(e) {
				alert(e);
			}
		}
		
	
function submit1() {
        
		var TableData = new Array();
        $('#dataTable tr').each(function(row, tr){
		  //alert("hi"+ $(this).closest("tr").find("input").val());   -- this gives first cell of the rows
          //alert("hiiiiii"+$($(this).closest("tr").find("input")));  -- this shows undefined in alert box
		  TableData[row]={
         "role" : $(this).find("td:eq(2)").html() //find('td:eq(2)').val() -- on using .val or .text this is not working
         ,"bu" : $(this).find("td").eq(3).html() //find('td:eq(3)').val()  -- on using .val or .text this is not working
		 }
		 });
        TableData.shift();
		var myObj = {};
        myObj.myrows = TableData;
        alert(JSON.stringify(myObj));		
	    return myObj;
    }
	    
               		
		
</SCRIPT>

Select allOpen in new window