How to reference dynamically created form fields

Question

My goal was to make a button which creates more fields for user inputs. I have done that, but now need to reference the newly created fields.

At the moment I only know how to reference the original three fields because they have IDs, but the new ones don't.

<html>
<body>
<div id="div1" >
Warm From:
<select id="hour_on_1">
    <option value = "0" ></option>
    <option value = "1" >1</option>
    <option value = "2" >2</option>
    <option value = "3" >3</option>
    <option value = "4" >4</option>

</select>
:
<select id="minute_on_1">
    <option value = "" ></option>
    <option value = "0" >00</option>
    <option value = "15" >15</option>
    <option value = "30" >30</option>
    <option value = "45" >45</option>
</select>

<select id="on_am_pm_1">
    <option value = "" ></option>
    <option value = "0" >am</option>
    <option value = "12" >pm</option>
</select>

&nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Until:
<select id="off_hour_1">
    <option value = "" ></option>
    <option value = "1" >1</option>
    <option value = "2" >2</option>
    <option value = "3" >3</option>
    <option value = "4" >4</option>

</select>
:
<select id="off_minute_1">
    <option value = "" ></option>
    <option value = "0" >00</option>
    <option value = "15" >15</option>
    <option value = "30" >30</option>
    <option value = "45" >45</option>
</select>

<select id="off_am_pm_1">
    <option value = "" ></option>
    <option value = "0" >am</option>
    <option value = "12" >pm</option>
</select>

<br/>
</div>
<div id="div2"></div>
<button type="button" onclick="add_item()">Add Another Period</button>
</body>
</html>


<script type="text/javascript">
function add_item(){
document.getElementById("div2").innerHTML += document.getElementById("div1").innerHTML
}
</script>

I need to be able to reference the value in any of the fields.

Currently I can only go something like:

hour_on_1_value = parseFloat(document.getElementById("hour_on_1").value.trim())

To find the value in the top left field.

Would like to be able to do something like that but for any field

I would appreciate any help with this.

Thanks

Answer 1

 var elementArr=[] function add_item(){ var x=document.createElement('div') var innerStuff=document.getElementById('div1').innerHTML var choiceLocation=document.getElementById('div2') x.innerHTML=innerStuff choiceLocation.appendChild(x) console.log(x) //just for you to see what is stored elementArr.push(x) //this is where the element is stored //each line has a different thing that you can manipulate to your suiting(cuz i cud've made it way shorter) }

 <body> <div id="div1" > Warm From: <select id="hour_on_1"> <option value = "0" ></option> <option value = "1" >1</option> <option value = "2" >2</option> <option value = "3" >3</option> <option value = "4" >4</option> </select> : <select id="minute_on_1"> <option value = "" ></option> <option value = "0" >00</option> <option value = "15" >15</option> <option value = "30" >30</option> <option value = "45" >45</option> </select> <select id="on_am_pm_1"> <option value = "" ></option> <option value = "0" >am</option> <option value = "12" >pm</option> </select> &nbsp&nbsp&nbsp&nbsp&nbsp&nbsp Until: <select id="off_hour_1"> <option value = "" ></option> <option value = "1" >1</option> <option value = "2" >2</option> <option value = "3" >3</option> <option value = "4" >4</option> </select> : <select id="off_minute_1"> <option value = "" ></option> <option value = "0" >00</option> <option value = "15" >15</option> <option value = "30" >30</option> <option value = "45" >45</option> </select> <select id="off_am_pm_1"> <option value = "" ></option> <option value = "0" >am</option> <option value = "12" >pm</option> </select> <br/> </div> <div id="div2"></div> <button type="button" onclick="add_item()">Add Another Period</button> </body>

How to reference dynamically created form fields

Question

1 answers

solution1
0 2020-11-08 22:08:43

How to reference dynamically created form fields

Question

1 answers

solution1 0 2020-11-08 22:08:43

solution1
0 2020-11-08 22:08:43