Добрый день. сделал форму, которая пошагово дает пользователю право выбора(см. скрин ниже).
вот небольшая часть "многотысячнострокового" кода, чтобы понять в чем дело:
| PHP |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
| echo '<form method="post"> ';
echo '<label id="fa" >выбери обложку</label><br><input type="radio" id="kkr" name="host" value="0" onclick="show(\'damp1\');show(\'damp2\');show(\'damp3\');show(\'damp4\');show(\'damp\');show(\'vamp\');show(\'hamp\');hide(\'damp5\');hide(\'damp6\');hide(\'damp7\');hide(\'ramp\');hide(\'famp\');show(\'jost1\');show(\'jost2\');show(\'jost3\');show(\'jost4\');show(\'jost5\');show(\'jost6\');show(\'jost7\');show(\'kkh\');hide(\'jost10\');hide(\'jost11\');hide(\'jost12\');hide(\'jost15\');hide(\'jost16\');hide(\'eu\');hide(\'sel_sa\');"/><label id="kkk" >твердая</label><br />';
echo '<input type="radio" id="lk" name="host" value="1" onclick="hide(\'damp1\');hide(\'damp2\');hide(\'damp3\');hide(\'damp4\');hide(\'damp\');hide(\'vamp\');hide(\'hamp\');show(\'damp5\');show(\'damp6\');show(\'damp7\');show(\'ramp\');show(\'famp\');hide(\'jost1\');hide(\'jost2\');hide(\'jost3\');hide(\'jost4\');hide(\'jost5\');hide(\'jost6\');hide(\'input_adr\');hide(\'sel_sam\');hide(\'kk\');hide(\'jost7\');hide(\'kkh\');show(\'jost10\');show(\'jost11\');show(\'jost12\');show(\'jost15\');show(\'jost16\');show(\'eu\');"/><label id="zk" >мягкая</label><br><br>';
$host=$_POST['host'];
if ($host =="0") {
$hstyle="visibility:visible;";
$qstyle="visibility:visible;";
$mstyle="visibility:visible;";
}
if(($pgx > 20) and ($pgx < 40)) {
echo '<label id="damp1" style="'.$hstyle.'">выбери переплет</label><br>';
echo '<input type="radio" id="damp2" name="tost" value="1" style="'.$hstyle.'"/><label id="damp" style="'.$hstyle.'">пружина</label>';
}
elseif(($pgx > 40)and($pgx < 80)) {
echo '<label id="damp1" style="'.$hstyle.'">выбери переплет</label><br>';
echo '<input type="radio" id="damp2" name="tost" value="1" style="'.$hstyle.'"/><label id="damp" style="'.$hstyle.'">пружина</label>';
echo '<input type="radio" id="damp3" name="tost" value="2" style="'.$hstyle.'"/><label id="vamp" style="'.$hstyle.'">клеевой</label>';
}
elseif(($pgx > 80) and ($pgx < 200)) {
echo '<label id="damp1" style="'.$hstyle.'">выбери переплет</label><br>';
echo '<input type="radio" id="damp2" name="tost" value="1" style="'.$hstyle.'"/><label id="damp" style="'.$hstyle.'">пружина</label>';
echo '<input type="radio" id="damp3" name="tost" value="2" style="'.$hstyle.'"/><label id="vamp" style="'.$hstyle.'">клеевой</label>';
echo '<input type="radio" id="damp4" name="tost" value="3" style="'.$hstyle.'"/><label id="hamp" style="'.$hstyle.'">нитка</label>';
}
elseif(($pgx > 200)and($pgx < 250)) {
echo '<label id="damp1" style="'.$hstyle.'">выбери переплет</label><br>';
echo '<input type="radio" id="damp2" name="tost" value="1" style="'.$hstyle.'"/><label id="damp" style="'.$hstyle.'">пружина</label>';
echo '<input type="radio" id="damp3" name="tost" value="2" style="'.$hstyle.'"/><label id="vamp" style="'.$hstyle.'">клеевой</label>';
echo '<input type="radio" id="damp4" name="tost" value="3" style="'.$hstyle.'"/><label id="hamp" style="'.$hstyle.'">нитка</label>';
}
elseif(($pgx > 250)and($pgx < 350)) {
echo '<label id="damp1" style="'.$hstyle.'">выбери переплет</label><br>';
echo '<input type="radio" id="damp2" name="tost" value="1" style="'.$hstyle.'"/><label id="damp" style="'.$hstyle.'">пружина</label>';
echo '<input type="radio" id="damp4" name="tost" value="3" style="'.$hstyle.'"/><label id="hamp" style="'.$hstyle.'">нитка</label>';
}
elseif(($pgx > 350)and($pgx < 500)) {
echo '<label id="damp1" style="'.$hstyle.'">выбери переплет</label><br>';
echo '<input type="radio" id="damp4" name="tost" value="3" style="'.$hstyle.'"/><label id="hamp" style="'.$hstyle.'">нитка</label>';
}
elseif($pgx == 20) {
echo '<label id="damp1" style="'.$hstyle.'">выбери переплет</label><br>';
echo '<input type="radio" id="damp2" name="tost" value="1" style="'.$hstyle.'"/><label id="damp" style="'.$hstyle.'">пружина</label>';
}
elseif($pgx == 40) {
echo '<label id="damp1" style="'.$hstyle.'">выбери переплет</label><br>';
echo '<input type="radio" id="damp2" name="tost" value="1" style="'.$hstyle.'"/><label id="damp" style="'.$hstyle.'">пружина</label>';
echo '<input type="radio" id="damp3" name="tost" value="2" style="'.$hstyle.'"/><label id="vamp" style="'.$hstyle.'">клеевой</label>';
}
elseif($pgx == 80) {
echo '<label id="damp1" style="'.$hstyle.'">выбери переплет</label><br>';
echo '<input type="radio" id="damp2" name="tost" value="1" style="'.$hstyle.'"/><label id="damp" style="'.$hstyle.'">пружина</label>';
echo '<input type="radio" id="damp3" name="tost" value="2" style="'.$hstyle.'"/><label id="vamp" style="'.$hstyle.'">клеевой</label>';
echo '<input type="radio" id="damp4" name="tost" value="3" style="'.$hstyle.'"/><label id="hamp" style="'.$hstyle.'">нитка</label>';
}
elseif($pgx == 200) {
echo '<label id="damp1" style="'.$hstyle.'">выбери переплет</label><br>';
echo '<input type="radio" id="damp2" name="tost" value="1" style="'.$hstyle.'"/><label id="damp" style="'.$hstyle.'">пружина</label>';
echo '<input type="radio" id="damp3" name="tost" value="2" style="'.$hstyle.'"/><label id="vamp" style="'.$hstyle.'">клеевой</label>';
echo '<input type="radio" id="damp4" name="tost" value="3" style="'.$hstyle.'"/><label id="hamp" style="'.$hstyle.'">нитка</label>';
}
elseif($pgx == 250) {
echo '<label id="damp1" style="'.$hstyle.'">выбери переплет</label><br>';
echo '<input type="radio" id="damp3" name="tost" value="2" style="'.$hstyle.'"/><label id="vamp" style="'.$hstyle.'">клеевой</label>';
echo '<input type="radio" id="damp4" name="tost" value="3" style="'.$hstyle.'"/><label id="hamp" style="'.$hstyle.'">нитка</label>';
}
if ($host =="1") {
$estyle="visibility:visible;";
}
if(($pgx > 8)and($pgx < 32)) {
echo '<br><label id="damp5" style="'.$estyle.'">выбери переплет</label><br>';
echo '<input type="radio" id="damp6" name="tost" value="0" style="'.$estyle.'"/><label id="ramp" style="'.$estyle.'">скоба</label>';
}
if(($pgx == 8) or ($pgx == 32)) {
echo '<br><label id="damp5" style="'.$estyle.'">выбери переплет</label><br>';
echo '<input type="radio" id="damp6" name="tost" value="0" style="'.$estyle.'"/><label id="ramp" style="'.$estyle.'">скоба</label>';
}
if(($pgx > 40)and($pgx < 250)) {
echo '<br><label id="damp5" style="'.$estyle.'">выбери переплет</label><br>';
echo '<input type="radio" id="damp7" name="tost" value="2" style="'.$estyle.'"/><label id="famp" style="'.$estyle.'">клей</label>';
}
if(($pgx == 40) or ($pgx == 250)) {
echo '<br><label id="damp5" style="'.$estyle.'">выбери переплет</label><br>';
echo '<input type="radio" id="damp7" name="tost" value="2" style="'.$estyle.'"/><label id="famp" style="'.$estyle.'">клей</label>';
} |
|
но они не накладываются друг на друга при появлении, а появляются в своем собственном месте, где находятся в "visibility:hidden" и при нажатии на radio кнопки появляются свойственные ей поля.
вот собственно скрипт появления/исчезания:
| Javascript |
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
| <script type="text/javascript">
function show(id)
{
var el;
if (typeof document.all != 'undefined')
el = document.all(id);
else if (typeof document.getElementById != 'undefined')
el = document.getElementById(id);
if (el && el.style)
el.style.visibility = 'visible';
}
function hide(id)
{
var el;
if (typeof document.all != 'undefined')
el = document.all(id);
else if (typeof document.getElementById != 'undefined')
el = document.getElementById(id);
if (el && el.style)
el.style.visibility = 'hidden';
}
</script> |
|
написал в этом разделе, потому, что думаю что это можно реализовать средствами html. Или все-таки с z-index позаморачиваться?
Нужно чтобы при выборе сразу под выбранной кнопкой появлялись следующие, а не на несколько сот пикселей ниже. Возможно ли это? И как это сделать, подскажите пожалуйста.
(
