JQuery Button
From w3cyberlearnings
Contents |
How to manage multiple form within a single page using jQuery?
- Can you display or hide form when a specific button click event is occurred.
HTML FORM
- Create three form within the DIV elements.
- Create three buttons for each form when the button click event occurs.
<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> </form> </div> <div id="div_form2"> <form name="frm2"> <h3>Form 2</h3> </form> </div> <div id="div_form3"> <form name="frm3"> <h3>Form 3</h3> </form> </div> </body>
jQuery to control form display and hide
<script type="text/javascript" language="javascript">
$(document).ready(function() {
// hide all form first when page load
$('#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>
Related Links
- jQuery Button
- jQuery Effects
- jQuery Attributes
- jQuery Mouse Events
