Hi everyone,
I am having problems to add text to a textarea
using javascript. Well the problem is not that exactly, when I click in some buttons the text is added to the textarea, but not always and not like I want. Imagine I have a text already written in the textarea, if I want to put that text in bold I select that text, and I press the button to bold it. What I should get is this:
[b]I am using bold[ /b]
But I get this:
I am using bold[b][ /b]
Also I don’t know why, but if I write something in the textarea and I want to bold something, or just press in any button to write another different tags, the text it is not written. I could create a video if that helps to understand my problem.
The code I am using:
JavaScript:
<script type="text/javascript">
function insertText(elemID, text)
{
var elem = document.getElementById(elemID);
elem.innerHTML += text;
}
</script>
HTML:
<form class="hilo_wrapper" action="crear_hilo.php?foro=<?php echo str_replace(" ", "%",$foro) ?>&subforo=<?php echo $subforo ?>" method="post">
<div class="data_hilo">
<input type="text" name="asunto" placeholder="Asunto:">
</div>
<div class="botones_crear_hilo">
<button type="button" accesskey="b" data-code="[b]" data-close="[/b]" onclick="insertText('txt1', '[b][/b]');" title="Negrita: [b]texto[/b] (Alt+B)">
<i class="fa fa-bold fa-fw"></i>
</button>
<button type="button" accesskey="i" data-code="[i]" data-close="[/i]" onclick="insertText('txt1', '[i][/i]');" title="Cursiva: [i]texto[/i] (Alt+I)">
<i class="fa fa-italic fa-fw"></i>
</button>
<button type="button" accesskey="u" data-code="[u]" data-close="[/u]" onclick="insertText('txt1', '[u][/u]');" title="Subrayado: [u]texto[/u] (Alt+U)">
<i class="fa fa-underline fa-fw"></i>
</button>
<button type="button" accesskey="q" data-code="[quote]" data-close="[/quote]" onclick="insertText('txt1', '[quote][/quote]');" title="Cita: [quote]texto[/quote] (Alt+Q)">
<i class="fa fa-quote-right fa-fw"></i>
</button>
<button type="button" accesskey="c" data-code="[code]" data-close="[/code]" onclick="insertText('txt1', '[code][/code]');" title="Código: [code]texto[/code] (Alt+C)">
<i class="fa fa-code fa-fw"></i>
</button>
<button type="button" name="img" accesskey="p" onclick="insertText('txt1', '[img][/img]');" title="Imagen: [img]http://www.ejemplo.com/imagen.jpg[/img] (Alt+P)">
<i class="fa fa-picture-o fa-fw"></i>
</button>
<button type="button" name="url" accesskey="w" onclick="insertText('txt1', '[url][/url]');" title="URL: [url]http://www.ejemplo.com[/url] o [url=http://www.ejemplo.com]texto[/url] (Alt+W)">
<i class="fa fa-link fa-fw"></i>
</button>
<button type="button" accesskey="s" data-code="[spoiler]" data-close="[/spoiler]" onclick="insertText('txt1', '[spoiler][/spoiler]');" title="Spoiler: [spoiler]texto[/spoiler]">
<i class="fa fa-list-alt fa-fw"></i>
</button>
<button type="button" name="mention" title="Mención">
<span class="fa-fw" onclick="insertText('txt1', '@');" style="display: inline-block">@</span>
</button>
</div>
<div class="col-100">
<textarea id="txt1" name="texto_hilo" placeholder="Texto:"><?php if (isset($_POST['vista_previa'])) { echo $vista_previa;} ?></textarea>
<div class="col-emoticonos-enviar">
<input type="submit" name="vista_previa" value="Vista previa">
<input type="submit" name="guardar_borrador" value="Guardar borrador">
<input type="submit" name="crear_hilo" value="Crear hilo">
</div>
</div>
</form>
Thanks in advice.