Input veld met datum moet opgeslagen worden (jquery?)
Als ik die gekozen heb moet hij die waarde opslaan en direct als de value tonen in dat datumveld. Nu werkt dit wel maar enkel na de refresh. Ik zal hier jquery voor nodig hebben.
Tot nu toe heb ik volgend script maar werkt niet zoals het moet.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="form-group">
<label class="col-sm-3 control-label">Datum kiezen</label>
<div class="col-sm-6">
<div class="input-group">
<input type="text" name="datum" id="zoekdatum" class="form-control datepicker" data-format="yyyy-mm-dd" value="<?php echo $_SESSION['zoekdatum']; ?>">
<div class="input-group-addon">
<a href="#"><i class="linecons-calendar"></i></a>
</div>
</div>
</div>
<div class="col-sm-3"><button type="submit" name="Submit" class="btn btn-info">Zoeken</button></div>
</div>
<label class="col-sm-3 control-label">Datum kiezen</label>
<div class="col-sm-6">
<div class="input-group">
<input type="text" name="datum" id="zoekdatum" class="form-control datepicker" data-format="yyyy-mm-dd" value="<?php echo $_SESSION['zoekdatum']; ?>">
<div class="input-group-addon">
<a href="#"><i class="linecons-calendar"></i></a>
</div>
</div>
</div>
<div class="col-sm-3"><button type="submit" name="Submit" class="btn btn-info">Zoeken</button></div>
</div>
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
<script>
$("#zoekdatum").change(function(){
//event.preventDefault();
//var formMessages = $('#form-messages');
var zoekdatum = $(this).val();
var datumtest = $.session.set("datumtest2", zoekdatum);
alert ($.session.get("datumtest2"));
//$(formMessages).removeClass('error').removeClass('success');
});
</script>
$("#zoekdatum").change(function(){
//event.preventDefault();
//var formMessages = $('#form-messages');
var zoekdatum = $(this).val();
var datumtest = $.session.set("datumtest2", zoekdatum);
alert ($.session.get("datumtest2"));
//$(formMessages).removeClass('error').removeClass('success');
});
</script>
De alert geeft momenteel 'undefined' weer. Ik denk ook wel dat er een betere manier moet zijn ipv te werken met sessies.
Gewijzigd op 27/05/2015 13:33:52 door Brecht S
Code (php)
1
$(this).val();
De waarde pakt tussen de elementen (aka <option>deze waarde</option>), niet zoals jij wil de attribute.
Aangezien de element input geen ingesloten waarde heeft, resulteert dat in "undefined".
Jouw code van je zoekdatum zou dus er ongeveer zo uit moeten zien:
Code (php)
1
2
3
4
2
3
4
$("#zoekdatum").change(function(){
$.session.set("datumtest2", $(this).attr('value'));
alert ($.session.get("datumtest2"));
});
$.session.set("datumtest2", $(this).attr('value'));
alert ($.session.get("datumtest2"));
});
Gewijzigd op 27/05/2015 13:01:41 door Johan K
En het maken van sessies hoeft misschien niet. Ik weet het niet.
Ook is er geen sprake van option fields. Ik gebruik een gewoon input field en geen dropdown/select.
De onchange functie is dan goed.
Je moet dan alleen nog een XMLHTTPRequest object aanmaken om PHP te vertellen dat hij de nieuwe waarde moet opslaan.
Of een voorbeeld posten hoe je dit zou aanpakken?
Gewijzigd op 27/05/2015 13:35:40 door Brecht S
Als je verwacht dat ik de code die je wilt hebben pro deo ga uittypen, dan zit je er naast.
Brecht gebruikt een jQuery plugin: https://github.com/AlexChittock/JQuery-Session-Plugin
Deze plugin gebruikt cookies om data in op te slaan op een gemakkelijke manier.
Als brecht inderdaad de nieuwe geselecteerde datum door PHP zou willen behandelen, dan zit je inderdaad aan het XMLHTTPRequestXMLHTTPRequest oftuwel Ajax vast maar ik denk niet dat dit het geval is.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
<html>
<head>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.session.js"></script>
</head>
<body>
<form>
<input type="text" name="datum" id="zoekdatum" data-format="yyyy-mm-dd" value="<?php echo date(time('yyyy-mm-dd')); ?>">
</form>
<script type="text/javascript">
$("#zoekdatum").change(function(){
$.session.set("date", $(this).val());
alert ($.session.get("date"));
});
</script>
</body>
</html>
<head>
<script type="text/javascript" src="jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="jquery.session.js"></script>
</head>
<body>
<form>
<input type="text" name="datum" id="zoekdatum" data-format="yyyy-mm-dd" value="<?php echo date(time('yyyy-mm-dd')); ?>">
</form>
<script type="text/javascript">
$("#zoekdatum").change(function(){
$.session.set("date", $(this).val());
alert ($.session.get("date"));
});
</script>
</body>
</html>
Dus ik pick een datum vanuit de datetime picker (id zoekdatum) en daaronder komt een tabel met alle resultaten van die datum (uit mysql gehaald). De value van het input field is nu de nieuwe waarde van de zoekdatum (zonder dat er moet gerefreshed worden).
Als ik jouw voorbeeld volg voor de value van het input field krijg ik dit als resultaat 1432730188 (bvb op 31-05-2015). Er is hier geen enkele link met de sessie die eerder is gecreërd. En de alert werkt ook niet. Ik krijg die niet te zien.
Gewijzigd op 27/05/2015 14:39:20 door Brecht S
Voortaan even duidelijker zijn wat je precies wilt, en dat is je pagina updaten met gegevens vanuit de database zonder dat je de pagina refreshed. Om het simpel te houden, word dat Ajax genoemd.
Met jQuery is het vrij gemakkelijk, maar het gaat wel effe duren voordat je het allemaal onder de knie heb.
Code (php)
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
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
<html>
<head>
<!-- zorg dat je deze bestanden heb en dat ze werken -->
<link rel="stylesheet" type="text/css" media="all" href="/jquery-ui.theme.min.css" />
<script type="text/javascript" src="/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/jquery-ui.min.js"></script>
</head>
<body>
<form action="#" method="post">
<input type="text" name="date" id="datepicker" value="">
</form>
<div id="result"></div>
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker();
});
$("#datepicker").change(function(){
$.ajax({
type: 'post',
url: '/query.php',
data: $("#datepicker").serialize(),
success: function(data){
$('#result').html( data );
}
});
});
</script>
</body>
</html>
<head>
<!-- zorg dat je deze bestanden heb en dat ze werken -->
<link rel="stylesheet" type="text/css" media="all" href="/jquery-ui.theme.min.css" />
<script type="text/javascript" src="/jquery-1.11.3.min.js"></script>
<script type="text/javascript" src="/jquery-ui.min.js"></script>
</head>
<body>
<form action="#" method="post">
<input type="text" name="date" id="datepicker" value="">
</form>
<div id="result"></div>
<script type="text/javascript">
$(function() {
$( "#datepicker" ).datepicker();
});
$("#datepicker").change(function(){
$.ajax({
type: 'post',
url: '/query.php',
data: $("#datepicker").serialize(),
success: function(data){
$('#result').html( data );
}
});
});
</script>
</body>
</html>
Gewijzigd op 27/05/2015 16:08:13 door Johan K
Alleen had ik zover nog niet gedacht. Ik heb nu het volgende gemaakt maar werkt nog niet. Het zoekdatum input veld is niet geupdate maar blijft leeg staan.
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
2
3
4
5
6
7
8
9
10
11
12
$("#zoekdatum").change(function(){
$.ajax({
type: 'post',
url: '/reservaties-overzicht-ajax.php',
data: $(this).serialize(),
success: function(data){
$('#zoekdatum').html( data );
}
});
});
$.ajax({
type: 'post',
url: '/reservaties-overzicht-ajax.php',
data: $(this).serialize(),
success: function(data){
$('#zoekdatum').html( data );
}
});
});
En voor de reservaties-overzicht-ajax.php file:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
2
3
4
5
6
7
8
9
10
11
12
13
14
<div class="form-group">
<label class="col-sm-3 control-label">Datum kiezen</label>
<div class="col-sm-6">
<div class="input-group">
<input type="text" name="datum" id="zoekdatum" class="form-control datepicker" data-format="yyyy-mm-dd" value="<?php echo $_SESSION['zoekdatum']; ?>">
<div class="input-group-addon">
<a href="#"><i class="linecons-calendar"></i></a>
</div>
</div>
</div>
<div class="col-sm-3"><button type="submit" name="Submit" class="btn btn-info">Zoeken</button></div>
</div>
<label class="col-sm-3 control-label">Datum kiezen</label>
<div class="col-sm-6">
<div class="input-group">
<input type="text" name="datum" id="zoekdatum" class="form-control datepicker" data-format="yyyy-mm-dd" value="<?php echo $_SESSION['zoekdatum']; ?>">
<div class="input-group-addon">
<a href="#"><i class="linecons-calendar"></i></a>
</div>
</div>
</div>
<div class="col-sm-3"><button type="submit" name="Submit" class="btn btn-info">Zoeken</button></div>
</div>
Gewijzigd op 27/05/2015 16:53:13 door Brecht S