Skip to content Skip to sidebar Skip to footer
Home / Css / Html / Javascript / Jquery

How Do I Hide A Part Of A Form And Make It Visible Only On Clicking A "add Another" Button?

Post a Comment
Please note that on clicking the button multiple text field boxes become visible and not only one!

Solution 1:

  1. Put the form inside a container
  2. Set the container's CSS to display:none
  3. 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><linkhref="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.min.css"rel="stylesheet"type="text/css" /><scriptsrc="http://code.jquery.com/jquery-1.10.1.min.js"></script><scriptsrc="http://code.jquery.com/ui/1.10.3/jquery-ui.min.js"></script><metacharset=utf-8 /><title>JS Bin</title><style>input[type='text']
    {
      display: none;
    }
  </style></head><body><formid='frm1'><inputtype='text' /><inputtype='text' /><inputtype='text' /><buttonid='btnShowInputs'>Show Inputs</button></form><script>
      $("#btnShowInputs").click(function () {
          $("#frm1 input[type='text']").css("display", "block");
      });
  </script></body></html>

Solution 3:

try this

HTML

<inputtype="button" onclick="javascript:show_text_boxes();" value="Show Textboxes" />
<inputtype="button" onclick="javascript:hide_text_boxes();" value="Hide Textboxes" />

<inputtype="text"id="textbox1" name="textbox1" style="display:none;"/>
<inputtype="text"id="textbox2" name="textbox2" style="display:none;" />
<inputtype="text"id="textbox3" name="textbox3" style="display:none;" />

JS

functionshow_text_boxes()
{

    document.getElementById('textbox1').style.display='block';
    document.getElementById('textbox2').style.display='block';
    document.getElementById('textbox3').style.display='block';

}

functionhide_text_boxes()
{

    document.getElementById('textbox1').style.display='none';
    document.getElementById('textbox2').style.display='none';
    document.getElementById('textbox3').style.display='none';

}

SEE FIDDLE

Post a Comment for "How Do I Hide A Part Of A Form And Make It Visible Only On Clicking A "add Another" Button?"