CODEWITHSUNDEEP
javascriptjquery
CatWithGlasses
CatWithGlasses

Reputation: 1563

Jquery toggle element of clicked row

This is supposed to be a client list, where you click the rows to select them and then submit them to database for cron job to pick them up and send email to them.

I'm trying highlight rows instead of using checkboxes, thats why I put two hidden elements one for the client id, other - bool for checking if row has been clicked or not.

What I can't figure out is how to toggle the specific row's element value(checked).

<table>
<tbody>
<tr class="contactrow">
<input type="hidden" name="id" value="995"/>
<input type="hidden" name="checked" value="FALSE"/>
<td>Andrew Ostrich</td>
<td>AO Company</td>
<td>7537535</td>
<td>[email protected]</td>
</tr>
<tr class="contactrow">
<input type="hidden" name="id" value="296"/>
<input type="hidden" name="checked" value="FALSE"/>
<td>Brendon Evans</td>
<td>Institute of Modern Arts</td>
<td>648648468</td>
<td>[email protected]</td>
</tr>
<tr class="contactrow">
<input type="hidden" name="id" value="421"/>
<input type="hidden" name="checked" value="FALSE"/>
<td>Rudy Thompson</td>
<td>Marine CORP</td>
<td>95939288</td>
<td>[email protected]</td>
</tr>
</tbody>
</table>

​ Also, http://jsfiddle.net/FHjAc/

Upvotes: 1

Views: 255

Answers (3)

Baylor Rae&#39;
Baylor Rae&#39;

Reputation: 4010

Part of the problem is that the server won't be able to identify which client ids has been checked. All of the input[type=checkbox] share the same name attribute, which is what is used to identify each parameter.

If you change the name attribute to checked[__ID__], then you can loop over the parameters and submit those records to the database.

In PHP you would do the following.

<?php

$checked = $_POST['checked'];

foreach( $checked as $id ) {
  // do something with the $id here
}

Update

I didn't realize you were using a hidden input for the checked field. If you change it to a checkbox you're job should be a lot easier.

HTML This is how I would markup my HTML, you can use CSS to hide the checkbox with display: none.

<tr class="contactrow">
  <td>
    <input type="checkbox" name="checked[421]" />
    Rudy Thompson
  </td>
  <td>Marine CORP</td>
  <td>95939288</td>
  <td>[email protected]</td>
</tr>

jQuery

$(function () {
  $('.contactrow').click(function () {
    var checkbox = $(this).find('input[type=checkbox]');
    checkbox.prop('checked', !checkbox.prop('checked'));
    $(this).toggleClass('contactrow_highlight');
  });  
});

Upvotes: 1

Cerbrus
Cerbrus

Reputation: 72857

Here you go: http://jsfiddle.net/AuYZf/1/

You can get the siblings of the first child of the row element you clicked, the third appears to be the desired element. Then you can simply toggle the value:

var inputElement = this.firstChild.nextSibling.nextSibling.nextSibling;
inputElement.value = (inputElement.value != "true")

(I used != because the string "false" still evaluates as true)
And it doesn't even use jQuery to loop through everything.

Upvotes: 0

Thomas Solti
Thomas Solti

Reputation: 871

I tested this and it works for me.

$(function () {
    $('.contactrow').click(function () {
        $(this).toggleClass("contactrow_highlight");
        $(this).find("input").each(function(){
            if($(this).attr("name") == "checked"){
                if($(this).val() == "FALSE"){
                    $(this).val("TRUE");
                } else {
                    $(this).val("FALSE");                   
                }
            }
        });
    });
})

Upvotes: 0

Related Questions