Follow

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use
Contact

How to "build" an HTML input field with a function in oninput attribute?

I’ve been trying all possible ways I could think of, but it’s still wrong:

This is what I’m supposed to use when building the table:

<input oninput="this.value=this.value.replace(/(?![0-9])./gmi,'')"></input>

MEDevel.com: Open-source for Healthcare and Education

Collecting and validating open-source software for healthcare, education, enterprise, development, medical imaging, medical records, and digital pathology.

Visit Medevel

This is the JS piece, which doesn’t show any error at build:

for (var i = 0; i < ar.length; i++) {
  result += "<tr>";
  for (var j = 0; j < ar[i].length; j++) {
    result +=
      (j == 8) ? "<td><span class='dollarcurrency' >$</span><input oninput='this.value=this.value.replace(/[^0-9.,]+/gmi,'')' class='price' name='numberInputs' value='' onchange='add_to_total(this, origin);deposit(getDeposit(), origin)'></td>" :
      "<td class='align-middle' style='word-wrap: break-word;max-width: 160px;text-align:center'>" + ar[i][j] + "</td>";
  }
  result += "<td class='total_price'><strong>$0.00</strong></td>";
  result += "<td><input type='checkbox'></td>";
  result += "</tr>";
}

I’m not sure how to place "" in the replace() when it’s already enclosed in a ''.

, but when it gets built, it throws the following error:
SyntaxError: Unexpected end of input

This how it looks when inspecting the HTML:
<input oninput="this.value=this.value.replace(/[^0-9.,]+/gmi," ')'="" class="price" name="numberInputs" value="" onchange="add_to_total(this, origin);deposit(getDeposit(), origin)">

Appreciate your help!

>Solution :

You can use backquotes. They are generally used for template literals, but here it will let you have another type of string delimiter and saves you from special character escaping hell.

for (var i = 0; i < ar.length; i++) {
  result += "<tr>";
  for (var j = 0; j < ar[i].length; j++) {
    result += // backquote here so you can use "" in the replace
      (j == 8) ? `<td><span class='dollarcurrency' >$</span><input oninput='this.value=this.value.replace(/[^0-9.,]+/gmi,"")' class='price' name='numberInputs' value='' onchange='add_to_total(this, origin);deposit(getDeposit(), origin)'></td>` :
      "<td class='align-middle' style='word-wrap: break-word;max-width: 160px;text-align:center'>" + ar[i][j] + "</td>";
  }
  result += "<td class='total_price'><strong>$0.00</strong></td>";
  result += "<td><input type='checkbox'></td>";
  result += "</tr>";
}
Add a comment

Leave a Reply

Keep Up to Date with the Most Important News

By pressing the Subscribe button, you confirm that you have read and are agreeing to our Privacy Policy and Terms of Use

Discover more from Dev solutions

Subscribe now to keep reading and get access to the full archive.

Continue reading