SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 29
  1. #1
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Netherlands
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    find form name where clicked button is in

    Hi there,

    Code:
    	<form name="module_settings_field_content">
    	<table>
    	<tr>
    				  <td>(page)name of the content</td><td><input type="text" name="name"></td></tr><tr>
    				  <td>Hide the WYSIWYG Editor?</td><td><input type="checkbox" name="hide_editor"></td></tr>		<tr>
    			<td></td>
    			<td><input type="button" value="set values"></td>
    		</tr>
    	</table>
    	<input type="hidden" name="module_settings_field_content_ID" value="">
    	</form>
    now... I have a listener on the 'set values' button, but how do I find out what the name of the form is using the event property?

    or in other words...

    is there a way to find the form name of the form that holds the particular clicked button?

  2. #2
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Walk up the DOM until you find it:
    Code Javascript:
    document.getElementById('the_button').onclick = doStuff;
     
    function doStuff() {
      var temp = this.parentNode;
      while (temp.nodeName !== 'form') temp = temp.parentNode;
      alert(temp.getAttribute('name')) // alerts form name
    }

  3. #3
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Netherlands
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thanks, getting real close, it just says temp has no values, which means "this" doesn't refer to anything in my script.

    I'm using event listeners.

    Code Javascript:
    function addEvent(elm, evType, fn, useCapture)
    {
    	if(elm.addEventListener) {
    		elm.addEventListener(evType, fn, useCapture);
    		return true;
    	} else if (elm.attachEvent) {
    		var r = elm.attachEvent('on' + evType, fn);
    		return r;
    	} else {
    		elm['on' + evType] = fn;
    	}
    }
     
    // add listeners to all set_values buttons
    var all_save_buttons = document.getElementsByName('set_values');
     
    for(i=0;i < all_save_buttons.length;i++)
    {
    	addEvent(all_save_buttons[i],'click',setValues,false);
    }
     
     
    function setValues(e)
    {
    	var temp = this.parentNode;
    	while (temp.nodeName !== 'form') temp = temp.parentNode;
    	alert(temp.getAttribute('name')) // alerts form name
    }

  4. #4
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    It should certainly be working in browsers other than Internet Explorer, because attachEvent doesn't pass this on. Either get yourself an addEvent function (google it, there are loads) that can do that (your current one isn't particularly good), or just use onclick like I did before. Otherwise it isn't going to work in IE.

    If you aren't testing this in IE, there is another problem and I can't see what that could be.

  5. #5
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Netherlands
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    in Firefox it says: "temp has no properties". it doesn't recognize this.parentNode;

  6. #6
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    There aren't any HTML elements with the name "set_values" in the markup you posted. Also, if there is only going to be one, you'd be better off giving it an ID and using getElementById.

  7. #7
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Netherlands
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ah yes, that's an error in the copied code, there is actually in the code i'm working with at the moment, which is still not working by the way, it seems like the loop isn't actually doing something.

  8. #8
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Netherlands
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    alert(temp.nodeName); // gives INPUT

    while (temp.nodeName !== 'form') // gives "temp has no properties"

    huh?!

  9. #9
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    Oh crap, I'm an idiot. nodeName returns things in uppercase. Try this:
    Code:
    while (temp.nodeName.toLowerCase() !== 'form')

  10. #10
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Netherlands
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    we're getting close, it does work in Firefox & Opera, not in IE6 and 7

    Code:
    	if(window.event)
    	{
    		e = window.event.srcElement;
    		id = e.parentNode
    	}
    	else
    	{
    		id = e.currentTarget.parentNode;	
    	}
    	while (id.nodeName.toLowerCase() !== 'form')
    	{
    		id = id.parentNode;
    	}
    	alert(id.getAttribute('name')) // alerts form name

  11. #11
    I meant that to happen silver trophybronze trophy Raffles's Avatar
    Join Date
    Sep 2005
    Location
    Tanzania
    Posts
    4,662
    Mentioned
    2 Post(s)
    Tagged
    0 Thread(s)
    In what you posted, "e" is referring to the srcElement already. Try this:
    Code:
    id = window.event ? window.event.srcElement.parentNode : this.parentNode;
        while (id.nodeName.toLowerCase() !== 'form')
        {
            id = id.parentNode;
        }
        alert(id.getAttribute('name')) // alerts form name
    or the verbose route:
    Code:
    if(window.event)
        {
            e = window.event;
            id = e.parentNode
        }
        else
        {
            id = e.currentTarget.parentNode;    // could use "this" here as well
        }
        while (id.nodeName.toLowerCase() !== 'form')
        {
            id = id.parentNode;
        }
        alert(id.getAttribute('name')) // alerts form name
    Like I said, IE is the problem because attachEvent doesn't pass the reference to this on.

  12. #12
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Netherlands
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    IE now returns [object]

    I had to use "srcElement", else it wouldn't work.

    Code:
    	if(window.event)
        {
            e = window.event.srcElement;
            id = e.parentNode
        }
        else
        {
            id = e.currentTarget.parentNode;    // could use "this" here as well
        }
        while (id.nodeName.toLowerCase() !== 'form')
        {
            id = id.parentNode;
        }
        alert(id.getAttribute('name'));

  13. #13
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Netherlands
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    aarrghh, when I change the attribute in the formtag to form2 and alert(id.getAttribute('name2')); it does work! What's going on here? It also displays the correct value when requesting the action attribute, is there something going on with "name" here?

  14. #14
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Netherlands
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    huh, now I have the same problem with the ID in IE.

    alert(id.getAttribute('id')); // returns [object]

    what is going on here?

    the form tag has its properties defined perfectly

    Code:
    <form id="form_module_settings_field_<?= $module['folder'] ?>" action="test">
    alert(id.getAttribute('action')); // returns "test", like it should!

  15. #15
    SitePoint Addict
    Join Date
    Feb 2004
    Location
    Netherlands
    Posts
    381
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    no ****, look at what I found on the microsoft site:
    Be aware that there is an obscure bug in this method when used on a form element containing an input element which has the name attribute set to "id".

    To work around the bug, use attributes['id'].value or getAttributeNode('id').value

  16. #16
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Raffles View Post
    Walk up the DOM until you find it
    You can access the form tag using the form property (below works in IE and Firefox):
    Code Javascript:
    var button = document.getElementById("btn");
     
    button.onclick = function () {
    	alert(this.form.attributes["name"].value);
    };
    The following should have been enough (works in Safari, Opera and Firefox), but due the mentioned bug above it doesn't work in IE:
    Code Javascript:
    var button = document.getElementById("btn");
     
    button.onclick = function () {
    	alert(this.form.getAttribute("name"));
    };

  17. #17
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Sergeant View Post
    no ****, look at what I found on the microsoft site:
    You're going to have real problems reading the name of a form, when you make the common mistake of hosing it by naming an input 'name'.
    Tab-indentation is a crime against humanity.

  18. #18
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Logic Ali, see my post above on how to solve that for IE.

  19. #19
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Pepejeria View Post
    Logic Ali, see my post above on how to solve that for IE.
    I saw that but the point is that it should be readable directly, which it is if it's not overwritten.
    Tab-indentation is a crime against humanity.

  20. #20
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It is not really overwritten. This is just a bug in IE.

  21. #21
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    whats wrong with
    <input type="button" onclick="alert(this.form.name)">

  22. #22
    SitePoint Guru
    Join Date
    Sep 2006
    Posts
    731
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimfraser View Post
    whats wrong with
    <input type="button" onclick="alert(this.form.name)">
    Nothing at all provided there isn't an element named 'name'.
    Tab-indentation is a crime against humanity.

  23. #23
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)


    or an attribute of the button called "form"

  24. #24
    SitePoint Wizard Pepejeria's Avatar
    Join Date
    Jan 2005
    Location
    Too far up north
    Posts
    1,566
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by jimfraser View Post
    whats wrong with
    <input type="button" onclick="alert(this.form.name)">
    That was my first thought as well, until I tried in crap-IE. See cross-browser solution above.


  25. #25
    SitePoint Wizard
    Join Date
    Nov 2004
    Location
    Nelson BC
    Posts
    2,310
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    It works fine in IE

    Trying to do stuff like
    this.form.getAttribute("name")

    probably wont though


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
  •