JQuery Button

From CoderLearner
Jump to: navigation, search

Description

Use button to manage multiple forms.

Example 1

  • Create three form within the DIV elements.
  • Create three buttons for each form when the button click event occurs.
<!DOCTYPE html>
<html>
   <head>
      <title>Btn</title>
      <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
      <script 
         type="text/javascript" 
         src="/lib/jquery-1.7.2.min.js">				 
      </script>
      <script>
         $(document).ready(function(){
            $('#div_form1').hide();
            $('#div_form2').hide();
            $('#div_form3').hide();
				
            // show form 1
            $('#btn_frm1').click(function(){
               $('#div_form1').show();
               $('#div_form2').hide();
               $('#div_form3').hide();
            });
            // show form 2
            $('#btn_frm2').click(function(){
               $('#div_form2').show();
               $('#div_form1').hide();	
               $('#div_form3').hide();
            });
            // show form 3
            $('#btn_frm3').click(function(){
               $('#div_form3').show();
               $('#div_form1').hide();
               $('#div_form2').hide();
            });
                
         });
      </script>
   </head>

   <body>
      <button id="btn_frm1">Show Form 1</button>
      <button id="btn_frm2">Show Form 2</button>
      <button id="btn_frm3">Show Form 3</button>

      <div id="div_form1">
         <form name="frm1">
            <h3>Form 1</h3>
            Full Name<input type="text" name="fullname"/>
         </form>
      </div>
      <div id="div_form2">
         <form name="frm2">
            <h3>Form 2</h3>
            Nick Name<input type="text" name="nickname"/>

         </form>
      </div>
      <div id="div_form3">
         <form name="frm3">
            <h3>Form 3</h3>
            Full Address<input type="text" name="fulladdressname"/>
         </form>
      </div>
   </body>
</html>

Try It

<seo metagenerator="jquery tutorial" title="Jquery/Ajax" metakeywords="jquery greater,jquery gt, jquery lt, less then, odd jquery,jquery find element, even jquery,jquery event, jquery mouse click, jquery double click, jquery hover, jquery string, jquery array, jquery button, jquery attriubtes" metadescription="jquery button, jquery attriubte, jquery example, jquery tutorial, jquery sample"/>