Read formatted text from form through javascript

Question

class Storedata {
  constructor(name, desc, price, qty) {
    this.name = name;
    this.desc = desc;
    this.price = price;
    this.qty = qty;
  }
}

var arr = [];
var btnform = document.getElementById('clicktoadd');
var btnlist = document.getElementById('clicktoshow');
var rem = document.getElementById('main');
var cancelform;
var submit;

function addData() {
  var proname = document.getElementById("inpname");
  var prodesc = document.getElementById("inpdesc");
  var propric = document.getElementById("inpprice");
  var proqty = document.getElementById("inpqty");
  arr.push(new Storedata(proname.value, prodesc.value, propric.value, proqty.value));
}

function showlist() {
  var data = document.createElement('table');
  data.setAttribute("id", "data");
  data.innerHTML += "<tr><th>Product Name</th><th>Description</th><th>Price</th><th>Quantity</th><th></th></tr>";
  for (let i = 0; i < arr.length; i++) {
    data.innerHTML += ("<tr><td>" + arr[i].name + "</td><td>" + arr[i].desc + "</td><td>" + arr[i].price + "</td><td>" + arr[i].qty + "</td><td><button id=\"delete" + i + "\">Delete</button></tr>");
  };
  document.getElementById('listing').appendChild(data);
  document.getElementById('showbutton').removeAttribute("hidden", false);
}

function removelist() {
  var data = document.getElementById("data");
  data.parentNode.removeChild(data);
}

function addformtopage() {
  var form = document.createElement('div');
  form.setAttribute("id", "remform");
  form.innerHTML += "<div id=\"lblname\">Product Name:</div><input id=\"inpname\" type=\"text\"><div id=\"chkname\" hidden=\"true\">Enter a Product Name</div><div id=\"lbldesc\">Description:</div><textarea id=\"inpdesc\" rows=\"10\" cols=\"35\"></textarea><div id=\"chkdesc\" hidden=\"true\">Enter a Product Desciption</div><div id=\"lblprice\">Price in INR:</div><input id=\"inpprice\" type=\"number\"><div id=\"chkprice\" hidden=\"true\">Enter a Product Price</div><div id=\"lblqty\">Quantity:</div><input id=\"inpqty\" type=\"number\"><div id=\"chkqty\" hidden=\"true\">Enter a Product Quantity</div><br><br><button id=\"submitproduct\">Submit</button><button id=\"cancel\">Cancel</button>";
  document.getElementById('panel').appendChild(form);
  cancelform = document.getElementById('cancel');
  submit = document.getElementById('submitproduct');

}

function validateform() {
  var proname = document.getElementById("inpname");
  var prodesc = document.getElementById("inpdesc");
  var propric = document.getElementById("inpprice");
  var proqty = document.getElementById("inpqty");
  var errname = document.getElementById("chkname");
  var errdesc = document.getElementById("chkdesc");
  var errpric = document.getElementById("chkprice");
  var errqty = document.getElementById("chkqty");
  if ((proname.value) && (prodesc.value) && (propric.value) && (proqty.value)) {
    errname.setAttribute("hidden", true);
    errdesc.setAttribute("hidden", true);
    errpric.setAttribute("hidden", true);
    errqty.setAttribute("hidden", true);
    return true;
  }
  if (proname.value) {
    errname.setAttribute("hidden", true);
  }
  if (prodesc.value) {
    errdesc.setAttribute("hidden", true);
  }
  if (propric.value) {
    errpric.setAttribute("hidden", true);
  }
  if (proqty.value) {
    errqty.setAttribute("hidden", true);
  }

  if (!proname.value) {
    errname.removeAttribute("hidden", false);
  }
  if (!prodesc.value) {
    errdesc.removeAttribute("hidden", false);
  }
  if (!propric.value) {
    errpric.removeAttribute("hidden", false);
  }
  if (!proqty.value) {
    errqty.removeAttribute("hidden", false);
  }
  return false;
}

function clearform() {
  var proname = document.getElementById("inpname");
  var prodesc = document.getElementById("inpdesc");
  var propric = document.getElementById("inpprice");
  var proqty = document.getElementById("inpqty");
  proname.value = null;
  prodesc.value = null;
  propric.value = null;
  proqty.value = null;
}

