Make Textbox Appearon selecting option

mohityadavx

mohityadavx

Youngling
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.
 
ajaybc

ajaybc

Youngling
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>
 
cute.bandar

cute.bandar

Cyborg Agent
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>
Click to expand...

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>
Click to expand...
 
OP
mohityadavx

mohityadavx

Youngling
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.
 
ajaybc

ajaybc

Youngling
@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
 
OP
mohityadavx

mohityadavx

Youngling
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
Click to expand...

Thanx Ajay :D
 
You must log in or register to reply here.
Top Bottom