So I have this script which takes the data from a form and append it in to a HTML div.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<style>
* {
box-sizing: border-box;
}
div {
padding: 10px;
background-color: #f6f6f6;
overflow: hidden;
}
input[type=text],
textarea,
select {
font: 17px Calibri;
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type=button] {
font: 17px Calibri;
width: auto;
float: right;
cursor: pointer;
padding: 7px;
}
</style>
</head>
<body>
<div>
<div>
<input type="text" id="txtName" placeholder="Enter your name" />
</div>
<div>
<input type="text" id="txtAge" placeholder="Enter your age" />
</div>
<div>
<input type="text" id="txtEmail" placeholder="Enter your email address" />
</div>
<div>
<select id="selCountry">
<option selected value="">-- Choose the country --</option>
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
</div>
<div>
<input type="button" id="bt" value="Write" onclick="writeFile()" />
</div>
</div>
<div >
<h4>Output</h4>
<div id="output" >
</div>
</div>
<span></span>
</body>
<script>
let writeFile = () => {
const name = document.getElementById('txtName');
const age = document.getElementById('txtAge');
const email = document.getElementById('txtEmail');
const country = document.getElementById('selCountry');
const msg = document.getElementById('msg');
let data =
'Name: ' name.value ' \r\n '
'Age: ' age.value ' \r\n '
'Email: ' email.value ' \r\n '
'Country: ' country.value ' \r\n '
'Message: ' msg.value;
$('#output').append("<br />" "<br />");
$('#output').append(document.createTextNode(data));
}
</script>
</html>
But the issue is when I fill the data and click on Write
it outputs all of the form data in a single line. (Name: x Age: 4 Email: y Country: Japan Message: z)
And I want it to be like this,
Name: x
Age: 4
Email: y
Country: Japan
Message: z
Name: x
Age: 42
Email: y
Country: Japan
Message: zd ....
So I tried to create a new line (\n) using javascript but seems like it doesn't affect it.
This is what I've tried.
'Name: ' name.value ' \r\n ' '\n'
'Age: ' age.value ' \r\n ' '\n'
'Email: ' email.value ' \r\n ' '\n'
'Country: ' country.value ' \r\n ' '\n'
'Message: ' msg.value;
So what's the issue here. Any help would be much appreciated. Thanks.
CodePudding user response:
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<style>
* {
box-sizing: border-box;
}
div {
padding: 10px;
background-color: #f6f6f6;
overflow: hidden;
}
input[type=text],
textarea,
select {
font: 17px Calibri;
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type=button] {
font: 17px Calibri;
width: auto;
float: right;
cursor: pointer;
padding: 7px;
}
</style>
</head>
<body>
<div>
<div>
<input type="text" id="txtName" placeholder="Enter your name" />
</div>
<div>
<input type="text" id="txtAge" placeholder="Enter your age" />
</div>
<div>
<input type="text" id="txtEmail" placeholder="Enter your email address" />
</div>
<div>
<select id="selCountry">
<option selected value="">-- Choose the country --</option>
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
</div>
<div>
<input type="button" id="bt" value="Write" onclick="writeFile()" />
</div>
</div>
<div >
<h4>Output</h4>
<div id="output" >
</div>
</div>
<span></span>
</body>
<script>
let writeFile = () => {
const name = document.getElementById('txtName');
const age = document.getElementById('txtAge');
const email = document.getElementById('txtEmail');
const country = document.getElementById('selCountry');
const msg = document.getElementById('msg');
let data = [
`<p>Name: ${name.value}</p>`,
`<p>Age: ${age.value}</p>`,
`<p>Email: ${email.value}</p>`,
`<p>Country: ${country.value}</p>`,
`<p>Message: ${msg.value}</p>`];
$('#output').append("<br />" "<br />");
data.forEach(line => $('#output').append(line));
}
</script>
</html>
So here I am first putting each line of data into a <p>
tag and then putting that in a list, I am using template literals which are just cleaner. Then to insert the data you want to call a .forEach()
on the list and then add each line (or item of the list) to the output. Below is the part I changed.
let data = [
`<p>Name: ${name.value}</p>`,
`<p>Age: ${age.value}</p>`,
`<p>Email: ${email.value}</p>`,
`<p>Country: ${country.value}</p>`,
`<p>Message: ${msg.value}</p>`];
$('#output').append("<br />" "<br />");
data.forEach(line => $('#output').append(line));
CodePudding user response:
You could always just wrap the output in a <pre>
element.
<!DOCTYPE html>
<html>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<head>
<style>
* {
box-sizing: border-box;
}
div {
padding: 10px;
background-color: #f6f6f6;
overflow: hidden;
}
input[type=text],
textarea,
select {
font: 17px Calibri;
width: 100%;
padding: 12px;
border: 1px solid #ccc;
border-radius: 4px;
}
input[type=button] {
font: 17px Calibri;
width: auto;
float: right;
cursor: pointer;
padding: 7px;
}
</style>
</head>
<body>
<div>
<div>
<input type="text" id="txtName" placeholder="Enter your name" />
</div>
<div>
<input type="text" id="txtAge" placeholder="Enter your age" />
</div>
<div>
<input type="text" id="txtEmail" placeholder="Enter your email address" />
</div>
<div>
<select id="selCountry">
<option selected value="">-- Choose the country --</option>
<option value="India">India</option>
<option value="Japan">Japan</option>
<option value="USA">USA</option>
</select>
</div>
<div>
<textarea id="msg" name="msg" placeholder="Write some message ..." style="height:100px"></textarea>
</div>
<div>
<input type="button" id="bt" value="Write" onclick="writeFile()" />
</div>
</div>
<div >
<h4>Output</h4>
<div id="output" >
</div>
</div>
<span></span>
</body>
<script>
let writeFile = () => {
const name = document.getElementById('txtName');
const age = document.getElementById('txtAge');
const email = document.getElementById('txtEmail');
const country = document.getElementById('selCountry');
const msg = document.getElementById('msg');
let data = 'Name: ' name.value ' \r\n'
'Age: ' age.value ' \r\n'
'Email: ' email.value ' \r\n'
'Country: ' country.value ' \r\n'
'Message: ' msg.value;
//$('#output').append("<br />" "<br />");
$('#output').append(`<pre>${data}</pre>`);
}
</script>
</html>
CodePudding user response:
In order to break the line in HTML, you want to use <br>
instead of \r\n
. For example like this:
let data =
'Name: ' name.value '<br>'
'Age: ' age.value '<br>'
'Email: ' email.value '<br>'
'Country: ' country.value '<br>'
'Message: ' msg.value;
Then if you are appending HTML, don't use createTextNode()
function, since it would escape HTML entities. So you can simply use:
$('#output').append(data);
And the last thing. If you don't want to append the content every time you hit the button, you can enter data into DIV using html()
function, instead append()
.
$('#output').html(data);