Selected Datepickter datum doorsturen
Ik zit met een probleem en ben daarmee tot in de late uurtjes (03:10) bezig geweest.
Ik gebruik de bekende Datepicker om een datum te selecteren.
Deze werkt zoals het hoort.
Maar ik wil nu een extra functie bouwen die het volgende doet:
Wanneer er in de Datepicker de datum "zondag 3 mei 2015" wordt aangeklikt (zondag is normaal gesproken niet aanklikbaar) moet er een extra hidden formfield worden gegenereerd.
De bewuste zondag 3 mei 2015 maak ik beschikbaar via:
var openDates = [[05,03,2015]];
Voor alle overige dagen (maandag t/m zaterdag) wordt sowieso de aangeklikte datum doorgegeven aan:
$("input[name='eventdate']").val(dateText);
Nu wil ik dat er voor de gewenste zondag 3 mei 2015 een speciale input field hebben.
Dus wanneer deze datum wordt aangeklikt moet er een nieuwe <input type='hidden' name='specialsunday' /> worden aangemaakt met daarin de waarde value='1'.
Vervolgens wil ik via een AJAX post de waarde van het veld 'specialsunday' doorsturen naar een ander php script welke controleert of er een specialsunday (3 mei 2015) is aangeklikt. Zo ja dan wordt er een melding getoond op het scherm. Die melding kan bijvoorbeeld zijn "Let op voor zondag 3 mei 2015 betaald u een extra toeslag".
Hoe kan ik dit het eenvoudigst realiseren?
Vertrouw. Nooit. User. Input.
Je wilt te allen tijde de "controle" aan jouw zijde houden. Hierbij moet je ook zorgen dat je de code voor deze controle eenmalig schrijft. Vervolgens voer je deze check (waarbij je dus in beide gevallen refereert aan dit ene zelfde stuk code) op twee plaatsen uit:
- in de AJAX-call, (ENKEL) om een gebruiker hierover in te lichten
- in de verdere verwerking van je formulier, voor het daadwerkelijk verrekenen van een eventuele toeslag
Het is mij alleen nog niet helemaal duidelijk hoe ik dat met een correcte code kan bewerkstelligen...
Ik heb het volgende staan, wat werkt:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
onSelect: function(dateText, inst) {
$("input[name='eventdate']").val(dateText);
$("#alternatedate").fadeIn();
$.post( "/savedatum.php", { selecteddate:dateText } );
}
$("input[name='eventdate']").val(dateText);
$("#alternatedate").fadeIn();
$.post( "/savedatum.php", { selecteddate:dateText } );
}
Hierin wordt wel de aangeklikte datum toegevoegd aan het formulierveld "eventdate" en deze wordt als uitgeschreven datum getoond in #alternatedate.
Ook wordt de geselecteerde datum via de post naar het savedatum.php script gestuurd (hierin wordt de datum toegevoegd in een database tabel).
Echter wat ik als resultaat wil hebben, is dat op de formulier pagina ook direct de extra toeslag wordt berekend. Dit doet hij nu niet omdat de waarde van het "eventdate" formulierveld niet op de formulierpagina via ajax kan doorsturen naar het script waarin het totaalbedrag wordt berekend.
Onderstaande stukje code stuurt waarden van het formulier door naar het berekentotaal script, hierin is .selecteddate de class binnen het "eventdate" formulierveld:
Quote:
Dit doet hij nu niet omdat de waarde van het "eventdate" formulierveld niet op de formulierpagina via ajax kan doorsturen naar het script waarin het totaalbedrag wordt berekend.
Dat zou wel de makkelijkste plaats zijn, je kunt dan de eerdergenoemde check ook uitvoeren in berekentotaal.php.
Waarom kun je deze waarde niet doorsturen? De eventdate is toch gewoon onderdeel van het formulier? Waarom lukt het versturen van de datum naar savedatum.php dan wel? Gaat het om meerdere datums, of slechts een?
De situatie meer specifiek is als volgt:
1. ik heb een pagina/script formulier.php, hierop staat de Datepicker om een datum te selecteren en dit werkt:
Code (php)
1
2
3
4
5
2
3
4
5
echo "<div id='datepicker' class='deDatepicker'></div>";
echo "<input type='hidden' name='eventdate' class='selecteddate' />";
echo "<input type='text' id='alternatedate' class='showselectedbezdate' readonly />";
echo "<div id='showtotaal'></div>";
echo "<input type='hidden' name='eventdate' class='selecteddate' />";
echo "<input type='text' id='alternatedate' class='showselectedbezdate' readonly />";
echo "<div id='showtotaal'></div>";
in de tweede echo moet de datum worden toegevoegd die is aangeklikt (werkt niet!).
in de derde echo wordt de datum getoond die is aangeklikt (dit werkt!).
in de vierde echo moet een toeslag bedrag komen wanneer de aangeklikte datum zondag 3 mei is zonder dat de hele pagina gerefreshed hoeft te worden.
Over waarom de tweede echo niet werkt tast ik dus nog in het duister. Hierin wordt alleen een datum getoond die is voorgeselecteerd voordat er op de Datepicker datum wordt geklikt.
2. het versturen van de datum naar savedatum.php lukt wel omdat dit gebeurd in de Datepicker functie. Het stukje javascript van de Datepicker staat in een speciaal javascript bestand.
Code (php)
1
2
3
4
5
6
2
3
4
5
6
onSelect: function(dateText, inst) {
$("input[name='eventdate']").val(dateText);
$("#alternatedate").fadeIn();
$.post( "/savedatum.php", { selecteddate:dateText } );
}
$("input[name='eventdate']").val(dateText);
$("#alternatedate").fadeIn();
$.post( "/savedatum.php", { selecteddate:dateText } );
}
3. op de pagina/script formulier.php staat onderin ook een ajax stukje:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
function berekentotaal()
{
$.post("/berekentotaal.php", $('#processform').serialize(), function(html)
{
$('#showtotaal').html(html);
});
}
berekentotaal();
$('#processform input[type="hidden"].selecteddate').change(function(){berekentotaal();});
{
$.post("/berekentotaal.php", $('#processform').serialize(), function(html)
{
$('#showtotaal').html(html);
});
}
berekentotaal();
$('#processform input[type="hidden"].selecteddate').change(function(){berekentotaal();});
Dit stukje code staat dus op de formulier.php pagina en moet de waarde van .selecteddate sturen naar berekentotaal.php wanneer de waarde van het formulierveld .selecteddate veranderd.
Dit werkt niet goed omdat in het veld van de eventdate niet de reallife aangeklikte datum wordt opgenomen...
Ik moet dus op de formulier.php pagina een stukje code hebben die iets doet zoals:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
if($_POST["eventdate"]=="2015-05-03")
{
// bereken de toeslag
}else{
// geen toeslag berekenen
}
{
// bereken de toeslag
}else{
// geen toeslag berekenen
}
De uitkomst van die if constructie moet dan zonder refreshen getoond worden op de formulier.php pagina.
Ik hoop dat ik de situatie nu goed in beeld heb gebracht.
Zet alle attribuut waarden tussen "dubbele quotes".
Weet je zeker dat je geen JavaScript foutmeldingen krijgt? Ook al is de constructie (met enkele quotes) niet helemaal juist zou dit nog steeds moeten werken.
Ik heb de attributen voor de correctheid nu ook tussen dubbele quotes gezet, maar nog steeds wordt er niet gedaan wat ik graag zou willen.
Toevoeging op 01/05/2015 15:58:02:
Ik heb op verschillende posites binnen de Datepicker javascript het volgende geplaatst en hiermee krijg ik wel de geselecteerde datum te zien als Alert message:
alert(dateText);
En de waarde die daar wordt getoond moet dus simpelweg direct in het eventdate formulierveld worden gestopt...
Quote:
In het stukje javascript van de Datepicker staat verder geen fouten. Of ik moet er na 100 keer lezen overheen kijken...
Je moet niet naar code kijken, je moet kijken naar wat je browser je vertelt. Als je JavaScript onderweg ergens breekt om wat voor reden dan ook doet je code vervolgens niets meer.
Zonder complete code wordt dit een beetje lastig.
is dateText een object toevallig (in plaats van een string)?
wordt de naam "eventdate" meerdere keren gebruikt?
heeft je HTML syntax-fouten?
staat het inputveld wel binnen je form-tag?
Ik kan zo blijven raden wat er fout is natuurlijk :p.
dateText wordt alleen hier gebruikt:
Code (php)
1
2
3
4
5
6
2
3
4
5
6
onSelect: function(dateText, inst) {
$("input[name='eventdate']").val(dateText);
$("#alternatedate").fadeIn();
$.post( "/savedatum.php", { selecteddate:dateText } );
}
$("input[name='eventdate']").val(dateText);
$("#alternatedate").fadeIn();
$.post( "/savedatum.php", { selecteddate:dateText } );
}
De "eventdate" wordt gewoon één keer gebruikt en staat ook binnen de form-tag ;)
HTML heeft verder geen syntax fouten.
Laat ik de vraag anders stellen. Hoe zou jij het bovenstaan (wat ik wil) realiseren binnen de code die ik nu heb.
Mijn punt is dat eigenlijk alles werkt zoals het hoort alleen dat stukje zoals hierboven beschreven.
Wat ik denk wat fout gaat:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
function berekentotaal()
{
$.post("/berekentotaal.php", $('#processform').serialize(), function(html)
{
$('#showtotaal').html(html);
});
}
berekentotaal();
$('#processform input[type="hidden"].selecteddate').change(function(){berekentotaal();});
{
$.post("/berekentotaal.php", $('#processform').serialize(), function(html)
{
$('#showtotaal').html(html);
});
}
berekentotaal();
$('#processform input[type="hidden"].selecteddate').change(function(){berekentotaal();});
Dat hierin niet wordt gezien dat het input veld .selecteddate veranderd ofzo...
Toevoeging op 01/05/2015 16:52:57:
Ik heb weer een controle uitgevoerd.
Ik heb van de hidden input formfield "eventdate" een text input formfield gemaakt zodat ik kan zien wat er in komt te staan nadat de er een datum is aangeklikt via de Datepicker.
Als ik op zondag 3 mei 2015 klik komt er netjes 2015-05-03 in de input formfield te staan "eventdate".
Dit formulierveld wijzigt dus wel.
Ik begin echt te denken dat
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
function berekentotaal()
{
$.post("/berekentotaal.php", $('#processform').serialize(), function(html)
{
$('#showtotaal').html(html);
});
}
berekentotaal();
$('#processform input[type="hidden"].selecteddate').change(function(){berekentotaal();});
{
$.post("/berekentotaal.php", $('#processform').serialize(), function(html)
{
$('#showtotaal').html(html);
});
}
berekentotaal();
$('#processform input[type="hidden"].selecteddate').change(function(){berekentotaal();});
niet overweg kan met een formulierveld die via post callback wordt gevuld vanuit javascript.
kan dat kloppen?
Daarnaast, ik neem aan dat je dit in een $().ready(function() { ... }) block hebt staan om er verzekerd van te zijn dat je DOM en dergelijke ingeladen zijn?
Ik ben even een eigen variant aan het opzetten om te zien wat er mogelijk mis kan gaan, maar ben nog niet klaar.
Ik ben ook nog steeds zoekende en probeer nu veel uit en probeer ook het één en ander uit te sluiten.
En ja de function berekentotaal() staat tussen een $().ready(function() { ... }) block.
Klopt die slash wel voor /berekentotaal.php? Levert dat geen 404 op ofzo?
EDIT: heeft het inputveld met id "eventdate" ook een attribuut "name"?
---
EDIT: ik weet niet hoe je code er verder uitziet, maar je kunt ook prima die mededeling in je berekeningsterugkoppeling zetten, zoiets dus:
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
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
<form id="processform">
<input type="text" id="eventdate" name="eventdate" />
</form>
<div id="showtotaal"></div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
// callback function for filtering available days
function availableDates(d) {
var date = $.datepicker.formatDate('yy-mm-dd', d);
var enabled = true;
var exceptions = ['2015-05-03'];
// first, disable weekends
var noWeekends = $.datepicker.noWeekends(d);
enabled = noWeekends[0];
// then check if this is an exception
if ($.inArray(date, exceptions) > -1) {
enabled = true;
}
return [enabled];
}
//
$('#eventdate').datepicker({
'dateFormat': 'yy-mm-dd', // yy-mm-dd
'beforeShowDay': availableDates
});
$('#eventdate').change(function() {
$.post('berekentotaal.php', $('#processform').serialize(), function(html) {
$('#showtotaal').html(html);
});
});
});
//]]>
</script>
<input type="text" id="eventdate" name="eventdate" />
</form>
<div id="showtotaal"></div>
<script type="text/javascript">
//<![CDATA[
$().ready(function() {
// callback function for filtering available days
function availableDates(d) {
var date = $.datepicker.formatDate('yy-mm-dd', d);
var enabled = true;
var exceptions = ['2015-05-03'];
// first, disable weekends
var noWeekends = $.datepicker.noWeekends(d);
enabled = noWeekends[0];
// then check if this is an exception
if ($.inArray(date, exceptions) > -1) {
enabled = true;
}
return [enabled];
}
//
$('#eventdate').datepicker({
'dateFormat': 'yy-mm-dd', // yy-mm-dd
'beforeShowDay': availableDates
});
$('#eventdate').change(function() {
$.post('berekentotaal.php', $('#processform').serialize(), function(html) {
$('#showtotaal').html(html);
});
});
});
//]]>
</script>
berekentotaal.php
Code (php)
1
2
3
4
5
6
7
8
9
10
11
12
13
2
3
4
5
6
7
8
9
10
11
12
13
<?php
header('Content-Type: text/html; charset=UTF-8');
$specialDates = array('2015-05-03');
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// obviously, you need to VALIDATE your data as well...
echo '<pre>'.print_r($_POST, true).'</pre>';
if (in_array($_POST['eventdate'], $specialDates)) {
?><div style="background-color: #ffcccc;"><p>Opgelet: extra toeslag!</p></div><?php
}
}
?>
header('Content-Type: text/html; charset=UTF-8');
$specialDates = array('2015-05-03');
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
// obviously, you need to VALIDATE your data as well...
echo '<pre>'.print_r($_POST, true).'</pre>';
if (in_array($_POST['eventdate'], $specialDates)) {
?><div style="background-color: #ffcccc;"><p>Opgelet: extra toeslag!</p></div><?php
}
}
?>
Gewijzigd op 01/05/2015 17:44:11 door Thomas van den Heuvel
Code (php)
1
2
3
4
5
6
2
3
4
5
6
onSelect: function(dateText, inst) {
$("input[name='eventdate']").val(dateText);
$("#alternatedate").fadeIn();
$.post( "/savedatum.php", { selecteddate:dateText } );
}
$("input[name='eventdate']").val(dateText);
$("#alternatedate").fadeIn();
$.post( "/savedatum.php", { selecteddate:dateText } );
}
Dus in eventdate wordt "2015-05-03" gestopt en Zondag, 3 mei 2015 wordt aan #alternatedate gekoppeld.
Met die laatste voluit geschreven datum doe ik verder niets, alleen maar weergave. De waarde van "eventdate" moet via de AJAX call worden doorgestuurd naar berekentotaal.php
Die slash klopt inderdaad. Er wordt naast "input[type="hidden"].selecteddate" ook andere variabelen meegestuurd zoals:
select.soortadres
input[type="text"].emailadres
Dit werkt overigens goed. Alleen de waarde uit "eventdate" (input[type="hidden"].selecteddate) wordt niet gevuld doorgestuurd.
Ah, savedatum is voor de publieke weergave van de datum? Mogelijk heb je iets aan het bovenstaande antwoord, anders moet ik later even verder kijken - moet nu aan de kokerij :/.
Ik heb even goed naar je code gekeken en bepaalde dingen toegepast op mijn programmatuur, maar dit is niet de oplossing helaas.
Wat ik denk (en begin het bijna zeker te weten) dat het volgende het probleem is:
1. ik heb een javascript.js bestand, hierin staat het stukje javascript voor de Datepicker met o.a. onderstaande code
Code (php)
1
2
3
4
5
6
2
3
4
5
6
onSelect: function(dateText, inst) {
$("input[name='eventdate']").val(dateText);
$("#alternatedate").fadeIn();
$.post( "/savedatum.php", { selecteddate:dateText } );
}
$("input[name='eventdate']").val(dateText);
$("#alternatedate").fadeIn();
$.post( "/savedatum.php", { selecteddate:dateText } );
}
2. de Datepicker kalender staat in formulier.php, <div id="datepicker" class="deDatepicker"></div>
3. het script savedatum.php (zichtbaar in het .js bestand) is er alleen om de aangeklikte datum in een database te stopen. Dit zou je voor mijn probleem kunnen wegdenken.
4. op de pagina formulier.php wordt de aangeklikte datum getoond in zowel input field "eventdate" (format 2015-05-03) en in de readonly input met ID alternatedate (format Zondag, 3 mei 2015).
5. verder staat er op formulier.php een stukje ajax die elke wijziging van het formulier #processform doorstuurt naar een verwerkingsscript genaamd berekentotaal.php
6. naar dit berekentotaal.php script worden verschillende variabelen gestuurd m.b.v. onderstaande stukje code:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
function berekentotaal()
{
$.post("/berekentotaal.php", $('#processform ').serialize(), function(html)
{
$('#showtotaal').html(html);
});
}
berekentotaal();
$('#processform select.selectcard, input[type="checkbox"].agree, #eventdate').change(function(){berekentotaal();});
{
$.post("/berekentotaal.php", $('#processform ').serialize(), function(html)
{
$('#showtotaal').html(html);
});
}
berekentotaal();
$('#processform select.selectcard, input[type="checkbox"].agree, #eventdate').change(function(){berekentotaal();});
7. alle formulier elementen staan tussen de form-tags waarbij select.selectcard en de checkbox op de formulier.php pagina zelf worden aangevinkt of geselecteerd. De #eventdate wordt echter gevuld vanuit javascript.js
8. de andere twee formulier elementen worden correct en goed doorgestuurd wanneer de waarde veranderd, maar dit gebeurd bij de #eventdate niet.
Ik weet dus eigenlijk wel zeker dat de veranderingen die het javascript.js bestand doorvoert naar het $eventdate element niet worden herkent als zijn CHANGE op de pagina formulier.php
Hier moet ik dus een oplossing voor zien te vinden.
Van welke browser maak je gebruik?
Heb je extensies geinstalleerd?
Maak je gebruik van de developer console (functietoets F12)?
Je moet informatie "tot je laten komen" (en je moet weten hoe) om hier uit te komen, want dit is anders een beetje blind schieten. De eerste stap is het gewoon maar dumpen van informatie naar je scherm / je console om het probleem op te sporen en te isoleren zodat je op zijn minst weet WAAR het fout gaat. Vervolgens kun je aan een oplossing gaan werken.
Ik snap alleen niet goed waarom je tussentijds een datum wegschrijft. Ook lijkt mij:
nogal loos als dit veld al gekoppeld is aan je datepicker...
...Come to think of it, hoe luidt jouw declaratie van je datepicker object? Deze zie ik nergens staan :/. Het is voor mij verdomd moeilijk om een puzzel op te lossen waarvan ik niet alle stukjes heb. Waarom post je niet alle relevante delen?
Wat belangrijk is om te weten is dat als je via JS/JQuery de waarde van een input aanpast, de change event niet wordt getriggerd.
Maar eigenlijk wil je dat ook niet, want dat zou betekenen dat er nagenoeg gelijktijdig twee ajax request plaats vinden.
Net zoals Thomas vraag ik me af waarom je het in twee stappen wilt, maar als dat nodig is zou ik de berekentotaal() functie aanroepen in de callback van $.post('saveDatum.php').
Het klopt dat de change event niet wordt getriggerd, en dat is juist iets wat ik wel wil.
Is er niet een oplossing waarbij een change event wordt getriggerd wanneer de waarde via js/jquery wordt aangepast?
De twee request zijn wel nodig. De post naar savedatum.php is een stukje code wat enkel een aangeklikte datum op slaat. in savedatum.php staat enkel en alleen een mysql query.
Johnny Cash op 02/05/2015 13:28:52:
Het klopt dat de change event niet wordt getriggerd, en dat is juist iets wat ik wel wil.
Is er niet een oplossing waarbij een change event wordt getriggerd wanneer de waarde via js/jquery wordt aangepast?
Het klopt dat de change event niet wordt getriggerd, en dat is juist iets wat ik wel wil.
Is er niet een oplossing waarbij een change event wordt getriggerd wanneer de waarde via js/jquery wordt aangepast?
Ik kan even niet volgen waarom je dat wilt, het enige wat je in de eventListener hebt staan is een call naar berekentotaal().
Dus waarom niet dit:
Johnny Cash op 02/05/2015 13:28:52:
Het klopt dat de change event niet wordt getriggerd, en dat is juist iets wat ik wel wil.
Is er niet een oplossing waarbij een change event wordt getriggerd wanneer de waarde via js/jquery wordt aangepast?
Is er niet een oplossing waarbij een change event wordt getriggerd wanneer de waarde via js/jquery wordt aangepast?
Zelf de trekker overhalen.
Wordt dan dit stukje code:
Code (php)
1
2
3
4
5
6
7
8
9
2
3
4
5
6
7
8
9
function berekentotaal()
{
$.post("/berekentotaal.php", $('#processform ').serialize(), function(html)
{
$('#showtotaal').html(html);
});
}
berekentotaal();
$('#processform select.selectcard, input[type="checkbox"].agree, input[name='eventdate']').change(function(){berekentotaal();});
{
$.post("/berekentotaal.php", $('#processform ').serialize(), function(html)
{
$('#showtotaal').html(html);
});
}
berekentotaal();
$('#processform select.selectcard, input[type="checkbox"].agree, input[name='eventdate']').change(function(){berekentotaal();});
Het volgende stukje code?:
Code (php)
1
2
3
4
5
6
7
8
9
10
11
2
3
4
5
6
7
8
9
10
11
function berekentotaal()
{
$.post("/berekentotaal.php", $('#processform ').serialize(), function(html)
{
$('#showtotaal').html(html);
});
}
berekentotaal();
$('#processform select.selectcard, input[type="checkbox"].agree').change(function(){berekentotaal();});
$("input[name='eventdate']").trigger('change');
{
$.post("/berekentotaal.php", $('#processform ').serialize(), function(html)
{
$('#showtotaal').html(html);
});
}
berekentotaal();
$('#processform select.selectcard, input[type="checkbox"].agree').change(function(){berekentotaal();});
$("input[name='eventdate']").trigger('change');
Dit werkt uiteraard nog niet, maar ik heb nu echt geen idee wat ik aan de nieuwe regel moet toevoegen zodat de variabele wordt meegestuurd in de berekentotaal() functie...
Dit function(){berekentotaal();} moet ik toch ook toevoegen in de nieuwe regel?
Toevoeging op 02/05/2015 19:58:28:
Ik maak een bedrag van 25 EUR over voor de geen die de verlossende oplossing heeft voor mijn laatste post...
Ik ben al 3 dagen zoet met dit stukje en kom er echt niet meer uit.