"Email shop form PL "
Bootstrap 3.0.3 Snippet by polo195pl

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
<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.3/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<!------ Include the above in your HEAD tag ---------->
<div class="container">
<div class="row">
<div class="col-md-12">
<form>
<div class="container" id="forWho">
<div class="row">
<div class="col-md-5">
<lebel>Dla kogo kołdra?</lebel>
</div>
<div class="col-md-7">
<lebel for="forChild">Dla dziecka</lebel> <input type="radio" name="whoKoldra" id="forChild" class="input For child">
<lebel for="forAdult">Dla dorosłych</lebel> <input type="radio" name="whoKoldra" id="forAdult" class="input For adult">
</div>
<p class="alert-warning hidden" id="firtWarning">Wybierz dla kogo kołdra ma być przeznaczona</p>
</div>
</div>
<div class="container" id="firstStep">
<div class="row">
<div class="col-md-12">
<button type="button" class="btn btn-success" id="step1" value="Dalej" onclick="stepFirst()">Dalej</button>
</div>
</div>
</div>
<div class="container hidden" id="forChildren">
<div class="row">
<div class="col-md-5">
<lebel class="lebel" for="heightChild">Wzrost dziecka</lebel>
<lebel class="lebel" for="massChild">Waga dziecka</lebel>
<lebel class="lebel" for="illChild">Schorzenie</lebel>
</div>
<div class="col-md-7">
<input type="number" id="heightChild" value="Wzrost dziecka" class="input age" minlength="40" maxlength="220" placeholder="120" required>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
body {
font-color: black;
font-size: 16px;
}
.lebel {
display: block;
margin-top: 10px;
}
.age, .mass, .height {
display: block;
}
.container:nth-child(1){
margin-top: 20px;
}
.input {
margin-top: 5px;
margin-bottom: 5px;
}
#dalej {
margin-top: 20px;
margin-left: 25%;
}
#dalej1 {
width: 200px !important;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX
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
function stepFirst() {
var whoKoldra = document.getElementsByName("whoKoldra");
var ischecked_method = false;
for (var i = 0; i < whoKoldra.length; i++) {
if (whoKoldra[i].checked) {
ischecked_method = true;
break;
}
}
if (!ischecked_method) { //Dla kogo musi byc wybrane
var element = document.getElementById("firtWarning");
element.classList.remove("hidden");
}
if (document.getElementById('forChild').checked) {
var element = document.getElementById("forChildren");
element.classList.remove("hidden");
var element = document.getElementById("forWho");
element.classList.add("hidden");
var element = document.getElementById("firstStep");
element.classList.add("hidden");
var element = document.getElementById("stepSecond");
element.classList.remove("hidden");
//Dla dziecka
} else if (document.getElementById('forAdult').checked) {
var element = document.getElementById("forAdults");
element.classList.remove("hidden");
var element = document.getElementById("forWho");
element.classList.add("hidden");
//Dla doroslych
var element = document.getElementById("firstStep");
element.classList.add("hidden");
var element = document.getElementById("stepSecond");
element.classList.remove("hidden");
}
}
function stepSecondBack() {
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX

Related: See More


Questions / Comments: