How to show spaces from textarea [closed] - javascript

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
Hi I'm saving data in a text area on page 1 then showing it on page 2 in a div. However if I write in the textarea
A
B
C
D
It shows it in the div (on page 2) as
A B C D
How do I maintain the line breaks?

Use the CSS property white-space to accept \n as new lines.
div {
white-space: pre;
}
JSFiddle

You can do it with the below code:
function setVal() {
var content = document.getElementById('test').value;
document.getElementById('result').innerHTML = content.replace(/\n/g, '<br/>');
}
Explanation: Basically, the need is to convert the \n characters to their equivalent HTML line breaks using <br/>.
Demo

You need to use this function nl2br() and FYI Don't use nl2br when you save it to the database. Use it when you're displaying the text in HTML.

I would use the <pre> tag which is used for preformatted texts like this on your second page.
An example of which would be this:
<?
echo '<pre>'.$_POST['textarea'].'</pre>';
It preserves both spaces and linebreaks.

$textarea = strip_tags($_POST['textarea']);
echo '<textarea>'.nl2br($textarea).'</textarea>';
nl2br = new line to <br>, so it'll insert <br><br> for every carriage return.

You should use nl2br when displaying the value in div
Online Demo
Here is the code so that you can run it check.
<form>
<textarea name="message" rows="10" cols="50" placeholder="Enter your message here"><?=$_REQUEST['message']?></textarea><br>
<button name="submit" value="submit">Submit</button>
</form>
<h2>Your message will display here</h2>
<div><?=nl2br($_REQUEST['message'])?></div>
<h3>Always remember that don't store nl2br value in database.</h3>

Related

How do I switch html pages with JavaScript if I don't have the Url [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 17 hours ago.
This post was edited and submitted for review 17 hours ago.
Improve this question
I have them both as HTML files in my repo. The button is just meant to switch from pages for now. I will add the function for the inputs and conditions later. I just want to get in working before I add anything. There are also no errors that or popping up. I cannot use a tag as I need to change the URL to pass data through it, so I need to have it in JS so I can change it with the data from the input.
The plan is to have the user put in their name in a text input, and have it inside the Url, then have the 2nd page process the name and output a text and photo.
This is the code that I have tried.
const nameButton = document.getElementById("nameBtn");
$(nameButton).click(function(){
preventDefault()
function change_page(){
window.location.replace("page-two.html");
};
change_page()
});
This is the Html:
<input class="font" type="text" id="inputName" value="Type in
your name..."></input>
<button class="fonts" id="nameBtn">Ready?</button>
</form>
</div>
</body>
<script src="scripts/script.js"></script>
</html>
Short answer, only replace the pathname
window.location.pathname = 'page-two.html'
In your case:
const nameButton = document.getElementById("nameBtn");
nameButton.addEventListener('click', function (event) {
event.preventDefault()
window.location.pathname = "page-two.html";
});

how to make enter on input show up on output [duplicate]

This question already has answers here:
angularjs newline filter with no other html
(7 answers)
Closed 6 years ago.
When the user presses enter in the input box I would like that to reflect in the H1 tag.
As you can see when the user types
Line 1
they can press enter and create
line 2 in the input no problem, but the output in the h1 tag is still "Line 1 line 2" all on one line.
Please look at the fiddle as that will make a lot more sense.
I was thinking about using a keypress function to get when the user presses enter and then do something with that? I'm not sure if there is a better way though.
https://jsfiddle.net/BSmyth634/ovz8thrp/
<div ng-app>
<form>
<textarea rows="4" type="text" ng-model="todoText" size="30" placeholder="add new todo here">
</textarea>
</form>
<h1>
{{todoText || 'Hello World'}}
</h1>
</div>
You need to use style="white-space: pre;" in your code to do it.
JS Fiddle
I see two ways to achieve what you want.
Use white-space css property. In your case the pre-line value might be interesting.
Create Angular's filter and use it.
you can use pre element instead of h1
<pre>{{todoText || 'Hello World'}}</pre>
or use this
<h1 ng-repeat="line in todoText.split('\n')">
{{line}}
</h1>
Jquery approach
$("textarea").on('keypress',function(e){
if(e.keyCode == 13){
$('h1').html($("textarea").val())
}
})

html forum and javascripty [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
How to get an text field text in to an array? Is it possible to get a text from text field and put it in to character array to select each Alphabet and use it in different places?
Like I have a words
Computer
<input type="text" name="name" />
I need it like in different Block Like Name Speel
[C] [o] [m] [p] [u] [t] [e] [r]
Any help appreciated.
What you might want is the following JavaScript:
"Computer".split("")
I think that the main problem is this part: "select each Alphabet and use it in Different Places Like..." so the solution is to use .charAt() function.
<!DOCTYPE html>
<html>
<body>
<p>Click the button to display.</p>
<button onclick="myFunction()">Try it</button>
<p id="demo"></p>
<script>
function myFunction() {
var str = "How are you doing today?";
var res = str.charAt(0);
document.getElementById("demo").innerHTML = res;
}
</script>
</body>
</html>

How on one click another page div value change using JavaScript? [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have two page page1.php, page2.php and one JS file Control.js.
In page1.php
HTML :
<img src="images/b.jpg" width="31" height="26" id="imgClick1" onClick="return changeImage1(this)" >
In Control.js
function changeImage1() {
document.getElementById("imgClick1").src = "images/b.jpg";
document.getElementById('num1').style.color = "#fff";
document.getElementById("text1").innerHTML = "Hello friend";
}
In page2.php
<div id="text1">
Hello world
</div>
So using JavaScript I am trying to write "hello friend" in the div "text1" of page page2.php when I click the image or the div of page1.php.
Is there any possible way to use JS to solve this problem?
Can we use any how document.getElementById("text1").innerHTML or something like that in the program?
I suggest you make use of the include function of php (provided you absolutely want to keep your text1 div on a separate page), like this on your page1.php file:
include('page2.php');
Make sure that when you do that, page1.php and page2.php are in the same folder, otherwise you may define a path to it like this:
include('/path/to/page2.php');

Javascript remove leading character(s) from form data [closed]

Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 9 years ago.
Improve this question
I am new to Javascript (and any programming for that matter) and I am looking for a way to take form data and remove leading character(s) from it and re-display them in a list.
For example:
aExample1
bExample2
cExample3
and re-display
Example1
Example2
Example3
Either on the fly or with a button.
(code from comment:
<html>
<textarea name="Text1" cols="20" rows="5">
aExample1 bExample2 cExample3
</textarea>
<input name="Submit" type="submit" value="Submit" />
</html>
)
Thanks in Advance!
You can have a method like this:
function cutFirst(txt) { return txt.substring(1) ;}
It takes a string, and returns all the letters but for the first.
You can play with it, and do something like:
function cutSome(txt,start) { return txt.substring(start) ;}
This will remove the amount of letters that you pass in start (Note: it'll act funny if you don't pass the start though, since it'll be undefined, treated as 0, and you'll get your original string back).
Even better, you can do:
function cutSome(txt,start) {
return start ? txt.substring(start)
: txt.substring(1) ;
}
Cutting out only the first letter if you don't pass the amount start argument.
As for comments, You could do this (i've added an ID , but you can get it by name as well":
<textarea name="Text1" cols="20" rows="5" ID="TextID">
aExample1 bExample2 cExample3
</textarea>
<input name="Submit" type="submit" value="Submit" onclick="trimText();"/>
and have this in you JavaScript:
function trimText() {
var tmpArray= document.getElementById("TextID").value.trim().split(" ");
var returnArray = [];
var len = tmpArray.length;
while (len--) {
returnArray[len] = tmpArray[len].substring(1);
}
document.getElementById("TextID").value = returnArray.join(" ");
}
This will fetch your input, split into words, remove first letter, put back into a string, and change the text area text to that value :)

Categories