Ajax call is not working?

Question

Hi i am trying to submit a form in bootstrap modal. This modal is going to open based on a href click event. This a href tag is going to b generated dynamically in ajax call using Jquery.

format of the a href tag is below to call bootstrap modal.

'<a id="addvideo" data-toggle="modal" data-title="'+field.title+'" data-id="'+field.video_id+'" data-desc="'+field.description+'" data-channelname="'+field.channel_name+'" data-yudate="'+field.created_date+'" href="#form-content">'+field.title+'</a>'

The modal which i am calling is below shown.

                <div id="form-content" class="modal hide fade in" style="display: none;">
                    <div class="modal-header">
                        <a class="close" data-dismiss="modal">×</a>
                        <h3>Add Video</h3>
                    </div>
                    <div class="modal-body">
                        <form name="addvideo" class="form-horizontal" action="#" id="addchannelvideo">
                            <div class="control-group">
                                <label class="control-label" for="videotitle">Title</label>
                                <div class="controls">
                                    <input type="text" id="videotitle" name="videotitle">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="videoid">Video ID</label>
                                <div class="controls">
                                    <input type="text" id="videoid" name="videoid">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="videodesc">Description</label>
                                <div class="controls">
                                    <textarea id="videodesc" name="videodesc"></textarea>
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="channelname">Channel</label>
                                <div class="controls">
                                    <input type="text" id="channelname" name="channelname">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="actors">Actors</label>
                                <div class="controls">
                                    <input type="text" id="actors" name="actors">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="directors">Directors</label>
                                <div class="controls">
                                    <input type="text" id="directors" name="directors">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="producers">Producers</label>
                                <div class="controls">
                                    <input type="text" id="producers" name="producers">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="musicians">Music Directors</label>
                                <div class="controls">
                                    <input type="text" id="musicians" name="musicians">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="cast">Cast</label>
                                <div class="controls">
                                    <input type="text" id="cast" name="cast">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="yudate">Youtube Uploaded Date</label>
                                <div class="controls">
                                    <input type="text" id="yudate" name="yudate">
                                </div>
                            </div>
                            <div class="control-group">
                                <label class="control-label" for="cudate">CMS Uploaded Date</label>
                                <div class="controls">
                                    <input type="text" id="cudate" name="cudate">
                                </div>
                            </div>
                            <div class="control-group">
                                <div class="controls">
                                    <label class="checkbox">
                                        <input type="checkbox" id="orderno">Priority video
                                    </label>
                                    <label class="checkbox">
                                        <input type="checkbox" id="hidevideo">Hide in Mobile App
                                    </label>
                                    <button class="btn btn-success" id="submit"><i class="icon-white icon-ok"></i> Submit</button>
                                    <button class="btn btn-inverse"><i class="icon-white icon-circle-arrow-left"></i> Cancel</button>
                                </div>
                            </div>
                         </form>
                    </div>
                </div>

Now to call modal based on click i am using below javascript code and in this code only i am passing data to modal by setting text boxes values in modal using Jquery like below.

$(document).on("click", "#addvideo", function () {
 var videoid = $(this).data('id');
 var videotitle = $(this).data('title');
 var videodesc = $(this).data('desc');
 var channelname = $(this).data('channelname');
 var yudate = $(this).data('yudate');

 $(".modal-body #videoid").val( videoid );
 $(".modal-body #videotitle").val( videotitle );
 $(".modal-body #videodesc").val( videodesc );
 $(".modal-body #channelname").val( channelname );
 $(".modal-body #yudate").val( yudate );
  });

Ajax call function is below one.

$(document).ready(function(e) { 
     $('input#submit').click(function() {
        var title = $('#videotitle').val();
        var videoid = $('#videoid').val();
        var description = $('#videodesc').val();
        var channel = $('#channelname').val();
        var actors = $('#actors').val();
        var directors = $('#directors').val();
        var producers = $('#producers').val();
        var musicians = $('#musicians').val();
        var cast = $('#cast').val();
        var yudate = $('#yudate').val();
        var orderno = 0;
        if($("#orderno").is(':checked'))
        {
            var orderno = 1;
        }
        var hidevideo = 0;
        if($("#hidevideo").is(':checked'))
        {
            var hidevideo = 1;
        }
        var postdata = "title="+title+"&videoid="+videoid+"&description="+description+"&channel="+channel+"&actors="+actors+"&directors="+directors+"&producers="+producers+"&musicians="+musicians+"&cast="+cast+"&orderno="+orderno+"&hidevideo="+hidevideo+"&yudate="+yudate;


        $.ajax({            
            type: 'POST',
            url: 'addvideo.php',
            data: "title="+title+"&videoid="+videoid+"&description="+description+"&channel="+channel+"&actors="+actors+"&directors="+directors+"&producers="+producers+"&musicians="+musicians+"&cast="+cast+"&orderno="+orderno+"&hidevideo="+hidevideo+"&yudate="+yudate,
            datatype:'json',
            success: function(response) {
                $("#form-content").modal('hide');
                alert(response);
            },error: function(){
                alert("video categorization failed");
            }
        });
    });
    });

Now my modal is loading fine and values are showing up in assigned text boxes once the modal loaded on click on href tag. But after click on submit it is redirecting to the same php url and all the parameters are adding as query parameters and weird thing is if i open modal second time and try to submit ajax call is working.

Answer 1

$('input#submit').click(function(e) {
e.preventDefault();//
.....rest of the code here 
});

if the form elements are loaded dynamically then try delegating click

$(document).on("click", "#submit", function (e) {
 e.preventDefault();
});

Answer 2

try using following tested and workinf code for AJAX call

// Get the form data. This serializes the entire form. pritty easy huh!
var form = new FormData($('#form_step4')[0]);
$.ajax({
    type: "POST",
    url: "savedata.php",
    data: form,
    cache: false,
    contentType: false,
    processData: false,
    success:  function(data){
        //alert("---"+data);
        alert("Settings has been updated successfully.");
        window.location.reload(true);
    }
});

You need to load jQuery for this.