uxui uxui - 9 months ago 53
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

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


y.setAttribute("Name", "textelement_" + i);
g.setAttribute("onclick", "removeElement('myForm','id_" + i + "')");
r.setAttribute("id", "id_" + i);

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

Answer Source

visibility: visible !important;
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<ul class="form">
<input class="form-btn" type="button" name="name" value="Name" >  
<input class="hidden-form" type="text" name="nm" >
<ul class="form">
<input class="form-btn" type="button" name="location" value="Location" >
<input class="hidden-form" type="text" name="loc" >
You can add submit button separately along with the name field.