<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Show/Hide form elements based on radio button selections using jQuery : Demo</title> <style type="text/css"> .content { width:900px; margin:0px auto; } .demo-ad-top { margin:20px 0; } img { border:0px; } </style> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> </head> <body> <div class="content"> <br /> <h1>Show/Hide form elements based on radio button selections using jQuery</h1> <p> <label> <input type="radio" name="type" value="Individual" id="type_0" checked="checked" /> Individual</label> <label> <input type="radio" name="type" value="Company" id="type_1" /> Company</label> </p> <div id="Individual_box"> <form action="" method="post" name="frm1" id="frm1"> <p> <label>Name</label> <br /> <input name="i_name" type="text" id="i_name" /> </p> <p> <label>E-mail</label> <br /> <input name="i_email" type="text" id="i_email" /> </p> <p> <label>Address</label> <br /> <textarea name="i_address" cols="50" rows="10" id="i_address"></textarea> </p> <p> <input name="btnSubmit1" type="submit" id="btnSubmit1" value="Submit" /> </p> </form> </div> <div id="Company_box"> <form action="" method="post" name="frm2" id="frm2"> <p> <label>Company Name</label> <br /> <input name="c_name" type="text" id="c_name" /> </p> <p> <label>E-mail</label> <br /> <input type="text" /> </p> <p> <label>Phone No.</label> <br /> <input type="text" /> </p> <p> <label>Address</label> <br /> <textarea rows="10" cols="50"></textarea> </p> <p> <input name="btnSubmit2" type="submit" id="btnSubmit2" value="Submit" /> </p> </form> </div> <script> $(document).ready(function(){ $("#btnSubmit1").click(function(){ var theForm = document.frm1; if($("#i_name").val()==""){ $("#i_name").focus(); alert('please input name'); return false; } theForm.submit(); }); $("#btnSubmit2").click(function(){ var theForm = document.frm1; if($("#c_name").val()==""){ $("#c_name").focus(); alert('please input c name'); return false; } theForm.submit(); }); $("input[name$='type']").click(function(){ var value = $(this).val(); if(value=='Individual') { $("#Individual_box").show(); $("#Company_box").hide(); } else if(value=='Company') { $("#Company_box").show(); $("#Individual_box").hide(); } }); $("#Individual_box").show(); $("#Company_box").hide(); }); </script> </div> </body> </html>
เพื่อความปลอดภัยของเว็บบอร์ด ไม่อนุญาติให้แทรก แท็ก [img]....[/img] โดยการอัพโหลดไฟล์รูปจากที่อื่น เช่นเว็บไซต์ ฟรีอัพโหลดต่าง ๆ อัพโหลดแทรกรูปภาพ ให้ใช้บริการอัพโหลดไฟล์ของไทยครีเอท และตัดรูปภาพให้พอดีกับสกรีน เพื่อความโหลดเร็วและไฟล์ไม่ถูกลบทิ้ง
Load balance : Server 01
