Javascript - get task icon

Question

Hello all!

I have a small programming problem (php & javascript). On index.php page I'm printing a news (from mysql db) in a table:

---

CHECKBOX | NEWStitle | NEWStext | NEWSuser | NEWSdate

checkbox1 | News 1 .. | Shall we.. | User0002 | 28.7.09

Above that table I have small icons (images), representing EDIT, DELETE, ARCHIVE, EMAIL and PDF.

I want to achieve following: When user selects one row - with checkbox - (multiple rows won't be supported) and clicks on a icon, I want that javascript finds out which icon was selected, so I can product a custom url (example:index.php?mod=news&command=edit&id=9).

Is there any chance to do that? If, how??

Answer 1

Assumiung the following code for your inputs, where value is the ID:

<input type="checkbox=" name="newsid" value="9" />Blah blah title, etc
<input type="checkbox=" name="newsid" value="10" />Blah blah title, etc
<input type="checkbox=" name="newsid" value="11" />Blah blah title, etc

You can have a javascript function attached to the anchor tag (for example the edit link):

<a href="#" onclick="editNews()"><img src="edit.png" />Edit</a>

Then use the following javascript function:

function editNews() {
    val checkedId = $('input[name=newsid]:checked').val();
    window.location = "index.php?mod=news&command=edit&id=" + checkedId;
}

The key to that function is the $('input[name=newsid]:checked').val() query (which does rely on jQuery), it will find all the input boxes that are named newsid and then find any that are checked.

If jQuery is not a valid option for your project let us know, otherwise you'll get a ton of recommendations to use it ;)

If you only want to support one row being selected at a time I suggest using a radio box instead of a checkbox, since that control enforces only one can be selected at a time.

Answer 2

Just in case you don't use a js library for such a simple task, here is a plain-js implementation of the editNews function :

function editNews() {
 var inputs = document.getElementsByTagName("INPUT");
 var checkedInput = (function () {
  for(var i=0; i<inputs.length; i++) {
   if(inputs[i].name == "newsid" && inputs[i].checked) return inputs[i];
  }
 })();
 if(checkedInput) window.location = "index.php?mod=news&command=edit&id=" + checkedInput.value;
}

Answer 3

Parrots and Cedric Bertolini, kindly thanks for you answer. jQuery IS valid option, as I have many other effects done with jQuery.

Ok, so far I know how to get checked items along with Id. Now, how to get task icons?

As I have explained, my cms has small icons above the news table, which represents tasks. EDIT, DELETE, ARCHIVE, EMAIL, PDF.

How to write a function for this?

I want to find out which icon was clicked and get newsid (what I already have - thanks to you :)) so I can serve user with desired task.

Thanks again!