Force line break before adding string in JS? - javascript

<body>
<center>
<input type="text" id="item">
<button onclick="getItem()">Add to List</button> <br>
<textarea readonly id="list"></textarea>
</body>
<script>
function getItem() {
document.getElementById("list").value += document.getElementById("item").value;
}
</script>
</html>
As you may be able to tell, I have created an "Item" textbox and a button that, when clicked, adds the content of said "Item" textbox to the "List" textarea.
What I want to know is how do I add a line break before it adds the item?

document.getElementById("list").value += "\n" + document.getElementById("item").value;

Related

Is it possible to use the submit function to save textareas to a new file?

I am trying to see if it is possible to use a script to write two text areas to a single file when clicking "Submit" on my page? (For total context, these are HTML pages being hosted locally on the machine and are not being housed on a server anywhere)
I successfully learned to erase the two text areas with javascript:eraseText and having that button set the values to "".
I have been looking for an option but I don't know if I'm asking it the right way.
Any help is appreciated.
Edits for clarity
<!DOCTYPE html>
<html>
<head>
<script>
function eraseText() {
document.getElementById("one").value = "";
document.getElementById("two").value = "";
}
function submit() {
}
</script>
</head>
<body>
<div id="boxes">
<textarea id='one' rows="20" cols="70">
</textarea>
<p></p>
<textarea id='two' rows="20" cols="70">
</textarea>
</div>
<p></p>
<input type="button" value="Clear" onclick="javascript:eraseText();">
<input type="button" value="Submit" onclick="javascript:submit();">
</body>
</html>
So I'd like to click submit and have the values in "one" and "two" parsed to a single HTML output.
<!DOCTYPE html>
<html>
<head>
<script>
function eraseText() {
document.getElementById("one").value = "";
document.getElementById("two").value = "";
}
function submit() {
var combined = "";
combined += document.getElementById("one").value;
combined += document.getElementById("two").value;
document.getElementById("destination").innerHTML = combined;
}
</script>
</head>
<body>
<div id="boxes">
<textarea id='one' rows="20" cols="70">
</textarea>
<p></p>
<textarea id='two' rows="20" cols="70">
</textarea>
</div>
<p id="destination"></p>
<input type="button" value="Clear" onclick="eraseText();">
<input type="button" value="Submit" onclick="submit();">
</body>
</html>
The solution that doesn't use any server-side code to accomplish this, if I understand your question correctly, is as follows.
Let's write what your HTML probably currently looks like.
<textarea></textarea>
<textarea></textarea>
<button type="submit">Submit</button>
Let's first add an output area where the preview will appear. This could be a <div></div> element.
Now, add id attributes to all the elements (I'll use the IDs "a", "b", "c", and "d", and the output DIV. This allows JavaScript code to easily grab a certain element using the Document Object Model.
Once done, this is the code
document.getElementById("d").addEventListener("click", function(){ // do this when element with id `d` is clicked
document.getElementById("c").innerHTML = // set the output element's inner HTML to...
document.getElementById("a").value + document.getElementById("b").value
})
<textarea id="a"></textarea>
<textarea id="b"></textarea>
<div id="c"></div>
<button id="d">Submit</button>
document.getElementById(IDGOESHERE) returns a JavaScript object representing the element with that ID. .addEventListener binds something to an event happening (in this case, the click event triggers a function to be called).
That function takes the values of the two textareas, and adds (joins) them together using the + operator, which concatenates with strings.
It then assigns this HTML using the .innerHTML property of the output element.
I'm not sure if this is what you wanted, so please do clarify if it isn't.

Javascript append text to textarea with line break

I have a button that the user can click to merge text from 2 textareas but when they click it the text from the second textarea is added to the end of the first so it is displayed in one line. I would like to add a line break to the end line of text so the appended text is on a new line.
<input type="button"
class="copy_submit"
value="<< Copy"
onclick="document.forms['merge_form'].notes1.value += document.forms['merge_form'].notes2.value;" />
Include newline character before .value at attribute event value
<input type="button" class="copy_submit" onclick="document.forms['merge_form'].notes1.value += '\n' + document.forms['merge_form'].notes2.value;" value="<< Copy" />
You could use \n :
document.forms['merge_form'].notes1.value += '\n'+ document.forms['merge_form'].notes2.value;
Hope this helps.
textarea{
height: 100px;
}
<form name='merge_form'>
<textarea name="notes1">Textarea 1 content</textarea>
<input type="button" class="copy_submit" onclick="document.forms['merge_form'].notes1.value += '\n'+ document.forms['merge_form'].notes2.value;" value="<< Copy" />
<textarea name="notes2">Textarea 2 content</textarea>
</form>
use this snippet as boilerplate.
first access the dom element values, then use it - write somewhere on document, or to an input..
document.querySelector('button').addEventListener('click', function(){
var ta1Text = document.getElementById('ta_1').value;
var ta2Text = document.getElementById('ta_2').value;
var res = ta1Text + "\n"+ta2Text;
document.getElementById('ta_3').value = res
});
<textarea id="ta_1">
</textarea>
<textarea id="ta_2">
</textarea>
<textarea id="ta_3">
</textarea>
<button>Merge</button>

Displaying textarea content on click of button

I am having a text area and a button.Like this :
<textarea id="txtarea"></textarea>
<input type="button" value="add text" id="add" />
Now,what i want to do is that on click of the button that text to be displayed on the same page above this text area just like we do comment or answer a question on stackoverflow.
How this can be done ?Please help.
you can do this using javascript
add any tag before (generally div or span tag is used) textarea tag
<div id="adduserdata"></div>
<textarea id="txtarea"></textarea>
<input type="button" value="add text" id="add" onclick="showtext()" />
Javascript code would be
function showtext(){
var text = document.getElementById("txtarea");
var showarea = document.getElementById("adduserdata");
showarea.innerHTML=text.value;
}
here is working example
As what you want, thus appending to the <div> division element, I assume that you will accept this answer (as a summary to all the comments and answers above) :
<!-- This is the HTML Part -->
<div id="text"></div>
<textarea id="new"></textarea>
<input type="button" onclick="appendTextToDiv();" />
<script>
function appendTextToDiv(){document.getElementById("text").innerHTML = document.getElmentById("text").innerHTML + document.getElementById("new").value;}
</script>
This can let you simply append it to the text. Fiddle
This will do if using Jquery (and previously text will stay) :
$('.button').click(function(){
var text = $('textarea').val();
if(text!=''){
$('p').text(text);
}
});
or like this:
$('.button').click(function(){
var text = $('textarea').val();
if(text!=''){
$('<p></p>').text(text).insertBefore('textarea');
}
});
Fiddle

What should I do for creating " new line through enter key” and then display paragraph when selecting “see what can u wrote”

I am trying to create paragraph box. but unable to place logic for "enter" (when user press enter it should immediately goes to new line.
This is the code but it writes in the line, i want the string to be placed in new line:
<html>
<head>
</head>
<body>
<script>
function write(){
var Input = document.getElementById('Input').value;
document.getElementById('writeText').innerHTML = Input;
}
</script>
<p>You wrote: <span id='writeText'></span> </p>
<input type='text' id='Input' value='Write here' />
<input type='button' onclick='write()' value='See what you wrote'/>
</body>
</html>
How can i achieve this?
Multiline text fields require a <textarea> element instead of a <input type="text"> element. There is no "logic for enter", this has nothing to do with JavaScript, you just need to use the correct element.

How to Remove last inserted div in javascript?

<div id="file">
<input type="file" name="txtImage" multiple="multiple" class="upload" />
<input type="text" name="txtImageDesc" class="desc" />
</div>
<input type="button" value="Add" name="addButton" onclick="javascript: add_more();" />
<input type="button" value="Remove" name="removeButton" onclick="javascript: remove();" />
The above is two button which add or remove div on its calls.I have a java script function which is adding a div in html on call which works perfect
function add_more()
{
var txt = " <p><label>Upload Image</label><input type=\"file\" name=\"txtImage[]\"></p> <p>
<label>Image Description</label><input type=\"text\" name=\"txtImageDesc[]\"> </p>";
document.getElementById("file").innerHTML += txt;
}
However i am using the same script(with modification) to remove the last inserted div in it but its removing the whole html in the div.Here is the code:
function remove() {
var txt = " <p><label>Upload Image</label><input type=\"file\" name=\"txtImage[]\"></p>
<p><label>Image Description</label><input type=\"text\" name=\"txtImageDesc[]\"> </p>";
document.getElementById("file").innerHTML -= txt;
}
The output it generate is.I want the last div inserted to be remove on button click
NaN
As already said in comments, you are adding p elements here, not div.
If you don’t want to use jQuery, you can do it in “pure JS” as well, like this:
function lastParagraphBeGone() { // brilliant function name :-)
var paragraphs = document.getElementById("file").getElementsByTagName("p");
var lastParagraph = paragraphs[paragraphs.length-1];
lastParagraph.parentNode.removeChild(lastParagraph);
}
$('#file p').slice(-2).remove(); will remove the last 2 P elements from your #file element:
LIVE DEMO
HTML:
<input type="button" value="Add" name="addButton" />
<input type="button" value="Remove" name="removeButton" />
<div id="file"></div>
jQ:
var html = " <p><label>Upload Image</label><input type=\"file\" name=\"txtImage[]\"></p><p><label>Image Description</label><input type=\"text\" name=\"txtImageDesc[]\"></p>";
$('[name=addButton]').click(function(){
$('#file').append( html );
});
$('[name=removeButton]').click(function(){
$('#file p').slice(-2).remove();
});
https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/Array/slice
Javascript uses the same operator for concatenation and for addition; so adding works.
But the minus operator is only for subtraction. So you try to subtract text from text which aren't numbers, so it's a NaN.
You cannot remove by this way: Use some function to search the beginning of this string and extract it so or simply add an id attribute to your <p> tag, so you can simply hide it when not needed anymore.
This works for me. One thing that seems to break this kind of function is when the adding text is on separate lines. So, always put that kind of "txt" addition on a single line in javascript.
<script type="text/javascript" >
function add_more()
{
var txt = " <p><label>Upload Image</label><input type=\"file\" name=\"txtImage[]\"></p><p><label>Image Description</label><input type=\"text\" name=\"txtImageDesc[]\"> </p>";
document.getElementById("extra-text").innerHTML = txt;
}
function remove() {
document.getElementById("extra-text").innerHTML = '';
}
</script>
<input type="button" value="Add" name="addButton" onclick="javascript: add_more();" />
<input type="button" value="Remove" name="removeButton" onclick="javascript: remove();" />
<div id="file"><h1>Existing text</h1>
<div id="extra-text"></div>
</div>

Categories