Question

我正在创建一个用于搜索数据库的表单。表单将具有不同的搜索条件，用户可以在其中选择要搜索的变量（例如：名称，位置，时区）。表单当前具有输入类型作为按钮，我想在其中创建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()">

openInputField（）的javascript如下：

// 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);
}

这将打开文本字段但是在提交时，该值不是从PHP文件打印的。

Answer 1

$('.form-btn').click(function(){
$(this).next().toggleClass('show-form');
});

.form{
 float:left;  
  list-style:none;
}
.hidden-form{
  visibility:hidden;
  }
.show-form{
visibility: visible !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="form">
<li> 
<input class="form-btn" type="button" name="name" value="Name" >  
<input class="hidden-form" type="text" name="nm" >
</li>
</ul> 
<ul class="form">
<li> 
<input class="form-btn" type="button" name="location" value="Location" >
<input class="hidden-form" type="text" name="loc" >
</li>
</ul>

您可以单独添加提交按钮以及名称字段。

onclick在表单中显示<input />文本字段

1 个答案: