How to name 1000 textbox programmatically inside a loop

Question

I have 1000 text boxes. I'm trying to put name for all the 1000 text boxes programmatically in 5 minutes using string replace function or any method.

<html>
<form id="exp">
<input type="text" value="A1">
<input type="text" value="A2">
<input type="text" value="A3">
.
.
.
<input type="text" value="A1000">
</form>
</html>

var element = document.getElementById("exp");
var html = element.outerHTML;
html = html.replace("input type="text"","input type="text" name="name"");

I would like to show my expected result as 'var html' as follows

<html>
<form id="exp">
<input type="text" name="textbox1" value="A1">
<input type="text" name="textbox2" value="A2">
<input type="text" name="textbox3" value="A3">
.
.
.
<input type="text" name="textbox1000" value="A1000">
</form>
</html>

Unclear why you would need to do this with angular.... Why are they being outputted like that in the first place? Shouldn't angular be setting the name? — epascarello, Feb 04 '20 at 14:01
`html.replace('input type="text"','input type="text" name="name"')` Don't use `"` for a String when you have `"` IN the String, or escape the `"` with \ — PaulS, Feb 04 '20 at 14:01
what you can do, if you have to put different names for 1000 text boxes in 5 minutes — JohnMathew, Feb 04 '20 at 14:03
Also, what is your result when you run the code? Where does the problem occur? — PaulS, Feb 04 '20 at 14:03
Hi All I want a form with 1000 and more fields there i just want to put different names to them. — JohnMathew, Feb 04 '20 at 14:07
I have to save entire form with data as a string to db in angular @ritag And can you answer this question in angular. — JohnMathew, Feb 04 '20 at 14:19

epascarello · Answer 1 · 2020-02-04T14:09:30.763

Matching html with a regular expression is a bad idea. Not sure why you would be doing it with a regular expression. Select the elements and set it in a loop.

document.querySelectorAll("#exp input").forEach(function (inp, index) {
  inp.name = 'textbox' + (index + 1);
  // inp.name = `textbox${index + 1}`;
})

<form id="exp">
  <input type="text" value="A1">
  <input type="text" value="A2">
  <input type="text" value="A3">
</form>

JohnMathew · Accepted Answer · 2020-02-04T15:31:23.720

0

Use document.getElementsByTagName

    var inputs = document.getElementsByTagName("input");
    for(i=0; i<inputs.length; i++)
    inputs[i].name = "text" + (i + 1);

edited Feb 04 '20 at 15:31

answered Feb 04 '20 at 14:53

JohnMathew

508
1
5
21

What if there were less than 1000 inputs in the dom? Your code would break. Should loop over the length. – mbx-mbx Feb 04 '20 at 14:54

How to name 1000 textbox programmatically inside a loop

2 Answers2