javascript waarde naar html input
Ik heb hier dus een mooi slider scriptje dat de waarde van de slider aan het input veld hieronder zou moeten doorgeven alleen komt er niets aan.
Iemand een idee waarom?
Quote:
<script type="text/javascript">
$(function() {
$('.slider_01').text('1');
var select = $( "#bar1" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 1,
max: 4,
range: "min",
slide: function( event, ui ) {
if (ui.value == '1') {
t1 = '1';
} else if (ui.value == '2') {
t1 = '2';
} else if (ui.value == '3') {
t1 = '3';
} else if (ui.value == '4') {
t1 = '4'
}
$('.slider_01').text(t1);
}
});
});
</script>
<input type="hidden" name="custom bar1" id="bar1" />
$(function() {
$('.slider_01').text('1');
var select = $( "#bar1" );
var slider = $( "<div id='slider'></div>" ).insertAfter( select ).slider({
min: 1,
max: 4,
range: "min",
slide: function( event, ui ) {
if (ui.value == '1') {
t1 = '1';
} else if (ui.value == '2') {
t1 = '2';
} else if (ui.value == '3') {
t1 = '3';
} else if (ui.value == '4') {
t1 = '4'
}
$('.slider_01').text(t1);
}
});
});
</script>
<input type="hidden" name="custom bar1" id="bar1" />
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
2
3
4
5
6
7
8
9
10
11
12
13
14
15
$(function() {
$( "#slider" ).slider({
min: 1,
max: 4,
value:1,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) );
});
<div id="slider"></div>
<p>
<input type="text" id="amount" />
$( "#slider" ).slider({
min: 1,
max: 4,
value:1,
slide: function( event, ui ) {
$( "#amount" ).val( ui.value );
}
});
$( "#amount" ).val( $( "#slider" ).slider( "value" ) );
});
<div id="slider"></div>
<p>
<input type="text" id="amount" />
Aldus-> http://jsbin.com/iyoqik/1/edit
Code (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
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
$(function() {
$( "#slider" ).slider({
min: 1,
max: 4,
value:1,
slide: function( event, ui ) {
switch (ui.value) {
case 1:
x="Eerste";
break;
case 2:
x="Tweede";
break;
case 3:
x="Derde";
break;
case 4:
x="Vierde";
break;
}
$( "#show_text" ).val(x) ;
}
});
$( "#show_text" ).val("Eerste") ;
});
<div id="slider"></div>
<p>
<input type="text" id="show_text" />
$( "#slider" ).slider({
min: 1,
max: 4,
value:1,
slide: function( event, ui ) {
switch (ui.value) {
case 1:
x="Eerste";
break;
case 2:
x="Tweede";
break;
case 3:
x="Derde";
break;
case 4:
x="Vierde";
break;
}
$( "#show_text" ).val(x) ;
}
});
$( "#show_text" ).val("Eerste") ;
});
<div id="slider"></div>
<p>
<input type="text" id="show_text" />
=> http://jsbin.com/iyoqik/5/edit
Gewijzigd op 08/05/2013 20:32:52 door Pieter R