Ajax发布到完整日历

Question

I am working on adding events to the full calendar which is intern connected to google calendar via ajax post, but the result isn't successful, though i do not get any errors, but the get call and the delete is successful(here i mean to say that the delete, deletes an event from my GCAL and the Get gets all events from my Gcal) this is my HTML and JS file

Could anyone please guide here Thanks in advance

 jQuery(document).ready(function() {

        //CalendarGoogle.init();

        $('#add_event_submit').click(function(){
            var title = $('#title').val();
            var start = $('#start').val();
            var end = $('#end').val();
            alert(title+" "+start);


            function send() {
                var data = {
                    summary: $("#title").val(),
                    start:$("#start").val(),
                    end:$("#end").val()
                }

                $('#target').html('sending..');

                $.ajax({
                    url: 'https://www.googleapis.com/calendar/v3/calendars/[e-mail]/events?access_token=xxxxxxxxxxxxx',
                    type: 'post',
                    dataType: 'json',
                    success: function (data) {
                       console.log(data);
                    },
                    data: events
                });
            }
            });

        });

<form role="form" name="add_event_form">
    <div class="form-group">
        <label>Event Name: </label>
        <input class="form-control" name="title" id="title"placeholder="Customer">
    </div>

    <div class="form-group">
        <label>Start: </label>
        <input class="form-control" type="datetime-local" name="start" id="start" placeholder="">
    </div>

    <div class="form-group">
        <label>End: </label>
        <input class="form-control" type="datetime-local" name="end" id="end" placeholder="">
    </div>


    <div class="form-group">
        <button class="btn btn-default" type="submit" id="add_event_submit">
            <i class="fa fa-floppy-o"></i>
            Add Event</button>
    </div>
</form>

</div>

Answer 1

I have tried to fix a few things:

Firstly : You don't need a function inside the event, The function is only getting registered and not getting called.

function send() {

Secondly: data: events here events is not declared

the source code after making the change is as follows:

jQuery(document).ready(function() {

    //CalendarGoogle.init();

    $('#add_event_submit').click(function(){
        var title = $('#title').val();
        var start = $('#start').val();
        var end = $('#end').val();
        console.log(title+" "+start);

        var data = {
                summary: $("#title").val(),
                start:$("#start").val(),
                end:$("#end").val()
            }
          console.log(data);

            $.ajax({
                url: 'https://www.googleapis.com/calendar/v3/calendars/[e-mail]/events?access_token=xxxxxxxxxxxxx',
                type: 'post',
                dataType: 'json',
                success: function (data) {
                   console.log("success");
                   console.log(data);
                },
                data: data
            }).always(function()
                   {
              console.log("done");
            });

        });

    });

Codepen for reference: https://codepen.io/YasirKamdar/pen/BYdMJE