Input veld met datum moet opgeslagen worden (jquery?)

Door Brecht S op 27-05-2015 11:33 gewijzigd op 27-05-2015 13:33

6.877 views

Ik heb een datum input veld waarin ik een datum kan kiezen ;-)
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.


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


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

Johan K

27-05-2015 12:59 gewijzigd op 27-05-2015 13:01

Mijn jQuery is een beetje roestig maar ik geloof dat:

$(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:


$("#zoekdatum").change(function(){
   $.session.set("datumtest2", $(this).attr('value'));
   alert ($.session.get("datumtest2"));    
});

Brecht S

27-05-2015 13:21

Ik krijg geen alert meer te zien nu.
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.

Onbekende gebruiker

27-05-2015 13:32 gewijzigd op 27-05-2015 14:57

Wat je wilt hebben is dat de waarde van input#zoekdatum direct wordt opgeslagen bij wijzigen.
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.

Brecht S

27-05-2015 13:34 gewijzigd op 27-05-2015 13:35

Kan je hier iets duidelijker zijn An tje?
Of een voorbeeld posten hoe je dit zou aanpakken?

Onbekende gebruiker

27-05-2015 13:35

Sorry, was net aan het editen :) Heb een linkje erbij gedaan.

Brecht S

27-05-2015 13:36

Ik zie het hier niet. Er is een ander veld in je voorbeeld die geupdate is (txthint) en niet hetzelfde veld.

Onbekende gebruiker

27-05-2015 13:40

Nee dat kan kloppen, het is ook niet mijn voorbeeld maar gewoon een willekeurig voorbeeld van hoe je een XHR-object kan gebruiken. Het is dan aan jouw fantasie om de code uit het voorbeeld te volgen en aan te passen zodat het uiteindelijke resultaat past bij je vraag.
Als je verwacht dat ik de code die je wilt hebben pro deo ga uittypen, dan zit je er naast.

Johan K

27-05-2015 14:28

@An tje, dit is het javascript sectie en heeft zoals ik kan zien niets met PHP sessies te maken.
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.

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

Brecht S

27-05-2015 14:35 gewijzigd op 27-05-2015 14:39

@Johan K: ik weet niet waarom je de oplossing met de value van het input field met id zoekdatum doet? Het gaat niet over de tijd van vandaag maar over de eerder geselecteerde zoekdatum.
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.

Johan K

27-05-2015 15:23 gewijzigd op 27-05-2015 16:08

De alert komt als de waarde in de input field veranderd, niet eerder.
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.


<?php # query.php, hier maak je verbinding met de database en print je uit wat je wil laten zien.
  echo "<pre>";
  print_r($_POST);
  echo "</pre>";
?>

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

Reageren

Inloggen om te reageren