Heading

Wednesday, September 25, 2013

Hiding TextField When Radio Button Selected Using JQUERY



<html>
<head>
<title>infoatyou.blogspot.com</title>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>

<script>
$(document).ready(function(){
$(".radioBtn").click(function() {
    $("#textField1").show();
    if ($("input[name=ynRadio]:checked").val() == "yes") {
        $("#textField1").hide();
        }
  }); 
});



</script>
</head>
<body>
<form name="search" action="">
<table align="center" border="0">
<caption><span style="color:Blue">Searching Results</span></caption>
<tr>
<td><input type="radio" name="ynRadio" class="radioBtn" value="yes" />One Way</td>
<td><input type="radio" name="ynRadio" class="radioBtn" value="no" checked="checked" /> Two Way</td></tr>
<tr><td colspan="2"><input type="text" id="textField"  placeholder="Choose your Source" size="35"/></td></tr>
<tr><td colspan="2"><input type="text" id="textField"  placeholder="Choose your Destination" size="35"/></td></tr>
<tr><td colspan="2"><input type="text" id="textField"  placeholder="Date of Journey: DD/MM/YY" size="35"/></td></tr>
<tr><td colspan="2"><input type="text" id="textField1"  placeholder="Return Date: DD/MM/YY" size="35"/></td></tr>
<tr><td colspan="2" align="center"><input type="submit" value="Search"></td></tr>
<table>
</form>
</body>
</html>


Output: 
 
When Selected:

No comments:

Post a Comment