SitePoint Sponsor

User Tag List

Results 1 to 9 of 9
  1. #1
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

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

    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. #2
    Non-Member Kalon's Avatar
    Join Date
    Aug 2010
    Location
    At my computer
    Posts
    2,012
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    can you post some sample html and show exactly what you want to happen and when to make things clearer?

  3. #3
    Under Construction silver trophybronze trophy AussieJohn's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    776
    Mentioned
    11 Post(s)
    Tagged
    0 Thread(s)
    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 event properties

    As a quick example:
    Code:
    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.
    var details = {
    . . web: "afterlight.com.au",
    . . photos: "jvdl.id.au",
    . . psa: "usethelatestversion.com"
    }

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    A simplified version of that code which is commonly being used is:

    Code javascript:
    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') {
    }
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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:

    Code HTML4Strict:
    <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. #6
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    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.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  7. #7
    SitePoint Enthusiast
    Join Date
    Aug 2007
    Posts
    97
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by pmw57 View Post
    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.
    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. #8
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,729
    Mentioned
    104 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by kenoli View Post
    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.
    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.
    Last edited by paul_wilkins; Dec 6, 2010 at 18:51.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  9. #9
    SitePoint Wizard bronze trophy
    Join Date
    Jul 2006
    Location
    Augusta, Georgia, United States
    Posts
    4,192
    Mentioned
    17 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by kenoli
    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] . . .
    Unchecked values won't be sent in the post.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •