I need to have an "Add Features" button that will append the following text to the already existing text in a textarea:
<b>Features:</b>
<ul>
<li>Feature 1 here</li>
<li>Feature 2 here</li>
</ul>
It needs to appear in html form, so that the user can see the tags as well as their contents. Here is the HTML I'm using:
<tr class="addItemFormDark">
<td class="descriptionLabel">
<p>Description:</p>
</td>
<td>
<textarea name="description" id="addItemDescription" cols="77" rows="6"></textarea>
</td>
</tr>
<tr class="addItemFormDark">
<td colspan="2">
<input type="button" onclick="addFeatures('addItemDescription')" value="Add Features"/>
</td>
</tr>
...and here is the JavaScript I'm using:
function addFeatures(id) {
var contents = document.getElementById(id).innerHTML;
contents += "<b>Features:</b>\r<ul>\r\t<li>Feature 1 here</li>\r\t<li>Feature 2 here</li>\r</ul>";
document.getElementById(id).innerHTML = contents;
}
Now here is that part I'm having trouble with. If the textarea is empty, as it is to begin with, the desired text will be added to the textarea fine, and this can be repeated multiple times with each block of text being successfully added after the last.
However, if the user types anything in the box, whether into the empty text area, or after the successful addition of one of the desired blocks of code, this completely disables the button. It will then no longer add anything to the textarea until the page is refreshed.
I got exactly the same result if I used JQuery's .append method and gave the textarea and button an id.
Can anyone help?
innerHTML is not the correct property to use for setting a textarea's value. Use value instead.
function addFeatures(id) {
var textarea = document.getElementById(id);
textarea.value += "<b>Features:</b>\r<ul>\r\t<li>Feature 1 here</li>\r\t<li>Feature 2 here</li>\r</ul>";
}
With jquery I would use this:
var appendData = //the HTML text you want to add
var currentData = $("#textboxID").val();
var newData = currentData+appendData;
$("#textboxIS").val(newData);
Related
I have some value in textbox and lower have the button.
Onclick I need to update the inside of with this value (which will be HTML tags)
I have tried:
javascript:
<script>
function copyfunction() {
var textarea = document.getElementById('mytextarea');
var preview = document.getElementById('html_preview');
preview.innerHTML = textarea.value;
}
</script>
html:
<textarea id=mytextarea name=text>some initial text</textarea>
<button type=button onclick=\"copyfunction();\">Preview</button>
<table><tr>
<td id=html_preview></td>
</tr></table>
but it doesnt do anything
EDIT: sorry for leaving escapes \ but im doing this in php, so:
echo "<button type=button onclick=\"copyfunction();\">Preview</button>";
- and it doesnt work, however when i do it in simple html, then it does :(
EDIT2: im sorry for all of your efforts, it work fine, however im implementing TinyMCE and it doesnt work with this app :(
Once TinyMCE is initialized and visible on the page the original textarea is no longer visible. When you init TinyMCE it renders an iframe as the content editing area (effectively hiding the textarea).
If you want to extract the content TinyMCE you need to use the TinyMCE APIs to do so. You can use getContent() to retrieve the current content of the editor:
https://www.tiny.cloud/docs/api/tinymce/tinymce.editor/#getcontent
For example:
tinymce.activeEditor.getContent();
Here is a working example of how you could sync a neighboring DIV with the content in TinyMCE:
http://fiddle.tinymce.com/HLgaab/5
Made some changes to your code and it works. In onclick=\"copyfunction();\ you need to remove the \s
function copyfunction() {
var textarea = document.getElementById('mytextarea');
var preview = document.getElementById('html_preview');
preview.innerHTML = textarea.value;
}
<textarea id=mytextarea name=text>some initial text</textarea>
<button type=button onclick= "copyfunction()">Preview</button>
<table>
<tr>
<td id=html_preview></td>
</tr>
</table>
Leave out those escaping backslashes in your HTML attributes.
Also you should put all attribute values in double-quotes.
function copyfunction() {
var textarea = document.getElementById('mytextarea');
var preview = document.getElementById('html_preview');
preview.innerHTML = textarea.value;
}
<textarea id="mytextarea" name="text">some initial text</textarea>
<button type="button" onclick="copyfunction();">Preview</button>
<table><tr>
<td id="html_preview"></td>
</tr></table>
The following code generates a website which gives the user the opportunity to input a ingredient with corresponding amount (the input fields).
After the user pressed the add button the inputs of ingredient and amount are displayed in a table. Furthermore the third cell of the added row should be a remove button.
The only part of the provided code which is not working at the moment is the creation of the remove button. I am super new to web development and also to the handlebar library.
My question is how I can correctly display the button while using the handlebar library? Currently, instead of the actual button [object HTMLButtonElement] gets displayed. I am sure this is possible but I couldn't find the right way.
Code:
<html>
<head>
<script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/4.0.11/handlebars.min.js"></script>
<script id="result" type="text/template">
<tr>
<td> {{ ingredient }} </td>
<td> {{ amount }} </td>
<td> {{ change }} </td>
</tr>
</script>
<script>
const template = Handlebars.compile(document.querySelector('#result').innerHTML);
document.addEventListener('DOMContentLoaded', () => {
document.querySelector('#add').onclick = () => {
// create the remove button (HERE IT GOES WRONG)
const btn = document.createElement("BUTTON");
btn.innerHTML = "remove element";
btn.className = "remove";
// get the inputs
const ingredient = document.querySelector('#ingredient').value;
const amount = document.querySelector('#amount').value;
const content = template({'ingredient': ingredient, 'amount': amount, 'change': btn});
document.querySelector('#tab').innerHTML += content;
};
});
</script>
</head>
<body>
<input type="text" id="ingredient">
<input type="text" id="amount">
<button id="add">Add</button>
<table id="tab">
<tr>
<th>Ingredient:</th>
<th>Amount:</th>
<th>Change:</th>
</tr>
</table>
</body>
</html>
I am grateful for any help.
You are mixing two different ways of adding content to the DOM. The first is using Handlebars to compile a HTML template String into a function that will return an interpolated HTML string when passed a data context Object. The second is using document.createElement to create DOM nodes that will be directly inserted into the DOM with DOM methods like .appendChild().
The btn variable you are creating is getting assigned to it the result of document.createElement("BUTTON"), which is an HTML Button Element Object. When you pass this to your compiled template function, Handlebars only knows to try to stringify it in order to make it a part of the rendered output. When this Object is stringified, it produces "[object HTMLButtonElement]".
You could do some unpleasant work to get the rendered HTML string of your button element and pass that to your template function, but the better thing to do would be to leave the HTMLing to the template.
This would mean removing all of your const btn code and replacing that variable in your template with the desired HTML.
Therefore:
<td> {{ change }} </td>
Becomes:
<td><button class="remove">remove element</button></td>
Of course the next tricky part becomes how to bind a click handler to these dynamically added buttons; but this is outside the scope of this question.
I'm trying to get a variable in JS code to be displayed within a DIV within a table. I've cut the code down for simplicity just trying to get this working properly.
Firebug is reporting:
document.getElementById("valuelabel") is null
Here is the code:
<table>
<tbody>
<tr>
<td>
Value:
</td>
<td>
<div id="valuelabel"></div>
</td>
</tr>
</tbody>
</table>
<script language="javascript" type="text/javascript">
var mktValue = "12000";
document.getElementById("valuelabel").value = mktValue;
</script>
The mktValue will be a dynamically assigned numeric value; a textbox entry from another form. I just put "12000" in for testing purposes.
Within Firebug, it's shows the following for the dynamically assigned value.
var mktValue = '120700';
Thanks..
Divs don't have a "value", they do however have "innerHTML"
document.getElementById("valuelabel").innerHTML = mktValue;
div elements don't have a value (only form fields do). You can set the div's content via textContent (just text) or via innerHTML (HTML):
document.getElementById("target1").textContent = "This is normal text, <and> aren't special here.";
document.getElementById("target2").innerHTML = "This is HTML text, so <strong>tags</strong> are rendered as elements.";
<div id="target1"></div>
<div id="target2"></div>
you can use jquery to insert value into the specific id by using
$("#valuelabel").html(mktValue)
I am using the following code
<tr id="row">
<td><input type="text" name ="first" id="first" onclick="goto("row")"/>
</td>
<td><input type="text" name ="second" id="second"/>
</td>
</tr>
<script>
function goto(row)
{
var row=document.getElementById("row");
}
</script>
here in the goto() function i am getting the table row by using id.I need to get the second text box inside this row when i clicking the first text box.How can i get the second text box using the table row id. Any idea ?.
First off, you're missing some equals (=) signs in your HTML. You might want to change that to name="first" and name="second". Secondly, I'm not sure why you have two elements with the same id of "second" when you could have changed one of them to "first" so they don't collide, and then you could easily select the second one with getElementById("second"). Simple mistake, right?
Change the ids, make them unique and you could directly access the input textbox like:
var txtbox = document.getElementById("YourTextboxId");
I'm working on a job with a developer who is taking care of coding that's beyond my ability; mostly PHP and more complex Javascript (I'm only okay at jQuery).
Part of the work the developer has been doing involves checking a database and dynamically entering results into the page. The problem is that currently these results are entered into a <textarea>, which is not ideal as it means that if it's readonly, the results cannot be deleted if the user changes their mind. If it's not readonly, the user can enter any text they like into the textarea, rendering the page unusable. In addition, I'm unable to apply any CSS to the results within the textarea.
Also, the developer is using tables, one of my pet hates.
I would like the <textarea> to be instead a <div> containing a <div> for each database result found.
The developer is currently away for a few weeks and I would prefer to get this done sooner rather than later. I've tried changing "td" simply to "div" but obviously that didn't work.
I'd really appreciate some help. I've included the code below. Unfortunately, I'm unable to give access to the live/testing site (beyond my control) and apologise for that.
if(answer)
{
var newRow = document.getElementById("target_table");
var Row = newRow.rows.length;
var row1 = newRow.insertRow(Row);
var index=row1.rowIndex;
var td1= document.createElement("TD")
var td2= document.createElement("TD")
td2.innerHTML = "
<INPUT TYPE='hidden' NAME='course"+Row+"' id='course"+Row+"' value='"+answer+"'>
<INPUT TYPE='hidden' NAME='ary"+Row+"' id='ary"+Row+"'>
<INPUT TYPE='hidden' NAME='Dary"+Row+"' id='Dary"+Row+"'>
<p class='courseName'>"+answer+"</p>
<div id='boxRw"+Row+"' class='boxyHolder'>
<TABLE border=1 cellspacing=2>
<TR>
<TD>
<INPUT TYPE='button' name='Add a favourite to this course' value='Add a favourite to this course' onclick='javascript: window.open(\"<?=$path?>add-my-favourites/"+Row+"\",\"mywindow\",\"left=550,top=200,width=400,height=350,toolbar=1,resizable=0\");'>
</TD>
</TR>
<tr>
<td colspan=2>
<TABLE border=1>
<TR>
<TD valign=top>Favourites:</TD>
<TD>
<TEXTAREA class='fav-box' NAME='reps"+Row+"' id='reps"+Row+"' ROWS=4 COLS=45></TEXTAREA>
<input class='fav-box' TYPE='hidden' NAME='repsId"+Row+"' id='repsId"+Row+"' value=''>
</TD>
</TR>
</TABLE>
</td>
</tr>
</TABLE>
</div>";
row1.appendChild(td1);
row1.appendChild(td2);
document.getElementById("h").value=Row;
}
function setVal(){
var r = "<?=$_GET['hVal']?>";
var y = "reps"+r;
var y1 = "repsId"+r;
window.opener.document.getElementById(y).value+=document.frm.favourites.value+',';
window.opener.document.getElementById(y1).value+=document.frm.recp_listId.value+',';
window.close();
}
Edit: I believe these are the lines I need to change:
window.opener.document.getElementById(y).value+=document.frm.recipes.value+',';
window.opener.document.getElementById(y1).value+=document.frm.recp_listId.value+',';
I think the problem is that these lines are adding the value to what is currently a <textarea>. When I change the textareas to divs, the values are not applied to the divs. So I need to change the code so that it enters the results as text in the divs - not values.
If you use a div, use its textContent property, not value like you'd use for form controls such as textarea and input. You are getting no error because you're ending up creating a value property on the div.
Code snippet #1
var div = document.createElement('div');
div.textContent = document.frm.recipes.value;
window.opener.document.getElementById(y).appendChild(div);