uxui uxui - 24 days ago 17
HTML Question

onclick Shows <input> text field in form

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

onclick
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...

<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()">


javascript for openInputField() is below:

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


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

Answer

$('.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>
You can add submit button separately along with the name field.

Comments