SitePoint Sponsor

User Tag List

Results 1 to 14 of 14
  1. #1
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    How to manipulate an element that is part of the same fieldset?

    So I'm trying to build a little editor, a bit like the one I'm typing in right now .

    Right now I've something like this:
    Code:
    <input type="button" class="tagbutt-B" onclick="insertTag(this, 'my-textarea-id');"
    And it works fine. But what I'd really like is to get rid of is the textarea id in that. I'm imagining the function I'm looking for would have to do something like:
    • Find the fieldset 'this' is a child of
    • Find the first textarea or text input field within this fieldset
    Well, eh, that's it really

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  2. #2
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Code:
    this.getElementsByTagName("TEXTAREA").item(0).getAttribute("id");
    If "this" is your fieldset, the code above should get the ID of the first textarea in your form .

  3. #3
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Vinnie!

    I see what you mean, but how do I find the fieldset? See, my 'this' is the 'this' of a button that's contained within the same fieldset as the textarea.

    I don't know if I'm making myself clear... let's try another way...

    What I want is a button that manipulates the content of a textarea without having to know anything (id, whatever... ) about this textarea except that it is contained within the same fieldset as the button.

    I guess my main difficulty is to find the parent node of this button. When I look around at javascript tutorials et all there's a lot of ways to slide down the tree, but I haven't found anything to climb up it .

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  4. #4
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    How about:
    Code:
    //if you don't need to know about the fieldset
    this.form.getElementsByTagName("TEXTAREA").item(0).getAttribute("id");
    
    //or if you really need to go through the fieldset
    this.form.getElementsByTagName("FIELDSET").item(0).getElementsByTagName("TEXTAREA").getAttribute("id");
    Every form field has a property called "form" that references the form it's contained in.

    Hope this helps!

    Edit:

    To get the parent node of an element with the DOM, simply use its .parentNode property

  5. #5
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by vgarcia
    To get the parent node of an element with the DOM, simply use its .parentNode property
    As illustrated here
    Code:
    <html>
    <head>
    	<title>Test</title>
    	<script type="text/javascript">
     
    		function findAncestor( elem, ancestorName )
    		{
    			var p = elem.parentNode;
    			while( p.parentNode )
    			{
    				if ( p.nodeName == ancestorName.toUpperCase() )
    				{
    					return p;
    				}
    				p = p.parentNode;
    			}
    			return null;
    		}
     
    		function tester( elem, fs, text )
    		{
    			if ( fs != null )
    			{
    				var tas = fs.getElementsByTagName( "TEXTAREA" );
    				if ( tas.length )
    				{
    					tas[0].value += text;
    				}
    			}
    		}
     
    	</script>
    
    </head>
    <body >
     
    	<form>
    		<fieldset>
    			<textarea></textarea>
    			<input type="button" value="Try it" onclick="tester(this, findAncestor( this, 'fieldset' ), 'blah' );" />
    			<textarea></textarea>
    		</fieldset>	 
    	</form>
     
    </body>
    </html>
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  6. #6
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks guys!

    I will be playing with this today. I want to go with 'parent detection' because I would like to be able to put more then one of these thingy's in one form by copying and pasting and just change one 'parameter', ie the id of the fieldset, to make things work client side.

    I'll let you know how I got on, thanks again!

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  7. #7
    ☆★☆★ silver trophy vgarcia's Avatar
    Join Date
    Jan 2002
    Location
    in transition
    Posts
    21,236
    Mentioned
    1 Post(s)
    Tagged
    1 Thread(s)
    Quote Originally Posted by beetle
    As illustrated here
    Code:
    ...snip...
    We name our variables way too similarly .

  8. #8
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    What can I say? Semantics rule*

    * As in the governing sense, not the Bill and Ted sense
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  9. #9
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Great minds think alike and all that .

    I've used Beetle's getAncestor function. Then I played some more and I came up with this:
    Code:
    <html>
    <head>
    <title>Edit Form</title>
    <!-- Source: http://www.sitepointforums.com/showt...18#post1030518 -->
    <script type="text/javascript">
    
    function findAncestor( e, ancestorName ) {
    	var p = e.parentNode;
    	while(p.parentNode) {
    		if (p.nodeName == ancestorName.toUpperCase() ) {
    			return p;
    		}
    		p = p.parentNode;
    	}
    	return null;
    }
     
    function findDest(e) {
    	if (null != e) {
    		var fs = findAncestor(e, 'FIELDSET');
    		if (null != fs) {
    			var tas = fs.getElementsByTagName('TEXTAREA');
    			if (tas.length) {
    				return tas[0];
    			} else {
    				var i;
    				var ips = fs.getElementsByTagName('INPUT');
    				for (i=0; ips[i]; i++) {
    					if ('text' == ips[i].type) {
    						return ips[i];
    					}
    				}
    			}
    		}
    	}
    	return null;
    }
    
    function writeText(text, dest) { // dest is the element to write *to* (destination)
    	dest.value += text;
    	dest.focus(); // make sure to focus back on the element to continue editing
    	}
    
    function insertTag(e, tag) {
    	if (null != e && null !=tag) {
    		var dest = findDest(e);
    		if (null != dest) {
    			writeText('[' + tag.toUpperCase() + ']', dest);
    		}
    	}
    }
    </script>
    </head>
    <body >
    <form>
    	<fieldset>
    		<legend>Title</legend>
    		<div class="tagbuttons">
    			<input type="button" class="tb-I" value="I" onclick="insertTag(this, 'i')" />
    		</div>
    		<input type="text" name="title" />
    	</fieldset>
    	<fieldset>
    		<legend>Content</legend>
    		<div class="tagbuttons">
    			<input type="button" class="tb-B" value="B" onclick="insertTag(this, 'b')"; />
    			<input type="button" class="tb-I" value="I" onclick="insertTag(this, 'i')" />
    			<input type="button" class="tb-Quote" value="Quote" onclick="insertTag(this, 'quote')" />
    		</div>
    		<textarea name="content"></textarea>
    	</fieldset>
    </form>
    </body>
    </html>
    Like it?

    I'm so happy I know how to climb up the tree now.

    Must dash! Have to find a way to close these damn tags!

    Thanks again guys!

    Rik
    Edit:

    I had forgotten I wanted to say this:

    What I find truly beautifull about this is that it doesn't need id's or anything, just dump the buttons and the text field inside the same fieldset and done!
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  10. #10
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  11. #11
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for those, Peter!
    Quote Originally Posted by beetle
    That just goes so over my head! I don't even know in what way to start looking at that? Any pointers to put me on my way ?
    Quote Originally Posted by beetle
    That actually doesn't work in Firebird 0.6, thought you might want to know, if you don't already.

    Thanks again!

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  12. #12
    Web-coding NINJA! silver trophy beetle's Avatar
    Join Date
    Jul 2002
    Location
    Dallas, TX
    Posts
    2,900
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I think you need Firebird 0.6.1+ for it to work.

    Are you interested in using the other one? What do you think you need to get started?
    beetle a.k.a. Peter Bailey
    blogs: php | prophp | security | design | zen | software
    refs: dhtml | gecko | prototype | phpdocs | unicode | charsets
    tools: ide | ftp | regex | ffdev




  13. #13
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your answer Peter.

    First let me expain that I'm not really going to use it, at least not immediatelly. Right now I'm just experimenting and learning.

    To get started to use it, i don't really need anything. I'm getting the API, at least, I think so . But the underlying code is way over my head . I've only this week seriously started to look at DOM scripting. Since my last post I've browsed a bit (as one does) and I've come across this article which I will revisit once I get to that level.

    Today I'm spending some time over here learning about events.

    I've actually got a small question on event accessing if you don't mind.

    Is 'this' not widely supported when non-inline event registration is used?

    Or... why do I need to do this:
    Code:
    function viewIt(e) {
      if (typeof e == 'undefined') var e = window.event;
    	return viewImage(e);
    }
    if I could just do this:
    Code:
    function viewIt() {
     	return viewImage(this);
    }
    What is the difference? Or are there browser issues with the latter?

    Thanks again!

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac

  14. #14
    Ceci n'est pas Zoef Zoef's Avatar
    Join Date
    Nov 2002
    Location
    Malta
    Posts
    1,111
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I had a bit of fun in the last couple of hours and I thought I'd share...

    The idea was to make that lovely TAEditor a bit more user friendly by adding accesskeys and title tags to the buttons. Like so:
    Code:
    function initTaeAccessKeys() {
    	// the id of the element that contains the buttons for which
    	// the accesskeys need to be generated (bce - Button Container Element):
    	var bce_id = 'buttonArea';
    	// bat - Button value, Accesskey, Title text
    	var bat = [
    		['B','b','Bold'],
    		['I','i','Italic'],
    		['U','u','Underline'],
    		['http://','l','Link'],
    		['@','e','Email'],
    		['img','p','Picture'],
    		['#','c','Code'],
    		['php','h','Php'],
    		['Quote','q','Quote']];
    	var bce = document.getElementById(bce_id);
    	var ins = bce.getElementsByTagName('INPUT'); // ins - INputS
    	for (var i = 0 ; i < ins.length ; i++) {
    		if ('button' == ins[i].type) {
    			var b = ins[i]; // b - Button
    			for (var j = 0 ; j < bat.length ; j++) {
    				if ((' '+ bat[j][0] +' ') == b.value) {
    					var ttext = bat[j][2] + ' (accesskey: ' + bat[j][1] + ')'; // ttext - Title TEXT
    					b.setAttribute('accesskey', bat[j][1]);
    					b.setAttribute('title', ttext);
    				}
    			}
    		}
    	}
    }
    
    function initAll() {
    	init();
    	initTaeAccessKeys();
    }
    </script>
    </head>
    <body onload="initAll()">
    I'm sure it works fine, and the domparser agrees with me, the new attributes show up nicely. Only problem is, the browser (Firebird 0.6) doesn't seem to share that view . The title tags work but the accesskeys simply don't. Pitty, because that would have added some real value to the script.

    Well, guess I could make a 'light' version just to show some title tags .

    Rik
    English tea - Italian coffee - Maltese wine - Belgian beer - French Cognac


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
  •