使用javascript生成的HTML文本输入标记在提交表单时不会POST

Question

I have a form which asks for employment history, where you have applied to college etc. So for example for colleges they applied to I have one text box at first and there is a button below that calls a javascript function to add another text input right below it. When I first made this form I was doing that with a few different pieces of data then once they were submitted I would get them from $_POST and put them in arrays then add each element of the array to the corresponding table in my db. All of a sudden though, I can no longer submit my form and I get a message telling me that I have tried to get an unspecified index. However when i inspect the text inputs in my browser they are correctly named. I read that I should name them college[] so that they all go into an array, but that also did not work.... now what?

js:

var numcol = 1;
function addnewschool(){
 numcol++;
 var container = document.getElementById("collegecontainer");
 container.appendChild(document.createTextNode(numcol));
 var input = document.createElement("input");
 input.type = "text";
 input.name = 'applied'+numcol;
 container.appendChild(input);
 container.appendChild(document.createElement("br"));}

html:

<p class="text-dark mb-4">List the Colleges you have applied to:<br>
<div id="collegecontainer" name="collegecontainer">
<input type="text" name='applied1'><br>
</div>
<input type="button" id="addcollege" name="addcollege" value="Add College" 
onClick="addnewschool()"><br>
</p>

php:

$applied = array();
foreach($_POST['applied'] as $value){
  array_push($applied, $value);
}

Update: Ok so I changed it to another way and that didn't work so i decided to just copy an earlier version of it which was working and paste it into the correct layout. And that worked... SO now that it was fixed i continued adding to it. I added "required" to a few tags, changed some styling a bit, and changed my javascript file a bit. But now I'm having the same issues as before. All of my POST arrays only have the first value in them. What could I have added that changed this? Has anyone ever had any issues like this?

Answer 1

Your first additional input should have index "applied1", not "applied2"

look at:

var numcol = 1; // put this to 0
function addnewschool(){
numcol++; // or move this to the end of the function