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

**Zoef** · Dec 8, 2003, 18:21

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

**vgarcia** · Dec 8, 2003, 18:27

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

.

**Zoef** · Dec 8, 2003, 19:18

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

**vgarcia** · Dec 8, 2003, 19:40

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

**beetle** · Dec 8, 2003, 21:31

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>

**Zoef** · Dec 9, 2003, 05:31

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

**vgarcia** · Dec 9, 2003, 10:09

Originally Posted by beetle

As illustrated here

Code:

...snip...

We name our variables way too similarly

.

**beetle** · Dec 9, 2003, 10:36

What can I say? Semantics rule*

* As in the governing sense, not the Bill and Ted sense

**Zoef** · Dec 9, 2003, 16:47

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!

**beetle** · Dec 9, 2003, 17:01

For reference or usage

www.peterbailey.net/dhtml/taeditor.htm
www.peterbailey.net/test/rte/new/

**Zoef** · Dec 9, 2003, 18:45

Thanks for those, Peter!

Originally Posted by beetle

www.peterbailey.net/dhtml/taeditor.htm

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 ?

Originally Posted by beetle

www.peterbailey.net/test/rte/new/

That actually doesn't work in Firebird 0.6, thought you might want to know, if you don't already.

Thanks again!

Rik

**beetle** · Dec 11, 2003, 13:18

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?

**Zoef** · Dec 11, 2003, 15:41

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

**Zoef** · Dec 11, 2003, 19:43

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

The SitePoint Forums have moved.

User Tag List

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

Thread Tools

Display

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

Bookmarks

Bookmarks

Posting Permissions