Javascript onclick Shows<；输入>；表单中的文本字段

我正在创建一个表单，用于搜索数据库。表单将具有不同的搜索条件，用户可以在其中选择要搜索的变量（例如：名称、位置、时区）。表单当前的输入类型是一个按钮，我想在其中创建一个

onclick

函数，该函数将显示一个输入文本字段，供用户输入值。例如，如果用户单击“名称”按钮，我希望显示一个输入文本字段，以便用户可以指定名称。我已经尝试过使用JavaScript实现此功能的其他方法，但是当我将表单发布到PHP文件时，不会检索到值。 目前为止的表单示例

<form action="search.php" method="post">
<input type="button" name="name" value="Name" onclick="openInputField()">
<input type="button" name="location" value="location" onclick="openInputField()">
<input type="button" name="timeZone" value="Time Zone" onclick="openInputField()">

这将打开文本字段，但是在提交时，该值不会从PHP文件中打印出来

$（'.form btn'）。单击（函数（）{
$（this.next（）.toggleClass（'show-form'）；
});
.form{
浮动：左；
列表样式：无；
}
.隐藏形式{
可见性：隐藏；
}
.表演形式{
可见性：可见！重要；
}








请解释“打开文本字段”的含义。更改
y.setAttribute（“名称”、“文本元素”+i）到
y.name=“textelement”+i@MysterX我尝试过这个，但似乎没有成功work@ScottMarcus“打开文本字段”意味着将出现一个文本输入区域，以便用户可以输入他们要搜索的关键字。这很有效，我也喜欢隐藏字段的方式！非常感谢。
// 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);
}