Make Textbox Appearon selecting option

Well I have this a drop down menu like this :-

Code:

 <table>
<form name="input_details" method="post" action="promissorynoteprocess.php">
               <tr>
        <td style="padding-right: 10px; float: left; width:150px">
             Payment Method: 
          </td>
 <td>
            <select id = "payment" name="payment" style="height: 29px; width: 110px;">
            <option>Select One</option>
                <option>Monthly EMI</option>
                <option>Yearly EMI</option>
                <option>One time Full Repayment</option>
                </select>    
               
              </td>
              </tr>
</form>
</table>

I want to make a textbox appear on when someone select monthly EMI , different textbox when someone select yearly EMI and again a different textbox on selection of one time full repayment selection.The textbox otherwwise should remain hidden.

Instead of using 3 text boxes i think it will be cleaner and better to use a single textbox. But anyway I have cleaned up your code a little and added some jQuery code for what you have asked.

Code:

<html>
<head>
	<script type="text/javascript" src="*ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>

	<script type="text/javascript">
		$(document).ready(function(){
			$("#payment").change(function(){
				if($(this).val() == "monthly"){
					$(".textboxes").hide();
					$("#monthly").show();
				}
				else if($(this).val() == "yearly"){
					$(".textboxes").hide();
					$("#yearly").show();
				}
				else if($(this).val() == "onetime"){
					$(".textboxes").hide();
					$("#onetime").show();
				}
				else{
					$(".textboxes").hide();
				}

			});
		});
	</script>
	
	<style type="text/css">
		.textboxes{
			display:none;
		}
	</style>
</head>

<body>
	<form name="input_details" method="post" action="promissorynoteprocess.php">
	<table>
   	<tr>
        	<td style="padding-right: 10px;width:150px">
             		Payment Method: 
          	</td>
 		<td>
            		<select id = "payment" name="payment" style="height: 29px; width: 110px;">
            			<option>Select One</option>
                		<option value="monthly">Monthly EMI</option>
                		<option value="yearly">Yearly EMI</option>
                		<option value="onetime">One time Full Repayment</option>
                	</select>    
               
        	</td>
   	</tr>
   
   	<tr>
		<td colspan="2">
			<input type="text" id="monthly" class="textboxes"/>
			<input type="text" id="yearly" class="textboxes"/>
			<input type="text" id="onetime" class="textboxes"/>
		</td>
   	</tr>
	</table>
	</form>
</body>
</html>

Change your html to look like the following:

<select id = "payment" name="payment" style="height: 29px; width: 110px;" onchange="showTextbox(this.options[this.selectedIndex].value)" >
<option >Select One</option>
<option value="1">Monthly EMI</option>
<option value="2">Yearly EMI</option>
<option value="3">One time Full Repayment</option>
</select>

Above I added the onchange event and gave value to each 'option' .

Next create textbox's that you want to show , and give each a style property of 'display:hidden'

Finally create a js function like :

<script>
function showTextbox(value) {
if (value == "1") {
document.getElementbyId('firstTextBox').style.display = 'inline' ;
}
else ... //for each value, better use a switch/case here actually.

}
</script>

Thanx ajaybc and cute bandar

Ajaybc I cant use one single textbox as each textbox will have different placeholder in it and placeholder is important as it is legal work so no mistake could be made.

@mohit
Ok. BTW I have made a simple form field watermarking or placeholder plugin called watermarkify. You can try it if you want for your project.

Watermarkify -jQuery animated form field watermarks plugin | Blog | Ajay Balachandran

ajaybc said:
@mohit
Ok. BTW I have made a simple form field watermarking or placeholder plugin called watermarkify. You can try it if you want for your project.

Watermarkify -jQuery animated form field watermarks plugin | Blog | Ajay Balachandran

Thanx Ajay