CSS Codes
CSS Layouts
Results 1 to 2 of 2

Thread: document.getElementById alternative

  1. 10-23-2013, 09:38 PM #1
    tochrene
    tochrene is offline New Comer (less than 5 posts)
    Join Date
    Oct 2013
    Posts
    4
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default document.getElementById alternative

    dear coder colleagues,
    I'm working on a very simple CMS system. It's my intention to include simple styling codes <b></b> into the database.
    The code below is just an example, the real code is generated by mysql and php,
    that's why the id's of the textarea are the same. The example does not work, only the first textarea id can be changed.

    Is there a way to use a code like getElementByID by selected/active textarea?

    your help is much appreciated, thanks in advance!


    Code:
    <html>
<head>

<script type="text/javascript">

function CodeBold(tekstveld_naam){
// code for IE
	var textarea = document.getElementById(tekstveld_naam);
	if (document.selection){
		textarea.focus();
		var sel = document.selection.createRange();
		if (sel.text != ''){
			sel.text = '<b>' + sel.text + '</b>';
		}
	}
// code for Mozilla
	var textarea = document.getElementById(tekstveld_naam);
	var len = textarea.value.length;
	var start = textarea.selectionStart;
	var end = textarea.selectionEnd;
	var sel = textarea.value.substring(start, end);
	var replace = '<b>' + sel + '</b>';
	if (sel != ''){
		textarea.value =  textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
	}
}

function CodeH1(tekstveld_naam){
// code for IE
	var textarea = document.getElementById(tekstveld_naam);
	if (document.selection){
		textarea.focus();
		var sel = document.selection.createRange();
		if (sel.text != ''){
			sel.text = '<h1>' + sel.text + '</h1>';
		}
	}
// code for Mozilla
	var textarea = document.getElementById(tekstveld_naam);
	var len = textarea.value.length;
	var start = textarea.selectionStart;
	var end = textarea.selectionEnd;
	var sel = textarea.value.substring(start, end);
	var replace = '<h1>' + sel + '</h1>';
	if (sel != ''){
		textarea.value =  textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
	}
}

</script>

</head>


<body>



<form id="form1" name="form1" method="post" action="">
<div>
	<a href="#" onClick="CodeBold('textarea');return false;"><img src="_images/bold.jpg"></a>
	<a href="#" onClick="CodeH1('textarea');return false;"><img src="_images/h1.jpg"></a>
</div>

<br />
	<textarea name="textarea" id="textarea" cols="45" rows="5">this is the text in the textarea</textarea>
</form>





<form id="form1" name="form1" method="post" action="">
<div>
	<a href="#" onClick="CodeBold('textarea');return false;"><img src="_images/bold.jpg"></a>
	<a href="#" onClick="CodeH1('textarea');return false;"><img src="_images/h1.jpg"></a>
</div>

<br />
	<textarea name="textarea" id="textarea" cols="45" rows="5">this is the text in the textarea</textarea>
</form>



</body>
</html>
    Last edited by jscheuer1; 10-24-2013 at 06:36 AM. Reason: Format
    Reply With Quote Reply With Quote
  2. 10-24-2013, 07:01 AM #2
    jscheuer1's Avatar
    jscheuer1
    jscheuer1 is offline Global Moderator
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,475
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    If the real code is generated server side, you should increment the numbers. Like the second form should be form2. Likewise, the first textarea's id should be textarea1, the second textarea2. That way you can obtain a unique reference to each one via it's id. There is another way though using the markup you have only switching from links to input images. Then you can use a reference to the form obtained from it's status as the form of both the inputs and the textarea. That allows you to use the name, not the id of the textarea as an element of the form:

    Code:
    <html>
<head>

<script type="text/javascript">

function CodeBold(ipt, tekstveld_naam){
	var textarea = ipt.form.elements[tekstveld_naam];
// code for IE
	if (document.selection){
		textarea.focus();
		var sel = document.selection.createRange();
		if (sel.text != ''){
			sel.text = '<b>' + sel.text + '</b>';
		}
	} else {
// code for Mozilla
		var len = textarea.value.length;
		var start = textarea.selectionStart;
		var end = textarea.selectionEnd;
		var sel = textarea.value.substring(start, end);
		var replace = '<b>' + sel + '</b>';
		if (sel != ''){
			textarea.value =  textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
		}
	}
}

