How Do I Hide A Part Of A Form And Make It Visible Only On Clicking A "Add Another" Button?
Please note that on clicking the button multiple text field boxes become visible and not only one!
Solution 1:
- Put the form inside a container
- Set the container's CSS to
display:none - Set up a click handler on some element that triggers jQuery's show/hide methods
Your HTML:
<a id="toggleform" href="#">Toggle Form</a>
<div id="hideform">
// form elements in here
</div>
Your javascript:
$( "#toggleform" ).on( "click", function() {
$('#hideform').toggle();
});
Or if you don't want to toggle the hiding:
$( "#toggleform" ).on( "click", function() {
$('#hideform').show();
});
Your CSS:
#hideform {display:none;}
Here is a fiddle demonstrating it: http://jsfiddle.net/AkHQa/
Solution 2:
Here is a simple jQuery for your situation:
<!DOCTYPE html>
<html>
<head>
<link href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css" rel="stylesheet" type="text/css" />
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script>
<meta charset=utf-8 />
<title>JS Bin</title>
<style>
input[type='text']
{
display: none;
}
</style>
</head>
<body>
<form id='frm1'>
<input type='text' />
<input type='text' />
<input type='text' />
<button id='btnShowInputs'>Show Inputs</button>
</form>
<script>
$("#btnShowInputs").click(function () {
$("#frm1 input[type='text']").css("display", "block");
});
</script>
</body>
</html>
Solution 3:
try this
HTML
<input type="button" onclick="javascript:show_text_boxes();" value="Show Textboxes" />
<input type="button" onclick="javascript:hide_text_boxes();" value="Hide Textboxes" />
<input type="text" id="textbox1" name="textbox1" style="display:none;"/>
<input type="text" id="textbox2" name="textbox2" style="display:none;" />
<input type="text" id="textbox3" name="textbox3" style="display:none;" />
JS
function show_text_boxes()
{
document.getElementById('textbox1').style.display='block';
document.getElementById('textbox2').style.display='block';
document.getElementById('textbox3').style.display='block';
}
function hide_text_boxes()
{
document.getElementById('textbox1').style.display='none';
document.getElementById('textbox2').style.display='none';
document.getElementById('textbox3').style.display='none';
}
Post a Comment for "How Do I Hide A Part Of A Form And Make It Visible Only On Clicking A "Add Another" Button?"