PHP en OnChange probleem
Ik heb in een loop een aantal datum in een <select> gezet.
Bij die datum zoek ik de dag van de week en die staat er ook bij.
Nu wil ik graag dat als er een vrijdag geselecteerd wordt dat er 2 nieuwe text fields bij komen.
Alleen ik weet niet hoe ik dit doe met javascript. De <option> krijgt nu de waarde van de datum mee.
Hoop dat iemand me hiermee kan helpen.
---Code---
<select name="datum">
<option>Voor welke datum wilt U reserveren?</option>
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
<?php
for ($d=0;$d<10;$d++){
$nu = date("d-m-Y",strtotime("$d day"));
$day_of_the_week = date('l', strtotime($nu));
if ($day_of_the_week == Monday){$day_of_the_week = 'Maandag';}else if
($day_of_the_week == Tuesday){$day_of_the_week = 'Dinsdag';}else if
($day_of_the_week == Wednesday){$day_of_the_week = 'Woensdag';}else if
($day_of_the_week == Thursday){$day_of_the_week = 'Donderdag';}else if
($day_of_the_week == Friday){$day_of_the_week = 'Vrijdag';}else if
($day_of_the_week == Saturday){$day_of_the_week = 'Zaterdag';}else if
($day_of_the_week == Sunday){$day_of_the_week = 'Zondag';}
echo '<option value="'.$nu.'">'.$day_of_the_week .'  '. $nu.'</option>';
}
?>
for ($d=0;$d<10;$d++){
$nu = date("d-m-Y",strtotime("$d day"));
$day_of_the_week = date('l', strtotime($nu));
if ($day_of_the_week == Monday){$day_of_the_week = 'Maandag';}else if
($day_of_the_week == Tuesday){$day_of_the_week = 'Dinsdag';}else if
($day_of_the_week == Wednesday){$day_of_the_week = 'Woensdag';}else if
($day_of_the_week == Thursday){$day_of_the_week = 'Donderdag';}else if
($day_of_the_week == Friday){$day_of_the_week = 'Vrijdag';}else if
($day_of_the_week == Saturday){$day_of_the_week = 'Zaterdag';}else if
($day_of_the_week == Sunday){$day_of_the_week = 'Zondag';}
echo '<option value="'.$nu.'">'.$day_of_the_week .'  '. $nu.'</option>';
}
?>
</select>
Code (php)
1
2
3
4
2
3
4
$("select").change(function(){
$("div").empty();
$("div").append('<br><input type="text"><br><input type="text" name="veld[]"><br>');
});
$("div").empty();
$("div").append('<br><input type="text"><br><input type="text" name="veld[]"><br>');
});
=> http://jsbin.com/oduzup/6/edit
Code (php)
1
2
3
4
5
6
2
3
4
5
6
$("select").change(function() {
$("div").empty();
if ($("select").val() == "31-05-2013") {
$("div").append('<br><input type="text"><br><input type="text" name="veld[]"><br>');
}
});
$("div").empty();
if ($("select").val() == "31-05-2013") {
$("div").append('<br><input type="text"><br><input type="text" name="veld[]"><br>');
}
});
Je hebt dan alleen 31-05-2013 te pakken.
Ik denk dat je wel een stap verder wilt.
Je zou dan in Jquery/Javascript moeten gaan bepalen of "31-05-2013" een vrijdag is.
Da's voor mij ook ff een uitzoeker.
=> http://jsbin.com/oduzup/9/edit
Code (php)
1
2
3
4
5
6
7
2
3
4
5
6
7
$("select").change(function() {
$("div").empty();
var adate = new Date($(this).val())
if (adate.getDay() == 5) {
$("div").append('<br><input type="text"><br><input type="text" name="veld[]"><br>');
}
});
$("div").empty();
var adate = new Date($(this).val())
if (adate.getDay() == 5) {
$("div").append('<br><input type="text"><br><input type="text" name="veld[]"><br>');
}
});
Kan ook met de datum zoals je heb nu er in hebt staan:
Code (php)
1
2
3
4
5
6
7
8
2
3
4
5
6
7
8
$("select").change(function() {
$("div").empty();
var date_arr = $(this).val().split('-');
var adate = new Date(parseInt(date_arr[2]), parseInt(date_arr[1]) - 1, parseInt(date_arr[0]);
if (adate.getDay() == 5) {
$("div").append('<br><input type="text"><br><input type="text" name="veld[]"><br>');
}
});
$("div").empty();
var date_arr = $(this).val().split('-');
var adate = new Date(parseInt(date_arr[2]), parseInt(date_arr[1]) - 1, parseInt(date_arr[0]);
if (adate.getDay() == 5) {
$("div").append('<br><input type="text"><br><input type="text" name="veld[]"><br>');
}
});
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
30
31
32
33
34
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Datum naar javascript</title>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script>
$(document).ready(function() {
$('.my-select').change(function() {
var milliseconds = $('.my-select option:selected').val();
var d = new Date();
d.setTime(milliseconds);
var datum = d.getDate()+'-'+(d.getMonth()+1)+'-'+d.getFullYear();
alert(datum);
});
});
</script>
</head>
<body>
<select class="my-select">
<?php
$days = array('Zondag','Maandag','Dinsdag','Woensdag','Donderdag','Vrijdag','Zaterdag');
$timenow = time();
for ($d=0;$d<10;$d++){
$nextday = $timenow + $d * 24 * 60 * 60;
$day_of_the_week = $days[date('w', $nextday)];
echo '<option value="'.($nextday*1000).'">'.$day_of_the_week .'  '. date('d-m-Y',$nextday).'</option>';
}
?>
</select>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Datum naar javascript</title>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script>
$(document).ready(function() {
$('.my-select').change(function() {
var milliseconds = $('.my-select option:selected').val();
var d = new Date();
d.setTime(milliseconds);
var datum = d.getDate()+'-'+(d.getMonth()+1)+'-'+d.getFullYear();
alert(datum);
});
});
</script>
</head>
<body>
<select class="my-select">
<?php
$days = array('Zondag','Maandag','Dinsdag','Woensdag','Donderdag','Vrijdag','Zaterdag');
$timenow = time();
for ($d=0;$d<10;$d++){
$nextday = $timenow + $d * 24 * 60 * 60;
$day_of_the_week = $days[date('w', $nextday)];
echo '<option value="'.($nextday*1000).'">'.$day_of_the_week .'  '. date('d-m-Y',$nextday).'</option>';
}
?>
</select>
</body>
</html>
Weer wat geleerd.
Gewijzigd op 01/06/2013 19:31:24 door Gijs Jansen
ik heb een voorbeeld gemaakt hoe je de datum uit de select (die overigens door php gemaakt wordt) kunt uitlezen en in een javascript Date object omgezet worden. Om te bewijzen dat het werkt heb ik die alert er ingezet. Ik ging er van uit dat je de rest zelf zou kunnen :)
Wat is de volgende stap?
maak die twee textfields gewoon in de html maar maak ze in de css hidden:
Code (php)
1
2
3
2
3
input.my-textfield {
display:none;
}
display:none;
}
dan in de change() functie haal je die alert weg en op die plek moeten dus die twee textfields zichtbaar worden.
Toevoeging op 02/06/2013 01:57:33:
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
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
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
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Datum naar javascript</title>
<style>
.my-textfield {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script>
// wacht tot de pagina geladen is
$(document).ready(function() {
// als er een ander item geselecteerd wordt in de selectbox
$('.my-select').change(function() {
// haal de milliseconden sinds 1-1-1970 uit de 'value' van het geselecteerde item
var milliseconds = $('.my-select option:selected').val();
// maak een Date object en zet hem op de juiste tijd/datum aan de hand van de milliseconden
var d = new Date();
d.setTime(milliseconds);
// als het om een vrijdag gaat laat dan twee textfields zien
if(d.getDay() == 5) {
$('.my-textfield').fadeIn('slow');
// ter demonstratie dan ook de inhoud even wijzigen van de textfields:
$('#text1').val('Thanks god..');
$('#text2').val('it is Friday!');
// anders de textfields weer laten verdwijnen
} else {
$('.my-textfield').fadeOut('slow');
}
});
});
</script>
</head>
<body>
<select class="my-select">
<?php
$days = array('Zondag','Maandag','Dinsdag','Woensdag','Donderdag','Vrijdag','Zaterdag');
$timenow = time();
for ($d=0;$d<10;$d++){
$nextday = $timenow + $d * 24 * 60 * 60;
$day_of_the_week = $days[date('w', $nextday)];
echo '<option value="'.($nextday*1000).'">'.$day_of_the_week .'  '. date('d-m-Y',$nextday).'</option>';
}
?>
</select>
<input type="text" id="text1" class="my-textfield" value="test1" />
<input type="text" id="text2" class="my-textfield" value="test2" />
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<title>Datum naar javascript</title>
<style>
.my-textfield {
display:none;
}
</style>
<script src="http://code.jquery.com/jquery-1.10.0.min.js"></script>
<script>
// wacht tot de pagina geladen is
$(document).ready(function() {
// als er een ander item geselecteerd wordt in de selectbox
$('.my-select').change(function() {
// haal de milliseconden sinds 1-1-1970 uit de 'value' van het geselecteerde item
var milliseconds = $('.my-select option:selected').val();
// maak een Date object en zet hem op de juiste tijd/datum aan de hand van de milliseconden
var d = new Date();
d.setTime(milliseconds);
// als het om een vrijdag gaat laat dan twee textfields zien
if(d.getDay() == 5) {
$('.my-textfield').fadeIn('slow');
// ter demonstratie dan ook de inhoud even wijzigen van de textfields:
$('#text1').val('Thanks god..');
$('#text2').val('it is Friday!');
// anders de textfields weer laten verdwijnen
} else {
$('.my-textfield').fadeOut('slow');
}
});
});
</script>
</head>
<body>
<select class="my-select">
<?php
$days = array('Zondag','Maandag','Dinsdag','Woensdag','Donderdag','Vrijdag','Zaterdag');
$timenow = time();
for ($d=0;$d<10;$d++){
$nextday = $timenow + $d * 24 * 60 * 60;
$day_of_the_week = $days[date('w', $nextday)];
echo '<option value="'.($nextday*1000).'">'.$day_of_the_week .'  '. date('d-m-Y',$nextday).'</option>';
}
?>
</select>
<input type="text" id="text1" class="my-textfield" value="test1" />
<input type="text" id="text2" class="my-textfield" value="test2" />
</body>
</html>
Gewijzigd op 02/06/2013 10:06:02 door Frank Nietbelangrijk