Change button value on td click

Question

I currently have a table with blank <td>s. Each time a <td> is clicked, it changes its background color. I want to change the value of rcStatus button along with the colors. Here's my current code:

HTML:

foreach( //conditionals ){ 
    <td id="changeStatus">
       <input type="button" name="rcStatus" id="rcStatus" value=""/>
    </td>
}

javascript:

 $('#table #td').click(
   function(){
       var cell = $(this),
       state = cell.data('state') || 'first';

   switch(state){
       case 'first':
       cell.addClass('red');
       cell.data('state', 'second');  
       document.getElementById('rcStatus').value = "missed";
       break;
     // other cases here 
   }
 });

The problem is, since my <td> is in a foreach statement, the input name is not unique. So the only button value that changes onclick is the first button in the table.

Anyway I can fix this so that the button that changes is the one inside the <td> clicked? Thanks!

Are #table and #td an IDs? If not, then change click event to $(table td). Also, is it possible for you to create jsfiddle? — Pavlo
– Pavlo, Commented Feb 14, 2014 at 7:26
You need to, at the very least, show representative HTML. Without it we can't see what the relationship between elements is. — David Thomas
– David Thomas, Commented Feb 14, 2014 at 7:29
What is your foreach conditional? Is there a key or a value you can append to your input id so you can get them accurately? — citizenslave
– citizenslave, Commented Feb 14, 2014 at 7:50

ThinkingShip · Accepted Answer · 2014-02-14 08:12:42Z

3

This should do the job, but it's bad style to use ids more than once.

<script>
    $('#table td').click(
      function(){
          var cell = $(this);
          state = cell.data('state') || 'first';

      switch(state){
          case 'first':
          cell.addClass('red');
          cell.data('state', 'second');
          this.getElementsByTagName('input')[0].value = "missed";
          break;
        // other cases here 
      }
    });
</script>

And here a solution in pure Javascript:

var table = document.getElementById("table");
var tds = table.getElementsByTagName("td");
for(var i = 0; i < tds.length;i++ ){
    tds[i].addEventListener("click", function(){
        var that = this;
        that.getElementsByTagName("input")[0].value = "missed";
    }, false);
}

edited Feb 14, 2014 at 8:12

answered Feb 14, 2014 at 7:31

ThinkingShip

813 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

abigail_g Over a year ago

it still only changes the value of the first rcStatus button. :/

ThinkingShip Over a year ago

Sorry my fault. I changed it.

abigail_g Over a year ago

thank you so much! i've been trying to solve this for two days.

abigail_g Over a year ago

Hi! I'm now trying to store in a database the rcStatus that I get from the table.. but problem is i'm only able to call the last rcStatus using $_POST[rcStatus]... any idea how this can be done? :) (Or should I make this another question entirely? Sorry, also new to stackoverflow)

Suraj Shrestha · Accepted Answer · 2014-02-16 15:58:36Z

3

change the id to class.

foreach( //conditionals ){ 
    <td class="changeStatus">
       <input type="button" name="rcStatus" id="rcStatus" value=""/>
    </td>
}

$('#table .changeStatus').click(
var that=this;
   function(){
       var cell = $(this),
       state = cell.data('state') || 'first';

   switch(state){
       case 'first':
       cell.addClass('red');
       cell.data('state', 'second');

**update:**

$(that).find('input[type="button"]').val("missed"); 
       //document.getElementById('rcStatus').value = "missed";
       break;
     // other cases here 
   }
 });

update: assuming the id of the table is #table

edited Feb 16, 2014 at 15:58

answered Feb 14, 2014 at 7:25

Suraj Shrestha

1,8181 gold badge26 silver badges51 bronze badges

4 Comments

Pavlo Over a year ago

assuming this is connected to using multiple rcStatus IDs

Suraj Shrestha Over a year ago

In the question.. I assumed that he has given table an id as #table.

abigail_g Over a year ago

I have used table as the id of the table, but this still only changes the value of the first button. because as mentioned by Pavlo, i'm using multiple rcStatus IDs.

Suraj Shrestha Over a year ago

you can use $(this).find('input[type="button"]) to fix that. you don't even need to give the rcStatus an ID.

Linga · Accepted Answer · 2014-02-14 07:27:50Z

0

If you want to change button text for all td's click, then

Change

$('#table #td').click

to

$('#table td').click

Moreover, use class

<td class="changeStatus">

and,

$('.changeStatus').click

answered Feb 14, 2014 at 7:27

Linga

10.6k10 gold badges57 silver badges109 bronze badges

Comments

citizenslave · Accepted Answer · 2014-02-14 08:12:29Z

If I understand you, the issue that you're having is in selecting the RIGHT button to change the value of in your click handler. If you can append either the $key or the $value from your foreach conditional to the ID of both the td and the input, you should be able to select it accurately by retrieving that substring from the td's ID and appending it to the input's.

Alternatively, you could find the input from the td's child nodes, either way, you'd have to modify your handling function to receive the event as a parameter.

in the php

foreach($statuses as $key=>value) {
?>
  <td id="changeStatus_<?php echo $key; ?>">
    <input type="button" name="rcStatus_$key" id="rcStatus_<?php echo $key; ?>" value=""/>
  </td>
<?php
}

in the js

$('#table td').click(function(event) {
  var cell = $(this),
      id = cell.id.split('_')[1],
      state = cell.data('state') || 'first';

  switch(state) {
  case 'first':
    cell.addClass('red');
    cell.data('state','second');
    cell.children('#rcStatus_'+id).val('missed');
    break;
  // case '*':
  }
}

Collectives™ on Stack Overflow

Change button value on td click

4 Answers 4

4 Comments

4 Comments

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

4 Comments

4 Comments

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related