request post

$('form').submit((e) => {
    let jsonObj = [];
    let jsonChap = {};
    let iddates = [];

    e.preventDefault();

    //get howmany .chapters
    let howmanyDays = $('.chapters').length;
    //get id (which is a date) of each chapter then pass it to our array
    for (i=0; i<howmanyDays; i++){
        iddates.push($('.chapters').eq(i).attr('id'));
    }
    iddates.sort();
    $('#story_date').val(iddates[0]);
     console.log(iddates.length);

    for (i=0; i<iddates.length; i++){

            // It is also possible to iterate through all elements within a specific context, no mattter how deeply nested they are:
            // The second parameter $('#mydiv') which is passed to the jQuery '.subevent' Selector is the context. In this case the each() clause will iterate through all input elements within the '#'+iddates[i] container, even if they are not direct children of #mydiv.
            $('.subevent', $('#'+iddates[i])).each(function(){
                jsonChap = {};
                jsonChap.date = iddates[i];
                $('input.subtitle', $(this)).each(function(){
                    // console.log($(this).val());
                    jsonChap.title = $(this).val();
                });
                $('.subdescription', $(this)).each(function(){
                    // console.log($(this).val());
                    jsonChap.description = $(this).val();
                })
                jsonObj.push(jsonChap);
            });

    }
    console.log(JSON.stringify(jsonObj));
    $('#chapters_jsonfield').val(JSON.stringify(jsonObj));

    let data = $('form').serialize();
    $.post('/api/story/', data).success((response) => {
        // Andito yun response ng DRF
        console.log(response.content);
        // Baguhin mo na lang kung ano kailangang palitan sa page
        $('form').html('<p>Success</p>');
  });

});