full calendar ajax looping when submitting form

Question

I am trying to convert full calendar to use a form. Everything is working except when you submit an event, then try to submit another event. It seems to be getting stuck in a loop and applying the event value to the previous eventid, and the new eventid.

Here are some screenshots showing what is happening. On first date select I get my form popup fill in values and click Save I get my alert(data) message. The data is saved and inserted on the 24th.

Now clicking on the 25th to add another event, form pops up This is what it looks like you can see my first event on the 24th and the new create event is for the 25th.

I fill in the values click save I get my alert(data) message and after clicking ok, it inserts into the previous event being the 24th, and then shows another alert(data)

Closing the second alert(data) then inserts into the 25th like it should.

Then if I refresh the page they are both returned for the 25th so it inserted them both as the 25th

Here is the section of code I am using for the insert. If you are familiar with full calendar you will probably know what this is. To me it seems like the select function is holding each click. For instance if I click on the 10th then cancel, and then click on the 15th it will still be inserted into the 10th.

   select: function(start, end, allDay) { 
   calendar.fullCalendar('unselect'); 
    var startDate = $.fullCalendar.formatDate(start, "yyyy-MM-dd HH:mm:ss");
    var endDate = $.fullCalendar.formatDate(end, "yyyy-MM-dd HH:mm:ss");
    $('#start').val(startDate);
    $('#end').val(endDate);
    $('#createEventModal').fadeIn(500);
    //Prevent default form action
    $('#createEventForm').on('submit', function(e){
        return false;
    });
    //Cancel Click close form
    $(document).on('click', '.close, .btnCancel', function(){   
      $('#createEventModal').hide('fast');
      document.getElementById("createEventForm").reset();
      calendar.fullCalendar('unselect');
    });
    //Submit event form click
    $('#submitButton').on('click', function(e){
      // We don't want this to act as a link so cancel the link action
      e.preventDefault();
      doSubmit();
    });
      function doSubmit(){
      var title = $('#createEventForm #title').val();
      if (title) {
       var data = $('#createEventForm').serialize();
       alert(data);
            $('#createEventModal').hide('fast');       
       $.ajax({
        url: wnm_custom.plugin_url+'/add_events.php',
       data: data,
       type: "POST",
         success: function(json) {
            document.getElementById("createEventForm").reset();
            $('div#myDialogSuccess').fadeIn(500);
            $('div#myDialogSuccess').fadeOut(2000);
         }
         });
         calendar.fullCalendar('renderEvent',
         {
         title: title,
         start: start,
         end: end,
         allDay: allDay
         },
         true // make the event "stick"
         );
         }
         calendar.fullCalendar('unselect');
         };
},

Here is my form

<form id="createEventForm" class="form-horizontal">
    <div class="control-group">
        <label class="control-label" for="inputEvent">Event:</label>
        <div class="controls">
            <input type="text" name="title" id="title" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Value 1&quot;,&quot;Value 2&quot;,&quot;Value 3&quot;]">
        </div>
    </div>
    <div class="control-group">    
        <label class="control-label" for="inputUrl">URL:</label>
        <div class="controls">
            <input type="text" name="url" id="url" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Value 1&quot;,&quot;Value 2&quot;,&quot;Value 3&quot;]">
        </div>
    </div>
     <div class="control-group">    
        <label class="control-label" for="inputUrl">Start:</label>
        <div class="controls">
            <input type="text" name="start" id="start" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Value 1&quot;,&quot;Value 2&quot;,&quot;Value 3&quot;]">
        </div>
    </div>
    <div class="control-group">    
        <label class="control-label" for="inputUrl">End:</label>
        <div class="controls">
            <input type="text" name="end" id="end" tyle="margin: 0 auto;" data-provide="typeahead" data-items="4" data-source="[&quot;Value 1&quot;,&quot;Value 2&quot;,&quot;Value 3&quot;]">
        </div>
    </div>
        <div class="control-group">
            <label class="control-label" for="when">Check for email alerts:</label>
            <div class="controls">
            <input type="checkbox" name="emailalerts" class="emailalerts" id="emailalerts"/>
            </div>
        </div>
        <div class="modal-footer">
            <button class="btnCancel" data-dismiss="modal" aria-hidden="true">Cancel</button>
            <button type="submit" id="submitButton" class="btn btn-primary" >Save</button>
        </div>        
    </form>

Answer 1

Two time ajax calling due to not unbind below event. Every selection in calendar will create new event. First time it will fine it create only one action, second selection time it create other event 1 + 1 = 2, third selection will make three ajax call 2 + 1 = 3 it will go on.

$('#submitButton').on('click', function(e){
  // We don't want this to act as a link so cancel the link action
  e.preventDefault();
  doSubmit();
});

try this, Always you need to off before you on that event

$('#submitButton').off('click')
$('#submitButton').on('click', function(e){
  // We don't want this to act as a link so cancel the link action
  e.preventDefault();
  doSubmit();
});