How do I save user-entered line breaks from a <textarea> HTML element to a database?
It always removes the line breaks.
TextArea HTML element is preserving the white space in the database.
The problem appears when trying to display the \n on the web browser, which will fail.
To display \n in the web browser use :
<p style="white-space: pre-line">multi-line text</p>
When displaying the content you need to convert line breaks into <br /> tags, otherwise the web browser won't display them. This is probably why you think they aren't being saved. If you're using PHP, use the nl2br() function to do this. In other languages you could do a string replace, replacing all occurrences of "\n" with "<br />".
Just put the output text between <pre></pre> tags, that will preserve the line breaks.
I just learnt to use php's nl2br function and it is working fine for me.
I'm using it to style how my users receive an email when sent from another user.
Your problem will be solved using 'white-space' property: simply use:
<textarea name="description" id="description" style="white-space: pre-wrap;"></textarea>
And continue your work.
I know from experience that Browser text areas are less well-behaved than one would like, especially with regard to line breaks.
You could can to see if javascript would be able to interrogate the text area and find the line breaks before the text is sent to the server and so send the data in a more well-formatted way. But the amount of javascript debugging necessary to make this work across multiple browsers is probably not worth the effort.
Perhaps you should say that format you are trying to capture your data. There may be a better way to get the data than keeping track of line-breaks - though lines breaks can seem like any easy thing to capture in user input.
I noticed that breakable content saved normally if textarea is inside a html form. But if I use textarea without any form and try to edit a long text in it, insert line breaks and save content via ajax, it's saved as a merged text into database
Use PHP nl2br() Function while saving data from textarea to database
like below
<textarea
name="PostContent"
class="form-control"
rows="12" cols="30"
id="PostContent"
required=""
style="white-space: pre-wrap; text-indent: 50px;"
>
</textarea>
$PostContent=$_POST["PostContent"];
$output =nl2br($PostContent);
use $output variable to save to Database
you can add text in the text area and see the formatted text below.
function ex() {
const text = document.getElementById("description").value;
const ss = document.getElementById("add");
ss.textContent = text;
}
<textarea name="description" id="description" style="white-space: pre-wrap;"></textarea>
</br>
<button onclick="ex();">check</button>
</br>
<p style="white-space: pre-line" id="add"></p>
<style>
p {
color: red;
text-align: center;
}
</style>
Working on a project for my school building an MVC Sinatra application. I want to create a web app that can save and display back snippets/algos using ace editor.
I figured out how to (seemingly) capture form input through ace editor by hiding the input field and assigning the value from ace on change with the snippet below.
//CAPTURE/SET VALUE
var textarea = $('input[name="content"]');
editor.getSession().on("change", function () {
textarea.val(editor.getSession().getValue());
});
my form looks like this
<!--ACE EDITOR-->
<div id="editor"></div>
To open settings panel, inside editor - CTRL+Q (Windows) | CMD+Q (Mac)
<!--------------------------------------------------------->
<!--FORM-->
<form action="/ace" method="POST">
<!--normal-->
<input type="text" name="content" style="display: none;" />
<!--submit-->
<input type="submit" value="Save">
</form>
I can capture the params fine but the problem is it doen't preserve the line breaks so entering...
def something
end
into ace editor and clicking submit gives me back
"def something end"
when I would love in theory to get something like
"def something\n\nend"
or something of the sort.. you get the drift
I need to be able to somehow use the editor to capture input, and on submit assign that to an object attribute so pseudo
snippet = Snippet.new(:content => params[:content])
then be able to call that back and display back on editor in the right format
snippet.content (preserves linebreaks)
Full code and images HERE if you rather visuals.
Any help would be appreciated and if there is anything I'm missing out please let me know.. hope I've supplied sufficient info and detailed properly.
input doesn't accept newlines, you need to use textarea instead.
I need to set in ace editor this data correctly
(myCode):
<p><?php<br />// PHP code goes here<br />?></p>
i cant use
editor.setValue(myData);
becouse myData isn`t clear code (have arbitrary HTML also)
I tried this:
html
<div id="editor" v-html="myData">
</div>
js
var editor = ace.edit("editor");
editor.getSession().setMode("ace/mode/php");
How I can do this ?
I am not able to figure this out for a while now.
I want to use super script in Alt attribute of an image. The code that I have made works fine when I use it with
document.write
innerHTML
because I understand that the HTML parser when reads the script reads the <sup></sup> tags and makes the text between it as superscript. But how to make the Alt attribute or rather an <input> tag have a superscript value.
I want something like this:
<input type="text" value="Hi, this is my 1<sup>st</sup> award">
to output on the screen as an input box with pre-filled text
I have made the following code, but cannot figure it out to put it in place:
<body>
<img src="test.jpg" height="400px" width="500px" alt=''>
<script type="text/javascript">
var title = "Test String having 1st";
var one = "st";
one='1'+one.sup();
title = title.replace(/1st/g, one);
document.getElementsByTagName('img')[0].setAttribute('alt',title);
</script>
</body>
For easier solution you can use an editor and remove the toolbar and set the html content of it, here is an example editor https://mindmup.github.io/bootstrap-wysiwyg/ , you can easily turn off the toolbar and then add your desired html to it.
For alt you can use the on error attribute and call a custom attribute on it. Let me know if you need any further elaboration.
How do I display multiline text in editable textbox on device screen? At the moment, if the text is not editable then it shows the full text in multiline. The same value is displayed in 2 textboxes, one is editable and one is non-editable.
<groupitem id="WorkExecution.groupitem_1">
<text cssClass="richText" editable="false"
id="WorkExecution.groupitem_1_abc" resourceAttribute="abc"/>
</groupitem>
<groupitem id="WorkExecution.groupitem_2">
<text cssClass="richText" editable="true"
id="WorkExecution.groupitem_2_xyz" placeHolder="Tap to enter"
resourceAttribute="xyz"/>
</groupitem>
e.g. if the value reads -
IBM® Maximo® Anywhere gives you remote access from most mobile devices to Maximo Asset Management processes – work and asset management. It is built with an interface that is customizable, so you can create your own assets.
then the value of abc is displayed properly in multiline format whereas value of xyz is displayed in a single line and not in multiline.
Do I need to apply any CSS here?
In the OOB app.xml if you look at the view
<view editableView="WorkExecution.NewWorkLogView" id="WorkExecution.WorkLogDetailView" label="Work Log Entry">
You will see the multi line editable detail attribute near the bottom
<groupitem id="WorkExecution.WorkLogDetailView_workOrder_groupitem_5">
<text cssClass="richText" editable="false" id="WorkExecution.WorkLogDetailView_workOrder_groupitem_5_details_Details" label="Details" resourceAttribute="details"/>
</groupitem>
As you already have the editable and css attributes set, my guess is that on your view it is not defined as an editableView.
For a editable multiline widget you need to use the textarea widget. See our WorkLog details page in 7.5.2 for an example.
<groupitem id="WorkExecution.NewWorkLogView_workOrder_groupitem_5">
<textarea editable="true" id="WorkExecution.NewWorkLogView_details_0" label="Work Log Details" placeHolder="Tap to enter" resourceAttribute="details"/>
</groupitem>