Detect user click on an HTML table TD, and get value

Question

I'm trying to post some data when visitors click on a "td".

Here is the code:

<form method="post" name="randoms">
<tr><td value="1" name="somedata">Click me 1</td></tr>
<tr><td value="2" name="somedata">Click me 1</td></tr>
<tr><td value="3" name="somedata">Click me 1</td></tr>
<tr><td value="4" name="somedata">Click me 1</td></tr>
</form>

What I want here is that if a visitor clicks at "Click me 1" it post the form and then I'll be able to grab the somedata with PHP.

<?php
$somedata = $_POST["somedata"];
?>

I've tried to solve this, but I cannot find a way to do this, I'm pretty sure there are lots of way to do it.

I've tried this JavaScript:

<script type="text/javascript">
function submitForm(sub) {
document.forms[sub].submit();
}
</script>

and then I've tried to use:

<a HREF="#" onClick="submitForm('randoms')"> Somedata1 </a>

`` elements don't have a value attribute and you're missing the opening and closing table tags. Also, where's the JavaScript you tried? — j08691, Mar 12 '16 at 21:31

iModi · Accepted Answer · 2016-03-12T22:11:52.250

as mentioned above, your table is not formatted well, add opening and closing tags

name your form withban id or class <form id="myForm"... >

use data attribute on td like

<td data-id="1" data-some-data="somename">

add 2 hidden input fieod in the form:

<input type="hidden" id="myId" >
<input type="hidden" id="somedata" >

try something like

$( "#myForm td" ).click(function() {
  $('#myId").val($(this).data('id'));
  $('#somedata").val($(this).data('someData'));
  $( "#myForm" ).submit();
});

and of course et up a form action url.

if you really wanna be safe check if data attr. exists like

if ($(this).data().hasOwnProperty( 'someData') )  { //do stuff }

ok if u wanna click specific td add a class to them like

<td class="clickable"......

an modif

 $( "#myForm td" ).click(function()

to

$( "td.clickable" ).click(function() {

sorry you dont need [] before .submit – iModi Mar 12 '16 at 21:53 — iModi, Mar 12 '16 at 21:53

score 1 · Answer 2 · edited May 23 '17 at 11:59

You cannot put a value attribute into a td, but you can use the id attribute to do something similar. Here is a full example that might help:

<?php
    if ( isset($_POST['newdata']) ){
        $val = $_POST['newdata'];
        echo 'Received value: ' .$val;
        die();
    }else{

?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
    $(function(){
        $('td').click(function(){
            alert(this.id);
            var myTD = this.id.split('_')[1];
            var newFrm = '<form id="myNewForm"><input name="newdata" value="' +myTD+ '" /></form>';
            $('body').append(newFrm);
            $('#myNewForm').submit();
        });
    });
</script>
<style>
    td{padding:3px 7px;border:1px solid #bbb;}
</style>
<form method="post">
    <table>
        <tr><td id="td_1">Click me 1</td></tr>
        <tr><td id="td_2">Click me 2</td></tr>
        <tr><td id="td_3">Click me 3</td></tr>
        <tr><td id="td_4">Click me 4</td></tr>
    </table>
</form>

<?php
    }
?>

If you would like to POST the data (and perhaps update a database) behind the scenes, use AJAX. See the simple examples in this post for how easy it is:

AJAX request callback using jQuery

To answer your comment question: in order to restrict which TDs are clickable, add a class to the ones you want to make "clickable" and use that class to detect the user click:

<form method="post" name="randoms">
    <tr><td value="1">Cant click me 1</td></tr>
    <tr><td value="2" class="clickme">Click me 2</td></tr>
    <tr><td value="3" class="clickme">Click me 3</td></tr>
    <tr><td value="4">Cant click me 4</td></tr>
</form>

<script>
    $(function(){
        $('.clickme').click(function(){
            alert(this.id);
        });
    });
</script>

You probably already know this, but for future readers: Note the ., which means "class=". An id attribute is represented by a #. When you use a class name in the jQuery selector $('.clickme').click(), every element with that class is monitored. But IDs must be unique -- only one element per page can have that specific ID. If more than one element has the same ID, terrible things will happen: earthquakes, famine, tsunamis, unpredictable code results. Don't go there.

Is there a way to make this work only for those td like if i add a Chose opption over them and click it then nothing happens? cuz now everywhere theres a td that gets clicked it post :) — Patric Nøis, Mar 12 '16 at 21:59

score 0 · Answer 3 · answered Mar 12 '16 at 21:39

Table data cells are not form controls. Use form controls.

<button type="submit" value="1" name="somedata"> Click me 1 </button>

No need for JS at all.

If you have tabular data (it doesn't look like you do) then you can put the button in a call, but note that a <tr> element cannot be a child element of a <form> element.

score 0 · Answer 4 · answered Mar 12 '16 at 21:43

As Quention said, table data cells are not form controls. If you want to make use of AJAX and have the td's clickable you could do something like this.

<script type="text/javascript">
    var tds = document.getElementsByTagName('td');
    tds.addEventListener('click', function() {
            // DO XHR Request
    });
</script>

<form>
<table>
<tr><td><input type="hidden" name="somename" />Click me 1</td></tr>
<tr><td><input type="hidden" name="somename" />Click me 1</td></tr>
<tr><td><input type="hidden" name="somename" />Click me 1</td></tr>
<tr><td><input type="hidden" name="somename" />Click me 1</td></tr>
</table>
</form>

Detect user click on an HTML table TD, and get value

4 Answers4

Linked