Add another text box when a user select other option - php

Question

My form is looking like this.
<form action="add_customers.php" method="post" onsubmit="MM_validateForm('name','','R','passport_no','','R','remarks','','R');return document.MM_returnValue">
<tr>
<td>Name of the Applicant:</td>
<td><label for="name"></label>
<input type="text" name="name" id="name" /></td>
</tr>
<tr>
<td>Country applying for :</td>
<td><label for="country"></label>
<select name="country" id="country">
<option>Singapore</option>
<option>Malaysia</option>
<option>Istanbul</option>
<option>Thailand</option>
<option>China</option>
<option>Other</option>
</select></td>
</tr>
<tr>
<td>Visa Categeory :</td>
<td><label for="visa_categeory"></label>
<select name="visa_categeory" id="visa_categeory">
<option>Visit</option>
<option>Business</option>
<option>Other</option>
</select></td>
</tr>
<tr>
<td>Passport No:</td>
<td><input type="text" name="passport_no" id="passport_no" /></td>
</tr>
<tr>
<td>Remarks:</td>
<td><label for="remarks"></label>
<textarea name="remarks" id="remarks" cols="45" rows="5"></textarea></td>
</tr>
<tr>
<td> </td>
<td><input type="submit" name="submit" id="submit" value="Submit" /></td>
</tr></form>
Now My problem is
1) when a user select other option from Visa Category then automatically display a text box for user and capture that what he enter.
2) save that details into mysql database
Used languages are PHP,MYSQL
Thanks.

Answer 1

You can add a text box in your form and make it hidden first time.
Get the textbox visible on change of the dropdown you have mentioned using javascript.
You can get the value of the textbox in the page where you accepts the data and insert into data database in add_customers.php along with other variables.
<script>
function visacatOnchange(){
var visa_cat = document.getElementById('visa_categeory').value
if(visa_cat == "Visit")
document.getElementById("new_textbox").style.display="block";
else
document.getElementById("new_textbox").style.display="none";
}
</script>
In html form add
<input type="text" name="new_textbox" id="new_textbox" style="display:none;">
and change
<select name="visa_categeory" id="visa_categeory" onChange="visacatOnchange();">
Good luck :-)

Answer 2

Initially you can keep the textbox div hidden and then display it on "onchange" event of select input.
<div id="textboxdiv" style="visibility: hidden">
Visa Option <input type="text" id="someid"/>
</div>
<select name="visa_categeory" id="visa_categeory" onchange="showTextBox()" >
<option>Visit</option>
<option>Business</option>
<option value="99" >Other</option>
</select>
Using Jquery you can display it like this:-
function showTextBox(){
if ($('#visa_categeory').val() == '99') {
$('#textboxdiv').css({'visibility':'visible'});
}

Answer 3

Here's some basic JavaScript/jQuery that should help you solve your first problem: http://jsfiddle.net/j4aXQ/
HTML
<form>
<select name="visa_category">
<option>Visit</option>
<option>Business</option>
<option>Other</option>
</select>
</form>
JS
$('select').change(function() {
var $selected = $('select option:selected');
if ('Other' === $selected.text()) {
$('form').append($('<input>').prop({'type':'text','id':'visa_other','name':'visa_other'}));
$('form').append($('<label>').prop({'for':'visa_other'}).html('Testing'));
} else {
$('input').remove();
$('label').remove();
}
});
The above code will only display a text box (and accompanying label) if the "Other" option is selected, and will then remove that text box if a different option is subsequently picked.
Hope that helps!