onclick event not working

[webguync]

I cannot figure out why my onclick event quit working. It was working at one point!

 

in my php/html code I have:

 

echo '<td><input type="checkbox" name="grid[]" value="'.$row['Id'].'" class="inactive" onclick="changeState(this);"></td><td>'.$row['Text'].'</td>';

 

and the JS which I am linking to has

 

// JavaScript Document

function changeState(fieldObj) {

  if (fieldObj.className=='active') {
    newClass = 'inactive';
  } else {
    newClass = 'active';
  }

  fieldObj.className = newClass;
  return;
}

 

which leaves the CSS

 

.active { background-color:#ffffcc;}
.inactive { background-color:#dfe0de;border:1px solid #333;}

 

hopefully this is something simple, that I am just overlooking. What I have is the checkbox and the MySQL data in separate <td>'s ideally I would like both cells to highlight when the input box is checked, but if I can only get one to highlight that would be ok too!

 

thanks

[webguync]

I think my problem is I have two forms in my HTML , so I have them named now and the one I want to use is <form name="blah">

 

so now I need to call that name in the JS I am using but not sure how to go about it.

 

// JavaScript Document

function changeState(fieldObj) {

  if (fieldObj.className=='active') {
    newClass = 'inactive';
  } else {
    newClass = 'active';
  }

  fieldObj.className = newClass;
  return;
}

[KevinM1]

Your problem lies with:

<input type="checkbox" name="grid[]" value="'.$row['Id'].'" class="inactive" onclick="changeState(this);">

 

The 'this' you're passing into the function -- and trying to change the background of -- is the input and not the table data.  This particular hang-up tends to be common when people mix and match JavaScript with their markup.  Thankfully, the code can be extracted, but not without two bits of info:

 

1. The ID or name of the form input that acts as the 'switch'.

2. The ID(s) of the table cells that need to be toggled.

 

The basic structure, though, would be something along the lines of:

<script type="text/javascript">
   window.onload = function()
   {
      var grid = document.forms["formName"].elements["grid[]"]; //replace formName with the name of your form

      grid.onclick = function()
      {
         var tableData = document.getElementById("tableData"); //replace the tableData ID with whatever you want
         tableData.className = (tableData.className == "active") ? "inactive" : "active";
         return true; //just to be safe
      }
   }
</script>

[webguync]

thanks for the reply. I tried the JS you provided and changed the name of my form and ID of the table in the JS, but I get an error and the highlighting does not work. The error is "changeState is not defined". Did I need to change anything with this line of code?

<input type="checkbox" name="grid[]" value="'.$row['Id'].'" class="inactive" onclick="changeState(this);">

 

[KevinM1]

thanks for the reply. I tried the JS you provided and changed the name of my form and ID of the table in the JS, but I get an error and the highlighting does not work. The error is "changeState is not defined". Did I need to change anything with this line of code?

<input type="checkbox" name="grid[]" value="'.$row['Id'].'" class="inactive" onclick="changeState(this);">

 

 

Yeah, I should've been more clear.  Sorry about that.

 

The method I used utilized what's typically referred to as unobtrusive JavaScript.  That's just a fancy way of saying that the script is completely separate from the markup.  Separating the two is considered to be the best practice, as it makes both the code and the markup easier to maintain (they're both centralized), and it removes those pesky "what element am I actually using in my function?" errors as you're typically forced to use the explicit getElementBy... functions.

 

So, all that said, you'll need to remove the onlick="changeState(this);" from the input as it's not defined in the <script> tags, and it's no longer needed anyway as there's another function (grid.onclick = function(){...}) that does the dirty work.

[webguync]

thanks for the reply. In my JS code I now have:

 

<script type="text/javascript">
   window.onload = function()
   {
      var grid = document.forms["Grid"].elements["grid[]"]; //replace formName with the name of your form

      grid.onclick = function()
      {
         var tableData = document.getElementById("matrix"); //replace the tableData ID with whatever you want
         tableData.className = (tableData.className == "active") ? "inactive" : "active";
         return true; //just to be safe
      }
   }
</script>

 

in my HTML code I have:

 

<form action="FU_Results.php" method="POST" name="Grid">

 

and the table that hold the data, I want to highlight in the onclick event:

 

<table id="matrix">

 

I am not getting the error anymore, but nothing is happening. Just wanted to make sure I didn't need to add the id of "matrix" to the <td> or <input>

 

thanks for all of the assistance!

[KevinM1]

thanks for the reply. In my JS code I now have:

 

<script type="text/javascript">
   window.onload = function()
   {
      var grid = document.forms["Grid"].elements["grid[]"]; //replace formName with the name of your form

      grid.onclick = function()
      {
         var tableData = document.getElementById("matrix"); //replace the tableData ID with whatever you want
         tableData.className = (tableData.className == "active") ? "inactive" : "active";
         return true; //just to be safe
      }
   }
</script>

 

in my HTML code I have:

 

<form action="FU_Results.php" method="POST" name="Grid">

 

and the table that hold the data, I want to highlight in the onclick event:

 

<table id="matrix">

 

I am not getting the error anymore, but nothing is happening. Just wanted to make sure I didn't need to add the id of "matrix" to the <td> or <input>

 

thanks for all of the assistance!

 

Instead of using the id of the entire table, you need to give the <td>'s you want to change unique id's.  Once you have a hold of those cells by calling getElementById() on them, then you can change their className property.

 

If that doesn't work, let me know.  Since you're using it on a checkbox input, you may need to use onchange rather than onclick.

[webguync]

well, I am using PHP to pull the data within the <td> tags from a MySQL database and the code looks like this:

 

echo '<td id="ChangeMe"><input type="checkbox" name="grid[]" value="'.$row['ID'].'" class="inactive" '.$chk.' /></td><td>'.$row['Text'].'</td>';

 

so I couldn't make each <td> have it's own unique ID since the code is being constructed dynamically. Every cell will need to change (hi-light) when the checkbox is clicked though.

 

I also changed in the JavaScript to:

 

<script type="text/javascript">
   window.onload = function()
   {
      var grid = document.forms["Grid"].elements["grid[]"]; //replace formName with the name of your form

      grid.onclick = function()
      {
         var tableData = document.getElementById("ChangeMe"); //replace the tableData ID with whatever you want
         tableData.className = (tableData.className == "active") ? "inactive" : "active";
         return true; //just to be safe
      }
   }
</script>

 

still not doing anything on click

[KevinM1]

Hmm...

 

The cells you want to change have a class name of either 'active' or 'inactive' at the start, right?  Are there cells belonging to that class that you don't want to have highlighted when the input is clicked?

 

I ask because there are ways to get at elements based on their class names, but if you're trying to change a particular element out of many of the same class based on a single click, then things get difficult.

[webguync]

no, every cell with the input code should be highlighted when checked and un-highlighted when unchecked.

[KevinM1]

no, every cell with the input code should be highlighted when checked and un-highlighted when unchecked.

 

Oh, wait...you just want the cells that the inputs are in to change?  Or do you want other cells to change as well?

[webguync]

I would be happy with just getting the cells the inputs are in to change.

 

right now I have it set up like:

 

<td><input type="checkbox" name="grid" /></td><td>text content goes here</td>

 

I have this set up into two different cells, just for visual purposes and ideally I would want both cels to highlight onclick, but if need be, I could move everything into one cell.

[KevinM1]

I would be happy with just getting the cells the inputs are in to change.

 

right now I have it set up like:

 

<td><input type="checkbox" name="grid" /></td><td>text content goes here</td>

 

I have this set up into two different cells, just for visual purposes and ideally I would want both cels to highlight onclick, but if need be, I could move everything into one cell.

 

Okay, the easiest way to do this is probably to use the JQuery library to help us out:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
   $(document).ready(function()
   {
      $(document.forms["Grid"].elements["grid[]"]).toggle(function()
      {
         $(this).prev().siblings().andSelf().addClass("active");
      },
      function()
      {
         $(this).prev().siblings().andSelf().addClass("inactive");
      });
   });
</script>

 

Let me know if this works (or does anything at all ).

[webguync]

Hi , thanks for the help. I added the JQuery code, and when I do the check boxes aren't selectable anymore, and basically nothing happens with the highlighting.

[KevinM1]

Hi , thanks for the help. I added the JQuery code, and when I do the check boxes aren't selectable anymore, and basically nothing happens with the highlighting.

 

Hmm....

 

Mind giving me a link to your page, if possible?  It's hard to diagnose without actually seeing how everything is layed out.  If I could see it, I could then make a test page of my own to play with.

[webguync]

sure,

 

here is the page with the JQuery code inserted so you can see what I am referring to

 

http://etsi-dataservices.com/test/index_test.php

 

The JS is all within the <head></head> tags.

 

CSS:

 

.active { background-color:#ffffcc;}

.inactive { background-color:#dfe0de;border:1px solid #333;}

 

and example of code would be :

 

<td><input type="checkbox" name="grid[]" value="1" class="inactive"  /></td>

 

thanks for looking into this!

 

 

[webguync]

there was a php error causing a blank white page to appear at the link I posted, but it's fixed now.

[KevinM1]

Okay, try this:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
   $(document).ready(function()
   {
      $(document.forms["Grid"].elements["grid[]"]).each(function()
      {
         $(this).click(function()
         {
            if($(this).hasClass("active"))
            {
               $(this).removeClass("active").addClass("inactive");
               $(this).parent().next().toggleClass("active");
            }
            else
            {
               $(this).removeClass("inactive").addClass("active");
               $(this).parent().next().toggleClass("active");
            }
         });
      });
   });
</script>

 

One thing to note: you really should strive for more semantically-correct markup.  I noticed that every table cell with an input has an ID of "ChangeMe".  This is semantically incorrect because an ID is a unique identifier.  If you were using JavaScript to access those elements directly, you'd be in a bit of trouble, as getElementById would either fail, or only return the first element.  You should instead give them all the same class.  Just something to keep in mind as you progress.

[webguync]

yea, actually I took out the ID "ChangeMe" , because it wasn't being used. I was just testing out something earlier and forgot to remove it.

 

Anyway with the new code, I noticed nothing seems to happen in Firefox, but in IE, the input checkbox background does highlight. I may have neglected to mention this, but I actually want the whole <td> that contains the input to highlight. Would this mean adding  another class to the <td>? the name grid need to stay on the input field to work with the PHP code.

 

thanks again for all the help!

[KevinM1]

I made a small change:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js"></script>
<script type="text/javascript">
   $(document).ready(function()
   {
      $(document.forms["Grid"].elements["grid[]"]).each(function()
      {
         $(this).click(function()
         {
            if($(this).hasClass("active"))
            {
               $(this).removeClass("active").addClass("inactive");
               $(this).parent().next().andSelf().toggleClass("active");
            }
            else
            {
               $(this).removeClass("inactive").addClass("active");
               $(this).parent().next().andSelf().toggleClass("active");
            }
         });
      });
   });
</script>

 

This adds the "active" class to the grid input, its containing <td>, and the neigboring <td> upon clicking.  If it's already active, it removes that class from the two <td>'s and sets the grid input's class to "inactive."

 

It should work in Firefox.  I've been doing all my testing with Firefox 2 using the Firebug add-on.  It shows the classes toggling correctly.  If it's not working in FF, I'm not sure what to say.

[webguync]

darnit, still not working.

 

In the source code, I noticed that even after you click on the checkbox, the code is still

<input type="checkbox" name="grid[]" value="4" class="inactive"  />

 

so. since it's not changing to class="active", that means for some reason the toggle isn't working for me.

 

Can you post the code you were testing, so I can look how it should look when working, and see if I can debug what is different w/ my code?

 

thanks again!

[KevinM1]

darnit, still not working.

 

In the source code, I noticed that even after you click on the checkbox, the code is still

<input type="checkbox" name="grid[]" value="4" class="inactive"  />

 

so. since it's not changing to class="active", that means for some reason the toggle isn't working for me.

 

Can you post the code you were testing, so I can look how it should look when working, and see if I can debug what is different w/ my code?

 

thanks again!

 

Okay, this is really strange.  I've tried two ways to do this - the JQuery way from the last example, and a more traditional way just now - and it's not working.  I can see the class name changing correctly in Firebug, but you're right, nothing changes in Firefox (I orginally thought it worked right because I accidentally skipped over the active/inactive classes in your CSS).  In IE, only the background for the actual input changes.

 

I'm stumped.

 

Here's both my new code and the previous JQuery code (commented out).  Maybe someone else can point us in the right direction after looking at it:

<script type="text/javascript" src="js/jquery-1.2.6.min.js"></script>
<script type="text/javascript">
   window.onload = function()
   {
      var grids = document.forms["Grid"].elements["grid[]"];

      for(var i = 0; i < grids.length; i++)
      {
         grids[i].onclick = function()
         {
            if(this.className == "active")
            {
               this.className = "inactive";
               this.parentNode.className = "inactive";
               this.parentNode.nextSibling.className = "inactive";
            }
            else
            {
               this.className = "active";
               this.parentNode.className = "active";
               this.parentNode.nextSibling.className = "active";
            }
         }
      }
   }

/*   $(document).ready(function()
   {
      $(document.forms["Grid"].elements["grid[]"]).each(function()
      {
         $(this).click(function()
         {
            if($(this).hasClass("active"))
            {
               $(this).removeClass("active").addClass("inactive");
               $(this).parent().next().andSelf().toggleClass("active");
            }
            else
            {
               $(this).removeClass("inactive").addClass("active");
               $(this).parent().next().andSelf().toggleClass("active");
            }
         });
      });
   }); */
</script>

 

The HTML I copied directly from the source, so it's exactly the same as yours.  I won't paste it here as it's very large.

 

But man, this is puzzling.

[webguync]

yea, I see what you mean by firebug displaying class="active" correctly. That is weird. Thanks for getting me to this point anyway. Hopefully someone can explain this, like you say.

[KevinM1]

You know what?  The script is working.  I just noticed that when I click on a checkbox, the border surrounding the <td> elements disappears.  It looks like the problem is some sort of CSS collision.  I think it's because you originally have:

table#matrix td{
padding:10px;
background-color:#ccc;
}

 

For all the cells, and the new active class isn't overwriting the background color, for whatever reason.  Try giving the <td> elements a class of their own that I can toggle.

[webguync]

ahhh, I see. I took out that part of the CSS and the background highlights now on click, so that is basically what I want. I will play around with the CSS some more, but as long as it's working with the CSS from here on out, I think I can get it to where it needs to be.

 

thanks so much for getting me to this point!