function removeform() {
  var elem = document.getElementById("remform");
  elem.parentNode.removeChild(elem);
}

function removebuttons() {
  rem.setAttribute("hidden", true);
}

function showbuttons() {
  rem.removeAttribute("hidden", false);
}

btnform.addEventListener('click', function() {
  addformtopage();
  removebuttons();
  cancelform.addEventListener('click', function() {
    showbuttons();
    removeform();
  });
  submit.addEventListener('click', function() {
    if (validateform()) {
      alert("Values Added");
      addData();
      clearform();
    }
  });
});

btnlist.addEventListener('click', function() {
  showlist();
  removebuttons();
  document.getElementById('showbutton').addEventListener('click', function() {
    showbuttons();
    removelist();
    document.getElementById('showbutton').setAttribute("hidden", "true");
  });
});

#chkname,
#chkdesc,
#chkprice,
#chkqty {
  color: red;
}

table {
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 70%;
}

td,
th {
  border: 1px solid #dddddd;
  text-align: left;
  padding: 8px;
}

<!DOCTYPE HTML>
<html>

<head>
  <link href="style.css" rel="stylesheet" />
  <title>
    JS Form
  </title>
</head>

<body>
  <div id="main">
    <p><button id="clicktoadd">Add Product</button> <button id="clicktoshow">Show List</button></p>
  </div>
  <div id="panel">

  </div>
  <div id="listing">

  </div>
  <button id="showbutton" hidden="true">< Back</button>
  <script src="script.js"></script>
</body>

</html>

I want to take input in form for description of the item as formatted text. And then output it in the same format as input, but right now I am getting text separated by space where
should be there. Please help..

Steps to perform 1. Run this code snippet. 2. Click on 'Add Product' button. 3. Fill the form (For testing give a description of more than one line) and Submit. 4. Click on 'Cancel' button to return. 5. Click on 'Show List' button. 6. Observe Description column.

This is output I am getting separated by spaces This is form input I am providing

You can show the new lines or replace it with
. Check my answer — Luis Cabrera Benito, Nov 21 '18 at 18:57

score 0 · Accepted Answer · answered Nov 21 '18 at 18:57

Well, you have two options. Add a <pre> tag:

for (let i = 0; i < arr.length; i++) {
    data.innerHTML += ("<tr><td>" + arr[i].name + "</td><td><pre>" + arr[i].desc + "</pre></td><td>" + arr[i].price + "</td><td>" + arr[i].qty + "</td><td><button id=\"delete" + i + "\">Delete</button></tr>");
  };

This way it will display the new lines and you keep your string clean.

Or you can replace the new lines with <br> this way:

for (let i = 0; i < arr.length; i++) {
    data.innerHTML += ("<tr><td>" + arr[i].name + "</td><td>" + arr[i].desc.replace(/\n/g, "<br>") + "</td><td>" + arr[i].price + "</td><td>" + arr[i].qty + "</td><td><button id=\"delete" + i + "\">Delete</button></tr>");
  };

Remember that the new lines are not shown by default in HTML, if you want a new line put a <br>

Test it online

Hope it helps! :)

The first solution works perfectly. The second one works in many cases but if I add tabs or some extra spaces at the start of the line, it fails. — Madhur Bansal, Nov 21 '18 at 19:05

Muath · Answer 2 · 2018-11-21T19:10:51.047

0

Add this into your code:

var text = arr[i].desc;
text = text.replace(/\n/g, '<br />');

JSfiddle

See JavaScript: How to add line breaks to an HTML textarea? too.

edited Nov 21 '18 at 19:10

answered Nov 21 '18 at 18:57

Muath

4,351
12
42
69

This is good and works in many cases but if I add tabs or some extra spaces at the start of the line. I just need my output to be in same format as the input. – Madhur Bansal Nov 21 '18 at 19:03
will do changes simple ignore the /r – Muath Nov 21 '18 at 19:04

Read formatted text from form through javascript

2 Answers2