CODEWITHSUNDEEP
javascriptphpjqueryhtml
Patric Nøis
Patric Nøis

Reputation: 208

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

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>

Upvotes: 1

Views: 7834

Answers (4)

cssyphus
cssyphus

Reputation: 40038

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.

Upvotes: 1

iModi
iModi

Reputation: 123

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() {

Upvotes: 3

JazzCat
JazzCat

Reputation: 4573

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>

Upvotes: 0

Quentin
Quentin

Reputation: 943599

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.

Upvotes: 0

Related Questions