我有一个表单,我想上传图片和视频,并且必须填写一些信息。在完成表单之前,提交按钮被禁用,在完成视频和图像上传并且所有字段都已填写后,必须启用它。
$("#uploadify").uploadify({
height : 30,
swf : urljs+'/public/js/uploadify.swf',
uploader : urljs+'/public/js/uploadify.php',
folder : "../../../uploads",
width : 120,
fileSizeLimit : '200000KB',
fileTypeDesc : 'Video Files',
fileTypeExts : '*.*;',
formData : {
folder : '../../private/<?php echo $userId;?>'
},
onUploadSuccess : function(file, data, response) {
$("[name=coursebanner]").val(file.name);
$("[name=banner]").attr("src",'<?php echo base_url();?>private/<?php echo $userId;?>/'+file.name);
}
});
$(".filedtls").hide();
$("#contentupload").uploadify({
height : 30,
swf : urljs+'/public/js/uploadify.swf',
uploader : urljs+'/public/js/uploadify.php',
folder : "../../../uploads",
width : 120,
fileSizeLimit : '40MB',
fileTypeDesc : 'Video Files',
fileTypeExts : '*.*;',
formData : {
folder : '../../private/<?php echo $userId;?>/beforeconvert',
folder1 : '../../private/<?php echo $userId;?>',
userId : <?php echo $userId?>
},
'onComplete': function(event, queueID, fileObj, response, data) {
console.log(response);
},
'onUploadSuccess' : function(file, data, response) {
$("[name=promovideoname]").val(file.name);
}
});
$('#createcoursebasicform > input').keyup(function() {
var empty = false;
$('#createcoursebasicform > input').each(function() {
if ($(this).val() == '') {
empty = true;
}
});
if (empty) {
$('#save').attr('disabled', 'disabled');
} else {
$('#save').removeAttr('disabled');
}
});
和
<div class="col-md-9">
<form id="createcoursebasicform">
<input type="hidden" name="courseId" value="<?php echo $courseId;?>"/>
<div class="create-course-content">
<!-- COURSE BANNER -->
<div class="course-banner create-item">
<div class="row">
<div class="col-md-3">
<h4>Course Banner</h4>
</div>
<div class="col-md-9">
<div class="image-info">
<img name="banner" src="<?php echo base_url();?>public/images/placeholder.jpg" alt="">
</div>
<input type="hidden" name="coursebanner"/>
<div class="upload-recrop">
<div class="upload-image up-file" id="uploader">
<a href="#"><i class="icon md-upload"></i><div id="uploadify"></div></a>
</div>
</div>
</div>
</div>
</div>
<!-- END / COURSE BANNER -->
<!-- PROMO VIDEO -->
<div class="promo-video create-item">
<div class="row">
<div class="col-md-3">
<h4>Promo Video</h4>
</div>
<div class="col-md-9">
<div class="form-item">
<input type="text" placeholder="Paste URL">
</div>
<div class="upload-video up-file">
or
<a href="#"><i class="icon md-upload"></i><div id="contentupload"></div></a>
<input type="hidden" name="promovideoname">
</div>
</div>
</div>
</div>
<div class="duration create-item">
<div class="row">
<div class="col-md-3">
<h4>Duration</h4>
</div>
<div class="col-md-9">
<div class="duration-ct">
<div class="form-item">
<input type="text" name="duration">
</div>
<span class="day">days</span>
</div>
</div>
</div>
</div>
<div class="form-action">
<input id="save" type="submit" value="Save and Next" class="submit mc-btn-3 btn-style-1" disabled="disabled">
</div>
</form>
</div>
答案 0 :(得分:1)
我总是使用JavaScript来禁用和启用提交按钮。
<强> HTML 强>
<input type="submit" id="switch" value="xxxx" disabled="disabled" />
您可能希望在上传完成后传递标记。说Finish
,并将其放在Json中,然后您可以使用AJAX从服务器获取Finish
。
的JavaScript
$.ajax({
url: "test.php",
dataType: "json",
success: function(data){
data.Finish ? $switch.attr('disabled', true) : $switch.removeAttr('disabled');
}
});
答案 1 :(得分:0)
您可以使用带有Ajax调用的jQuery来提交和使用:
beforeSend
禁用提交按钮!
答案 2 :(得分:0)
当您从用户处获取$ _post或$ _get请求时,请使用html代码以下禁用按钮
<input type="Submit" value="Upload" <?php echo $disable; ?> />
$ if($ _ post)或get语句的禁用值是NUll或''。如果条件使用$ disable ='disabled';
上传所有文件和数据,当你达到EOF时,$ disable = Null。