Selected Datepickter datum doorsturen

Ik zou geen hidden veld aanmaken omdat je hier het berekenen van extra toeslag niet van af wilt laten hangen. Stel dat ik via een browsertool dat hidden veld er weer uitfiets, dan zou dat niet tot gevolg moeten hebben dat de toeslag niet berekend wordt.

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

Bedankt Thomas van den Heuvel,

Het is mij alleen nog niet helemaal duidelijk hoe ik dat met een correcte code kan bewerkstelligen...

Ik heb het volgende staan, wat werkt:

onSelect: function(dateText, inst) { 
   $("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:

function berekentotaal()
{
  $.post("/berekentotaal.php", $('#processform').serialize(), function(html)
  {
    $('#showtotaal').html(html);
  }); 
}
berekentotaal();
$('#processform  input[type="hidden"].selecteddate').change(function(){berekentotaal();});

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?

Waarom de waarde niet goed wordt doorgestuurd vanuit de OnSelect van Datepicker is voor mij dus een raadsel.

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:

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>";

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.

onSelect: function(dateText, inst) { 
   $("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:

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:

if($_POST["eventdate"]=="2015-05-03")
{
  // 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.

Ugh, waarom echo'd iedereen statische HTML :p.

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.

In het stukje javascript van de Datepicker staat verder geen fouten. Of ik moet er na 100 keer lezen overheen kijken...
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.

[size=xsmall]Toevoeging op 01/05/2015 15:58:02:[/size]

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...

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.

Mijn kennis in javascript is niet optimaal, daarom kom ik er waarschijnlijk ook niet uit.

dateText wordt alleen hier gebruikt:

onSelect: function(dateText, inst) { 
   $("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:

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...

[size=xsmall]Toevoeging op 01/05/2015 16:52:57:[/size]

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

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?

Waarom zou je dit via een class willen doen? Doe dit via de name of een id.

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.

Wanneer ik op de bewust zondag 3 mei klik en vervolgens de pagina refresh komt wel de toeslag melding tevoorschijn via de waarde in "eventdate", maar ja de kunst van ajax is uiteraard dat dit gebeurd zonder refresh...

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.