title: onclick Shows <input> text field in form
body: <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>