If have a page with 2 forms. One which i can create an database entry with and the other form has as a select field with those database values. Now when i create an event the ajax post that it makes to my php script is succesfull and entry is added to the db. I also refresh the select list so the added item is in there directly. When i then select an event and do a second ajaxt request it does not execute. While when i refresh the page with f5 it than works. I can't seem to find why it is not working i am not a pro so therefore i ask if someone can tell me what i am doing wrong.
this is my jquery code
$(document).ready(function(){
$("#cevent").submit(function(event) {
var request;
event.preventDefault();
var values = $(this).serialize();
request = $.ajax({
url: "process.php?a=cevent",
type: "post",
data: values,
cache: false,
async: true
});
request.done(function (response, textStatus, jqXHR){
// show succes message
$("#result").html('event succesvol aangemaakt');
$("#selectevent").load(location.href+" #selectevent>*","");
$("#createevent").load(location.href+" #createevent>*","");
});
request.fail(function (){
// Show error
$("#result").html('There is error while submit');
});
});
$("#gevents").submit(function(event){
alert("button is pressed");
var getrequest;
event.preventDefault();
var gvalues = $(this).serialize();
getrequest = $.ajax({
url: "process.php?a=gevent",
type: "post",
data: gvalues,
cache: false
});
getrequest.done(function (response, textStatus, jqXHR){
$("#stock").html(response);
});
getrequest.fail(function (){
// Show error
$("#stock").html('There is error while submit');
});
});
});
and this is the html with the forms
<h2>Select Event :</h2>
<div id="selectevent">
<form id="gevents">
<select name="event" id="events">
<?php
$current_date = date('y-m-d');
$getevents = DB::getInstance()->get('events', array(
'event_date',
'=',
$current_date
));
foreach($getevents->results() as $e){
?>
<option name="eventid" value="<?php echo $e->eventid;?>"><?php echo "datum: " .date("d-m-y", strtotime($e->event_date)). " event: ". $e->event_name;?></option>
<?php } ?>
</select>
<input type="submit" name="getevent" value="Ga naar voorraadlijst">
</form>
</div>
<div id="result"></div>
<div id="createevent">
<form id="cevent">
<h2> Create New Event</h2>
<input type="text" name="event_name">
<input type="hidden" name="event_date" value="<?php echo $current_date; ?>">
<input type="submit" name="submitevent" value="Create Event">
</form>
</div>
<div id="stock"></div>
</body>
</html>
as a side note when i press the button belonging to the select list. it adds some paramaters in the url in the address bar of the browser. which makes me believe it is not even calling my jquery
