onclick Shows <input> text field in form
<p>I am creating a form that will be used to search through a database. The form will have different search criteria in which a user can pick and choose by which variable they want to search (example: name, location, time zone). The form currently has the input type as a button in which I want to create an <code>onclick</code> function that will show an input text field for the user to then enter the value. For example, if the user clicks the "Name" button I want an input text field to appear so that the user can then specify a name. I have tried other ways to get this to work using JavaScript however the values are not being retrieved when I post the form to the PHP file. 
an example of the form so far...</p>

<pre><code>&lt;form action="search.php" method="post"&gt;
&lt;input type="button" name="name" value="Name" onclick="openInputField()"&gt;
&lt;input type="button" name="location" value="location" onclick="openInputField()"&gt;
&lt;input type="button" name="timeZone" value="Time Zone" onclick="openInputField()"&gt;
</code></pre>

<p>javascript for openInputField() is below:</p>

<pre><code>// function that will open input text field when user clicks button 
function openInputField(){
  var r = document.createElement('span');
  var y = document.createElement("INPUT");
  y.setAttribute("type", "text");
  y.setAttribute("placeholder", "Name");
  var g = document.createElement("IMG");
  g.setAttribute("src", "delete.png");

  increment();

  y.setAttribute("Name", "textelement_" + i);
  r.appendChild(y);
  g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
  r.appendChild(g);
  r.setAttribute("id", "id_" + i);
  document.getElementById("myForm").appendChild(r);
}
</code></pre>

<p>this opens the text field however upon submit the value is not printing from the PHP file. </p>