function CodeH1(ipt, tekstveld_naam){
	var textarea = ipt.form.elements[tekstveld_naam];
// code for IE
	if (document.selection){
		textarea.focus();
		var sel = document.selection.createRange();
		if (sel.text != ''){
			sel.text = '<h1>' + sel.text + '</h1>';
		}
	} else {
// code for Mozilla
		var len = textarea.value.length;
		var start = textarea.selectionStart;
		var end = textarea.selectionEnd;
		var sel = textarea.value.substring(start, end);
		var replace = '<h1>' + sel + '</h1>';
		if (sel != ''){
			textarea.value =  textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
		}
	}
}

</script>

</head>


<body>



<form id="form1" name="form1" method="post" action="">
<div>
	<input type="image" onclick="CodeBold(this, 'textarea'); return false;" src="_images/bold.jpg">
	<input type="image" onclick="CodeH1(this, 'textarea'); return false;" src="_images/h1.jpg">
</div>

<br />
	<textarea name="textarea" id="textarea" cols="45" rows="5">this is the text in the textarea</textarea>
</form>





<form id="form1" name="form1" method="post" action="">
<div>
	<input type="image" onclick="CodeBold(this, 'textarea'); return false;" src="_images/bold.jpg">
	<input type="image" onclick="CodeH1(this, 'textarea'); return false;" src="_images/h1.jpg">
</div>

<br />
	<textarea name="textarea" id="textarea" cols="45" rows="5">this is the text in the textarea</textarea>
</form>



</body>
</html>
    By the way, regardless of whether you use this method, or create unique id's as suggested, you only have to define the textarea variable once in the function(s), and you should make sure that, if the browser follows the IE path, that it doesn't also follow the Mozilla one, otherwise you will get two pairs of tags added each time. (IE 10 can do it both ways.)

    And, since the two functions are basically identical except for the tag being added, they should be combined, and the tags should be kept in an array or object and selected via an argument to the function, or be gotten from somewhere. I'll get to that in a moment and post it back here when I do.

    OK, here we go:

    Code:
    <html>
<head>
<script type="text/javascript">
function codeTag(ipt, tekstveld_naam){
	var textarea = ipt.form.elements[tekstveld_naam], tag = ipt.value;
// code for IE
	if (document.selection){
		textarea.focus();
		var sel = document.selection.createRange();
		if (sel.text != ''){
			sel.text = '<' + tag + '>' + sel.text + '</' + tag + '>';
		}
	} else {
// code for Mozilla
		var len = textarea.value.length;
		var start = textarea.selectionStart;
		var end = textarea.selectionEnd;
		var sel = textarea.value.substring(start, end);
		var replace = '<' + tag + '>' + sel + '</' + tag + '>';
		if (sel != ''){
			textarea.value =  textarea.value.substring(0,start) + replace + textarea.value.substring(end,len);
		}
	}
}
</script>
</head>
<body>

<form id="form1" name="form1" method="post" action="">
<div>
	<input type="image" value="b" onclick="codeTag(this, 'textarea'); return false;" src="_images/bold.jpg">
	<input type="image" value="h1" onclick="codeTag(this, 'textarea'); return false;" src="_images/h1.jpg">
</div>
<br />
	<textarea name="textarea" id="textarea" cols="45" rows="5">this is the text in the textarea</textarea>
</form>

<form id="form1" name="form1" method="post" action="">
<div>
	<input type="image" value="b" onclick="codeTag(this, 'textarea'); return false;" src="_images/bold.jpg">
	<input type="image" value="h1" onclick="codeTag(this, 'textarea'); return false;" src="_images/h1.jpg">
</div>
<br />
	<textarea name="textarea" id="textarea" cols="45" rows="5">this is the text in the textarea</textarea>
</form>
</body>
</html>
    Last edited by jscheuer1; 10-24-2013 at 07:26 AM. Reason: add detail
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate
    Reply With Quote Reply With Quote
« Previous Thread | Next Thread »

Similar Threads

  1. document.getElementById from another page?
    By akdream in forum JavaScript
    Replies: 5
    Last Post: 08-28-2021, 05:57 PM
  2. document.getElementById
    By locbtran in forum JavaScript
    Replies: 5
    Last Post: 05-28-2012, 09:10 AM
  3. Troubles with document.getElementById with more DIV's
    By wbaas in forum JavaScript
    Replies: 0
    Last Post: 04-08-2009, 04:07 PM
  4. document.getElementById issue
    By svoirin in forum JavaScript
    Replies: 1
    Last Post: 04-12-2006, 10:09 AM
  5. document.getElementById(cis) has no properties
    By requiem in forum Dynamic Drive scripts help
    Replies: 12
    Last Post: 11-19-2005, 08:02 PM

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
  •  

Forum Rules