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 mand 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);
} 

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 mand 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);
} 

• javascript
• onclick

• I remend you to start learning jQuery jquery. – Mihai Matei Commented Aug 8, 2013 at 11:49
• You did not open tag <? PHP?> Anywhere .. – user2188149 Commented Aug 8, 2013 at 11:51
• @MateiMihai jQuery isn't required for this. – vascowhite Commented Aug 8, 2013 at 11:52
• “Is it possible to get the value of a <td> element using onclick?” Yes. Yes, it is. – Martin Bean Commented Aug 8, 2013 at 11:55
• I specifically stated i was only showing part of my php code. – CBC_NS Commented Aug 8, 2013 at 11:57

6 Answers 6

Javascript:

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

jQuery:

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

To get the HTML:

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

jQuery:

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

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.

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/en-US/docs/Web/API

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;

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>

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*')