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.
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.
Share Improve this question edited Oct 9, 2013 at 7:18 Arun Killu 14.3k5 gold badges37 silver badges65 bronze badges asked Oct 9, 2013 at 6:58 Venkata KrishnaVenkata Krishna 4,3156 gold badges32 silver badges54 bronze badges 3- 1 have you prevent default default form submit action – Arun Killu Commented Oct 9, 2013 at 7:00
- no i didnt done. I am trying now with that – Venkata Krishna Commented Oct 9, 2013 at 7:13
- no no it is not even submitting second time – Venkata Krishna Commented Oct 9, 2013 at 7:16
2 Answers
Reset to default 2$('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();
});
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.