您好我正在尝试在bootstrap模式中提交表单。此模式将基于href单击事件打开。这个href标签将使用Jquery在ajax调用中动态生成。
格式在下面调用bootstrap模态。
'<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>'
我打电话的模式如下所示。
<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>
现在基于点击调用模态我正在使用下面的javascript代码，并且在此代码中我只通过使用Jquery设置文本框中的文本框值将数据传递给模态。
$(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调用函数低于一。
$(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");
}
});
});
});
现在我的模态加载正常，一旦加载了模式，点击href标签后，值就会显示在指定的文本框中。但点击提交后，它重定向到相同的php网址，所有参数都添加为查询参数，奇怪的是，如果我第二次打开模态并尝试提交ajax调用正在工作。
答案 0 :(得分：2)
$('input#submit').click(function(e) {
e.preventDefault();//
.....rest of the code here
});
如果表单元素是动态加载的，请尝试委派点击
$(document).on("click", "#submit", function (e) {
e.preventDefault();
});
答案 1 :(得分：0)
尝试使用以下测试和工作代码进行AJAX调用
// 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);
}
});
您需要为此加载jQuery。