Log in

View Full Version : document.getElementById alternative


tochrene
10-23-2013, 09:38 PM
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!



<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>
jscheuer1
10-24-2013, 07:01 AM
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:


<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:


<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>