How to read input box line by line in Javascript and return various values depending on input?

Question

I am trying to create a function in Javascript which can read an input box line by line and return different values depending on the input.

For example, if someone enters several protein mutations on separate lines with the format Arg86Lys, I want the function to read the first three and last three letters to get Arg Lys. Then, if I have a value stored for Arg Lys (let's say 100), I want the output to be a textbox which prints out the value 100 (and prints out the rest of the values on separate lines).

I am stuck on how to read the input box value line by line, and only extract the first three and last three letters from each line. I also do not understand how I can store values (like Arg Lys = 100) and return said values when a certain input is found.

So far I have created a multiline textbox (in HTML) and tried to make a function that reads line by line:

<body>
      <form action = "/cgi-bin/hello_get.cgi" method = "get">
         Enter mutations on separate lines with format Arg86Lys
         <br>
         <textarea rows = "5" cols = "60" name = "description">
         </textarea><br>
         <input type = "submit" value = "submit" />
      </form>
      <script>
         var lines = document.getElementById('textareaId').innerHTML.split('\n');
for(var i = 0;i < lines.length;i++){
   \\
}
      </script>
   </body>

Use `.value`, not `.innerHTML`. Also your script runs immediately when the page loads, not when the form is submitted. — Bergi, Jan 16 '22 at 11:56

score 1 · Answer 1 · answered Jan 16 '22 at 10:41

textarea is an input, so its value is going to be stored in its value property, and passed along with the form submission. Here is an answer I found that goes over how to intercept the submit event for the form:

Intercept a form submit in JavaScript and prevent normal submission

Once you've intercepted the form submission event, pull the value from the description input, and do with it what you want from there

score 1 · Answer 2 · answered Jan 16 '22 at 11:23

let form = document.getElementById("form");
let data = {"Arg Lys":100}; // store data like this
form.addEventListener("submit",function(e){
e.preventDefault();
var lines = document.getElementById('textareaId').value.split('\n');
document.getElementById('textareaId').value = '';
    for(var i = 0;i < lines.length;i++){
   let val = lines[i].substring(0,3);
   let lastval = lines[i].substring(lines[i].length - 3)
   document.getElementById('textareaId').value += val+' '+lastval + ' - ' +data[val+' '+lastval]+'\n';
}
})

<body>
      <form id="form" action = "/cgi-bin/hello_get.cgi" method = "get">
         Enter mutations on separate lines with format Arg86Lys
         <br>
         <textarea id="textareaId" rows = "5" cols = "60" name = "description"></textarea><br>
         <input type = "submit" value = "submit" />
      </form>
   </body>

Are you looking for something like that?

Yes exactly! Another question though: how do I store additional data? Would it be something like: let data = {"Arg Lys":100}; {"Ala Leu":135}; {"Trp Tyr":150};? What is the format? Thank you so much — chris1234567890, Jan 16 '22 at 12:06
Store all data in one array LIKE : `let data = {"Arg Lys":100,"Ala Leu":135,"Trp Tyr":150}` — Developer Inside, Jan 16 '22 at 14:26

How to read input box line by line in Javascript and return various values depending on input?

2 Answers2