How to dynamically create form inputs and then submit them to php

Question

I have a page where the user can press a button that will append two new form inputs to the page. The user can do this as many times as necessary. The problem I am having is that I cannot seem to access the new inputs in the php file I am submitting to.

Here is the code for the button on the page the user sees. It is within a form.

<div class='instruction'> 
    <p>Please use the checkpoint tool to outline the primary steps 
       necessary for completion of the project.
       <h4 style='margin-bottom:5px;'>Checkpoint Tool</h4>
       <input type='button' onclick='addCheckpoint()' value='Add Checkpoint' />
       <input type='text' id='count' name='projectCount' style='width:25px;' readonly='true' />
    </p>
    <div id='checkpoints'> 
    </div> 
</div>

Here is the javascript function addCheckpoint()

function addCheckpoint()
{     

  var count = +document.getElementById('count').value; 

  //  Declare Variables

  var checkpointText = "Checkpoint "+(count+1); 
  var nameText = "Checkpoint Name: "; 
  var instructionText = "Instructions: ";

  var previous = document.getElementById("checkpoints");

  var newP = document.createElement("p");

  var nameInput = document.createElement("input");
      nameInput.setAttribute("type","text"); 
      nameInput.setAttribute("name","checkpointName" + count);



  var instructionInput = document.createElement("textarea");
      instructionInput.setAttribute("name","checkpointInstruction" + count);
      instructionInput.setAttribute("rows","4");
      instructionInput.setAttribute("cols","56");

  //  Append Variables 

      newP.appendChild(document.createTextNode(checkpointText));
      newP.appendChild(document.createElement("br"));
      newP.appendChild(document.createElement("br"));
      newP.appendChild(document.createTextNode(nameText));
      newP.appendChild(nameInput);
      newP.appendChild(document.createElement("br"));
      newP.appendChild(document.createTextNode(instructionText));
      newP.appendChild(instructionInput);
      newP.appendChild(document.createElement("br"));
      newP.appendChild(document.createElement("hr"));

      previous.appendChild(newP);


      document.getElementById('count').value = count + 1; 
}

Here is the code on the page being submitted to that tries to retrieve the posted values.

$projectCount = strip_tags($_POST["projectCount"]); 
     for($i = 0; $i < $projectCount; $i += 1)
    {   
       $checkpointNames[] = strip_tags($_POST["checkpointName".$i]);
       $checkpointDescriptions[] = strip_tags($_POST["checkpointDescription".$i]);           
    }

I appreciate any help that can be offered!

If you add in some debugging in the PHP, like dump $_POST to the screen...how does it look? — lampej
– lampej, Commented Oct 23, 2011 at 3:07
I used var_dump on $_POST and it printed out every input in my form except the dynamically created ones. Similarly, when I try using GET instead of POST, the created inputs don't submit to the URL. — user1009142
– user1009142, Commented Oct 24, 2011 at 19:30

user1009142 · Accepted Answer · 2011-10-24 20:57:17Z

1

Ok, I figured it out, it was a rookie mistake. My inputs weren't even being appended to my form. Thanks for the help though! I appreciate the time you gave to look over my code.

answered Oct 24, 2011 at 20:57

user1009142

213 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Aurelio De Rosa Over a year ago

You should add the answer, not this comment.

user1009142 Over a year ago

I did. My code worked, but the problem was that the inputs being generated were not being appended to a form. That is why when I submitted my form they were not included.

Teofilo Israel Vizcaino Rodrig · Accepted Answer · 2011-10-23 03:04:01Z

0

Try to put the elements into a and make sure you submit the form with a submit button or with form.submit from javasrtipt

answered Oct 23, 2011 at 3:04

Teofilo Israel Vizcaino Rodrig

1,4901 gold badge13 silver badges26 bronze badges

Collectives™ on Stack Overflow

How to dynamically create form inputs and then submit them to php

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related