Подскажите пожалуйста. Есть 3-и radio button, 3-и формы и соответственно обработчики этих radio button.
Первоначально все формы скрыты, мне необходимо по нажатию на первый radio button показать первую форму (2 и 3 формы не видны), по нажатию на второй - скрыть первую и показать вторую (1, 3-я форма не видна), по нажатию на 3 radio button скрыть 2 форму (1, 2 формы не видны).
По нажатию на radio button я вызываю обработкич событий javascript - onclick="show(1)". Для скрытия и отображения форм использую display:none и display:block соответственно.
Скрипт вроде как работает, но работает только на Chrome и на Safari, на IE (пробывал на 8 версии) и на FireFox (пробывал на 5 версии) - оно не работает.
Проверял тег input и событие onclick - пишут что поддерживается всеми браузерами на 100%.
Помогите пожалуйста разобраться, сидел-сидел - ничего не предумал, решил обратиться за помощью к профессионалам.
Заранее благодарен!
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 4.01 //EN" "http://www.w3.org/TR/xhtml4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script type="text/javascript" src="jquery.js" ></script>
<script src="pack.js"></script>
<style>
#form1, #form2, #form3, #form4 {display:none;}
</style>
<!-- ------------------------------------------------- -->
</head>
<body>
<input type="radio" name="radio" onclick="show(1)"> 1
<input type="radio" name="radio" onclick="show(2)"> 2
<input type="radio" name="radio" onclick="show(3)"> 3
<!-- ------------------------------------------------- -->
<form id="form1" action="send_email.php" method="post" enctype="multipart/form-data">
<p class="type1">
<select id="sel" size="1" name="width1">
<option value="17">17</option>
<option value="20">20</option>
<option value="26">26</option>
</select> Ширина
</p>
</form>
<!-- ---------------- - --- - - - - - - - - ----------------- -->
<form id="form2" action="send_email.php" method="post" enctype="multipart/form-data">
<p class="type2">
<select id="heigh_2" size="1" name="height_2">
<option value="35">35</option>
<option value="40">40</option>
<option value="45">45</option>
</select> Высота
</p>
</form>
<!-- ---------------- --- --- -- - - - - - - --------------- -->
<form id="form3" action="send_email.php" method="post" enctype="multipart/form-data">
<p class="type3">
<select id="shir_3" size="1" name="shir_3">
<option value="30">30</option>
<option value="40">40</option>
<option value="50">50</option>
</select> Ширина
</p>
<!-- ------------------------------------------------- -->
</form>
</body>
</html>
function show(num) {
if(num == 1) {
$(".type1").css("display", "block");
$(".type2").css("display", "none");
$(".type3").css("display", "none");
$(".type4").css("display", "none");
$("#form1").css("display", "block");
$("#form2").css("display", "none");
$("#form3").css("display", "none");
$("#form4").css("display", "none");
}
else if (num == 2) {
$(".type1").css("display", "none");
$(".type2").css("display", "block");
$(".type3").css("display", "none");
$(".type4").css("display", "none");
$("#form1").css("display", "none");
$("#form2").css("display", "block");
$("#form3").css("display", "none");
$("#form4").css("display", "none");
}
else if (num == 3) {
$(".type1").css("display", "none");
$(".type2").css("display", "none");
$(".type3").css("display", "block");
$(".type4").css("display", "none");
$("#form1").css("display", "none");
$("#form2").css("display", "none");
$("#form3").css("display", "block");
$("#form4").css("display", "none");
}
}
