Accessing the radiobutton value inside the table element of HTML

[Ignatius88]

<script type="text/javascript">
function insertPreference() {
var row = document.getElementById('voteTable').rows[0];
var cell = row.cells;

var id = cell[0].innerHTML;
var title = cell[1].innerHTML;

alert(id);
alert(title);
}
</script>

<table id="voteTable" border="1">
<tr>
<td id="id">3</td>
<td id="title">This is an example of storing the table value into a database.</td>
<td id="vote">
<input type="radio" name="yesorno" value="true" onclick="return insertPreference()"/>YES
<input type="radio" name="yesorno" value="false" onclick="return insertPreference()"/>NO
</td>
</tr>
<tr>
<td id = "id">12</td>
<td id = "title"></td>
<td id = "vote">
<input type="radio" name="yesorno" value="true" onclick="return insertPreference()"/>YES
<input type="radio" name="yesorno" value="false" onclick="return insertPreference()"/>NO
</td>
</tr>
.
.
.

</table>

I can get the value for id and title. However, I can not get the radio button value.

I will loop through the <tr> tag and access the <td> and pass it to AJAX module in (id + title + value) manner.

Is there a way to do that?

[twiss]

You could loop through cell[2].getElementsByTagName('input') and check if the selected property is true.

[Ignatius88]

<tr>
     <td id="id">3</td>
     <td id="title">Transformers</td>
     <td id="vote">
          <input type="radio" name="3" value="true" onclick="return insertPreference(this.tr)"/>YES
          <input type="radio" name="3" value="false" onclick="return insertPreference(this.tr)"/>NO
     </td>
</tr>

<tr>
     <td id="id">78</td>
     <td id="title">Harry Potter</td>
     <td id="vote">
          <input type="radio" name="78" value="true" onclick="return insertPreference()"/>YES
          <input type="radio" name="78" value="false" onclick="return insertPreference()"/>NO
     </td>
</tr>

Is this possible?

I only pass tr element and in javascript, I get the td elements.

Like, if I press yes or no in Harry potter table row, id will be 78, title will be Harry Potter and yes or no will be the clicked one.

[twiss]

Well, I guess you'll only know if you try?

[Ignatius88]

I did pass the argument onclick="return insertPreference(this.tr)"

function insertPreference(tbody) {
	var tr = tbody.firstChild;
	while(tr) {
		id = tr.nextSibling;
		title = tr.nextSibling;
	}
}

but no use. I never used javascript before that is why. Will try to google as much as I can. :)

[twiss]

Ah. Okay. If you do onclick="insertPreference(this)" , you can access the values like this:

function insertPreference(input) {
  var bookId = this.name;
  var val = this.value;
}

By the way, you can't have multiple elements with the same id attribute.

[Ignatius88]

function insertPreference(r) {
	var i = r.parentNode.parentNode.rowIndex;
	var row = document.getElementById('voteTable').rows[i];
	var cells = row.cells;
			
	var id = cells[0].innerHTML;
	var title = cells[1].innerHTML;
	var value;
	var radio = cells[2].getElementsByTagName("input");
	if (radio[0].checked) {
		value = radio[0].value;
	} else if(radio[1].checked) {
		value = radio[1].value;
	}
	alert(id);
	alert(title);
	alert(value);
}

This is what I did. Works well. I referred to

http://www.w3schools.com/jsref/dom_obj_tablerow.asp

Is there a "smarter" way for this?

[twiss]

Well, you could replace lines 8 .. 14 with something like:

var value = cells[2].getElementsByTagName("input")[0].checked ? 'yes' : 'no';

[Ignatius88]

Uncaught TypeError: Cannot call method 'appendChild' of null

Well Chrome's javascript console gives the error if I try the code.

But. Thank you so much for helping me. ::)

[twiss]

Ehm, I don't see an 'appendChild' anywhere?

[Ignatius88]

Do not know about it, but that's the Chrome's Javascript console gives me.

[twiss]

Well, you could just use that previous version, if it does what it should.
But anyway, could you search your full source for 'appendChild'? Because Chrome does not give errors just for the fun of it.

[Ignatius88]

weird. Now it works.

Again. Thank you for your help!

[twiss]

No problem!