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.

My jquery .val is not working as expected. Only .html is working. not sure what is going wrong here.
<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>

Open in new window

Aravindan GPAsked:
Who is Participating?

[Product update] Infrastructure Analysis Tool is now available with Business Accounts.Learn More

x
I wear a lot of hats...

"The solutions and answers provided on Experts Exchange have been extremely helpful to me over the last few years. I wear a lot of hats - Developer, Database Administrator, Help Desk, etc., so I know a lot of things but not a lot about one thing. Experts Exchange gives me answers from people who do know a lot about one thing, in a easy to use platform." -Todd S.

David S.Commented:
Table cells don't have a value property. You need to access the form field directly. Why don't you reference them via their IDs anyway?
0
lenamtlCommented:
Hi,

First I would not use table for a form but use a div instead.

If you plan to have a form inside a table, I recommend you to use  Datatables Editor https://editor.datatables.net/
You will save time and headache.
0
Aravindan GPAuthor Commented:
Found a solution the issue. Thank-you.
0

Experts Exchange Solution brought to you by

Your issues matter to us.

Facing a tech roadblock? Get the help and guidance you need from experienced professionals who care. Ask your question anytime, anywhere, with no hassle.

Start your 7-day free trial
It's more than this solution.Get answers and train to solve all your tech problems - anytime, anywhere.Try it for free Edge Out The Competitionfor your dream job with proven skills and certifications.Get started today Stand Outas the employee with proven skills.Start learning today for free Move Your Career Forwardwith certification training in the latest technologies.Start your trial today
JavaScript

From novice to tech pro — start learning today.