Is there a way to use the "event triggering" tag as a reference in a function?

JavaScript
1

I’m wondering if there is a way to identify the “current” tag or the tag within which an event is triggered as a reference point in a javascript function.

Thus, can I set up a function so that when a certain tag is clicked it will do something to, say, the child of the tag that was clicked?

The function would say “do something to the child of the tag that triggered the event by being clicked.”

I know I can do this by identifying the tag by ID, class or some DOM location. What I want to know is if I can can identify it by the fact that it is where the event was triggered.

–Kenoli

2

can you post some sample html and show exactly what you want to happen and when to make things clearer?

3

Short answer: yes - it’s quite easy to do so.

Longer answer:

There are some excellent articles already written about this, so I won’t repeat too much here.

PPK (Peter-Paul Koch) has a few pages that explain the nuts and bolts of event accessing an [URL=“http://www.quirksmode.org/js/events_properties.html”]event properties

As a quick example:


element.onclick = doSomething;

function doSomething(e) {
	var targ;
	if (!e) var e = window.event;
	if (e.target) targ = e.target;
	else if (e.srcElement) targ = e.srcElement;
	if (targ.nodeType == 3) // defeat Safari bug
		targ = targ.parentNode;
}

Once you know the current target you can of course drill down further with targetNodeRef.getElementsByTagName() et al.

4

A simplified version of that code which is commonly being used is:


function eventHandler(evt) {
	evt = evt || window.event;
	var targ = evt.target || e.srcElement;
	if (targ.nodeType === 3) { // defeat Safari bug
		targ = targ.parentNode;
	}
	// carry on from here, for example:
	// if (targ.nodeType === 1 && targ.nodeName === 'A') {
}
5

Thanks. This is helpful and provides a good answer to my question.

What I am trying to do is a bit complicated beyond this. I have a table with rows that look like this:

<tr>
<input type="hidden" name="id_stakeholder[2]" value="76"><td>&nbsp;&nbsp;&nbsp;</td><td><input type="text" name="stakeholder[2]" value="Frank" style="width:100%" ></td><td><input type="text" name="phone[2]" value="510-171-1706" style="width:100%" ></td>
<td align="center" ><input type="checkbox" name="dem_data_[2][a]" value="Dem_data_checked" ></td>
<td align="center" ><input type="checkbox" name="dem_data_[2][b]" value="Dem_data_checked" ></td>
<td align="center" ><input type="checkbox" name="dem_data_[2][c]" value="Dem_data_checked" ></td>
<td align="center" ><input type="checkbox" name="dem_data_[2][d]" value="Dem_data_checked" ></td>
<td align="center" ><input type="checkbox" name="dem_data_[2][e]" value="Dem_data_checked" ></td>
<td align="center" ><input type="checkbox" name="dem_data_[2][f]" value="Dem_data_checked" ></td>
</tr>

It is a list of names, with several rows grouped by topic. I would like to let the user add rows at places in the table where there is a need for additional names. On submit, I am sending the post data to a php script and on to a database table. The rows and columns in the html table are identified by arrays generated from html name attributes with keys set as number and letter indexes by row and column.

When the new row is generated, I am going to have to provide a discrete index to the names in the row, so the information in the row can be entered into the database table as a discrete record.

I see this on sites, where one can add a new row by clicking, say, a “+” sign and a row appears. I have even done this myself using AJAX in simple forms where I was simply adding some html and I didn’t need to provide discrete naming data as I do here. I’m not very experienced with javascript and can imagine some kind of complex DOM function to modify elements within the row to which I need to assign specific information to generate a discrete record.

I’m wondering if anyone has seen a script designed to do something like this that I can modify, or at least learn from.

I’m also thinking of ways I can simplify the html/php interaction so the naming arrays are generated more automatically. The issue from a php scripting perspective is associating the various form input elements for each record with each other. For this reason, I am generating them from an incremented index variable so each element in a row has the same numeric index.

If a new row is inserted, I can utilize a numeric key that is way out of the range of what the script that generates the table will be using, say, starting with 1000. I will need to insert it into the content inserted by the javascript. I will also need to keep track of the new keys so if a user adds more that one row, keys are not duplicated.

I’m going at this step by step.

Thanks,

–Kenoli

6

Instead of using “dem_data_[2][a]” as your form name, you can use the empty bracket notation “dem_data_[2]” which adds a new array item.

What that means is that when PHP processes the data, the results will be in an array-like format ready for you to use.

It also make adding/removing fields a lot easier, because you don’t need to ensure that the numbers maintain a sequential order. Using the empty bracket notation that side of things is automatically handled for you.

7

Yes. I have been experimenting with that. The problem is that with empty brackets the stakeholder and phone arrays comes back with the checked boxes numbered 0,1,2,3 . . . as expected and associate correctly for each row. However, the arrays for checked checkboxes don’t match up. For instance, for the first row person one is associated with stakeholder[0] and phone[0] but the checked checkboxes on that row come back in a way that prevents me from associating them with that record, i.e. dem_data[0], dem_data[1], dem_data[2] . . .

I need something returned for the checkboxes like dem_data[0][a], dem_data[0][b], dem_data[0][f] . . . depending on which are checked.

This way, I can associate the checked checkbox array with stakeholder[0] and phone[0].

I suppose I could assign each checkbox element with a discrete name, e.g. cb_1. cb_2. etc. It is all being generated by a php script, but I should be able to generate discrete checkbox names using an index in the php script.

Then, I suppose each set would come back with a discrete element, e.g. cb_1[0]. cb_2[0] . . . and I could associate these with the particular record.

The reason I originally chose to use an index is that it assigns a number to each element rather than counting on an automatic sequence to provide the array keys, a sequence that could conceivably get out of kilter. Suppose some browser started the sequence differently for one element, for instance.

The way you suggest, assigning different names and values to each checkbox input certainly makes the javascript part simpler to apply.

This is sort of getting sucked into a php topic. Especially with incorporating AJAX into the process, it seems like javascript shows up in all web coding. I never really wanted to learn it but haven’t been able to avoid it.

Thanks,

–Kenoli

8

Dare I suggest the blatently obvious, but have you considered making use of the value attribute on each checkbox? The checkbox value does get posted through with the form.

9

Unchecked values won’t be sent in the post.