title: Disable Multiple Form and enable one form Based on Condition in Javascript or jquery
body: <p>I have four form like <code>form-1</code> , <code>form-2</code> , <code>form-3</code> , <code>form-4</code> and three <code>Buttons</code> as <code>Button-1</code>, <code>Button-2</code> , <code>Button-3</code>.</p>
  
  <p>When first jsp page load it has form elements which will display on the screen.</p>
  
  <p>Now my question is when i click to <code>button-2</code> it should display <code>form-2</code> and disable other three forms (<code>form-1</code> , <code>form-3</code> , <code>form-4</code> ).Same case with the others two buttons.</p>
  
  <p>Please provide me proper solution using javascript or jquery.</p>
  
  <p>I am using jsp page for html form design.</p>
  
  <hr>
  
  <pre><code>&lt;%@page contentType="text/html" pageEncoding="UTF-8"%&gt;
  &lt;!DOCTYPE html&gt;
  &lt;html&gt;
      &lt;head&gt;
          &lt;meta http-equiv="Content-Type" content="text/html; charset=UTF-8"&gt;
          &lt;title&gt;JSP Page&lt;/title&gt;
          &lt;script type="text/javascript"&gt;
      $("#b1").click(function(){
      $("#f2,#f3,#f4").hide();
      $("#f1").show();
    });
  
  $("#b2").click(function(){
      $("#f1,#f3,#f4").hide();
      $("#f2").show();
    });
  
  $("#b3").click(function(){
      alert("jj");
      $("#f1,#f2,#f4").hide();
      $("#f3").show();
    });
  
  
  
  &lt;/script&gt;
  &lt;style type="text/css"&gt;
      #f2,#f3,#f4{
      display: none;
      }
  &lt;/style&gt;
      &lt;/head&gt;
      &lt;body &gt;
          &lt;form id="f1"&gt;
          &lt;input type="text" name="name" placeholder="f1" &gt;
      &lt;/form&gt;
       &lt;form id="f2"&gt;
          &lt;input type="text" name="name"  placeholder="f2" &gt;
      &lt;/form&gt;
        &lt;form id="f3"&gt;
          &lt;input type="text" name="name"  placeholder="f3" &gt;
      &lt;/form&gt;
         &lt;form id="f4"&gt;
          &lt;input type="text" name="name"  placeholder="f4" &gt;
      &lt;/form&gt;
  
          &lt;input type="button" value="b1" id="b1" &gt;
         &lt;input type="button" value="b2" id="b2"&gt;
         &lt;input type="button" value="b3" id="b3"&gt;
  
  
      &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>I have done the coding as per above answer but i am not able to get the different form when i click. I check with alert message also the click is not working . Please tell me where i am doing wrong.</p>