I am using the boxy jQuery plugin in my page to display a form on a clickEvent for the fullCalendar plugin.
It is working all right , the only problem I have is that the form in boxy brings up the confirmation dialog the first time the dialog is opened and when the user clicks "Ok" it submits the form a second time which generates 2 events on my calendar and 2 entries in my database.
My code looks like this inside fullCalendar:
dayClick: function(date, allDay, jsEvent, view) {
var day=""+date.getDate();
if(day.length==1){
day="0"+day;
}
var year=date.getFullYear();
var month=date.getMonth()+1;
var month=""+month;
if(month.length==1){
month="0"+month;
}
var defaultdate=""+year+"-"+month+"-"+day+" 00:00:00";
var ele = document.getElementById("myform");
new Boxy(ele,{title: "Add Task", modal: true});
document.getElementById("title").value="";
document.getElementById("
description").value="";
document.getElementById("startdate").value=""+defaultdate;
document.getElementById("enddate").value=""+defaultdate;
}
I also use validators on the forms fields:
$.validator.addMethod(
"datetime",
function(value, element) {
// put your own logic here, this is just a (crappy) example
return value.match(/^([0-9]{4})-([0-1][0-9])-([0-3][0-9])\s([0-1][0-9]|[2][0-3]):([0-5][0-9]):([0-5][0-9])$/);
},
"Please enter a date in the format YYYY-mm-dd hh:MM:ss"
);
var validator=$("#myform").validate({
onsubmit:true,
rules: {
title: {
required: true
},
startdate: {
required: true,
datetime: true
},
enddate: {
required: true,
datetime: true
}
},
submitHandler: function(form) {
//this function renders a new event and makes a call to a php script that inserts it into the db
addTask(form);
}
});
And the form looks like this:
<form id ='myform'>
<table border='1' width='100%'>
<tr><td align='right'>Title:</td><td align='left'><input id='title' name='title' size='30'/></td></tr>
<tr><td align='right'>Description:</td><td align='left'><textarea id='
description' name='
description' rows='4' cols='30'></textarea></td></tr>
<tr><td align='right'>Start Date:</td><td align='left'><input id='startdate' name='startdate' size='30'/></td></tr>
<tr><td align='right'>End Date:</td><td align='left'><input id='enddate' name='enddate' size='30' /></td></tr>
<tr><td colspan='2' align='right'><input type='submit' value='Add' /></td></tr>
</table>
</form>
