Is it possible to get the value of a <td> element using onclick?

Question

I currently have a table that has a list of email template names being echoed using php. Below is part of the php code. I'm trying to grab the table value and pass it to my JS file where a future AJAX command will pass it to a different file (that I won't have any issues with). My first attempt to alert out the value stated that the value was undefined. My second attempt showed the type of element it was inside (at the time it was a span). Now it's not showing anything. Suggestions?

PHP code:

<table class="departments">
<tr>
<th scope="col" style="width: 175px;">Email Name</th>
';
$get_depts = mysql_query("SELECT dept_name FROM depts where bus_id = '{$_SESSION['bus_id']}'");
while(($department = mysql_fetch_assoc($get_depts)))
{
    echo '
    <th scope="col" style="width: 175px;">'.$department['dept_name'].'</th>
    ';
}
echo '
</tr>
';
$get_emails = mysql_query("SELECT id, email_name from emails where bus_id = '{$_SESSION['bus_id']}' ORDER BY email_name ASC");
while(($email = mysql_fetch_assoc($get_emails)))
{
    echo '
    <tr>
    <td id="test" onclick="moveValue()">'.$email['email_name'].'</td>
    ';

Current JS code:

function moveValue()
{
var x = document.getElementById(test);
var y = x.innerHTML;
alert(y);
} 

Answer 1

Javascript:

var y = document.getElementById("test").innerText;

jQuery:

$("#test").text();

To get the HTML:

var html = document.getElementById("test" ).innerHTML;

jQuery:

$("#test").html();

Answer 2

I don't want to get into all the problems with your code as there are rather a lot. However, getting the value of a <td> element by clicking is trivial to achieve.

You first need to assign a click handler to each cell in your table. The easiest way to do this is to loop through each cell and assign the handler like so:-

var cells = document.getElementsByTagName('td');
for(var i = 0; i <= cells.length; i++){
    cells[i].addEventListener('click', clickHandler);
}

function clickHandler()
{
    alert(this.textContent);
}

Then every time you click on a cell the clickHandler() will be called and you can run whatever code you wish.

You can see it working in this fiddle

Lots of information here https://developer.mozilla.org/en-US/docs/Web/API

Answer 3

With javascript:

To get raw text without any elements or:

somevar=document.getElementById ( "test" ).innerText;

To get full html code of tag. Contents will be stored in 'somevar' variable.

somevar=document.getElementById ( "test" ).innerHTML;

Answer 4

You can do it either by

function moveValue()
{
  var x = document.getElementById('test');
  var y = x.innerHTML;
  alert(y);
}

or by:

function moveValue(element) {
  var y = element.innerHTML;
  alert(y);
}
//with the following html code:
<td onclick="moveValue(this)">'.$email['email_name'].'</td>

Answer 5

You id attribute would be the same for every td inside the loop. So JS would not know which element you want.

You could try passing this into the onclick method

HTML

<td onclick="moveValue(this);">

JS

function moveValue( elem )
{
    alert(elem.innerHtml);
}

I would take a look at jQuery if I were you. It makes all this stuff much easier to achieve.

Answer 6

its work.

function clickValue(elem) {
  var x = document.getElementById(elem).innerHTML;
  alert(x);
}

<table>
  <th>Coba</th>
  <tr>
    <td id="1" onclick="clickValue('1')">value</td>
  </tr>
  <tr>
    <td id="2" onclick="clickValue('2')">value yg ke 2</td>
  </tr>
</table>

Change id="*anyvalue*" and clickValue('*anyvalue*')