We are using dashboard for admin purpose in which we are calling different forms on content pane through ajax call, where calling simple registration form and submitting it works but when i call form with file upload in it, it didn't work for me.!
Form gets submitted but file upload says undefined index of file name.!
here is my dashboard code
in my sidebar menu this is the code where i call the other divs
<ul class="sidebar-menu">
<li class="header">Company</li>
<li><a href="javascript:docupld()"><i class="fa fa-upload"></i> <span>Upload Documents</span></a></li>
<li><a href="javascript:docview()"><i class="fa fa-download"></i> <span>View Documents</span></a></li>
<li><a href="javascript:reports()"><i class="fa fa-bar-chart"></i> <span>Generate Reports</span></a></li>
<li><a href="javascript:compview()"><i class="fa fa-list"></i> <span>View Company</span></a></li>
<li class="treeview">
<a href="#"><i class="fa fa-user-plus"></i> <span>Register Company</span> <i class="fa fa-angle-left pull-right"></i></a>
<ul class="treeview-menu">
<li><a href="javascript:pcompreg()" ><i class="fa fa-male"></i> <span>Register Parent Company</span></a></li>
<li><a href="javascript:ccompreg()" ><i class="fa fa-child"></i> <span>Register Child Company</span></a></li>
</ul>
</li>
</ul><!-- /.sidebar-menu -->
Content pane where code gets merged (ajax call)
<section id="div1" class="content">
<div id="loading-image" class="overlay">
<i class="fa fa-refresh fa-spin"></i>
</div>
</section>
Javascript for ajax call
<script language="javascript" type="text/javascript">
$(window).load(function() {
$('#loading-image').hide();
});
function docupld(){
$("#loading-image").show();
$("#div1").load("docupld.php");
}
function docview(){
$("#loading-image").show();
$("#div1").load("docview.php");
}
function reports(){
$("#loading-image").show();
$("#div1").load("reports.php");
}
function pcompreg(){
$("#loading-image").show();
$("#div1").load("pcompreg.php");
}
function ccompreg(){
$("#loading-image").show();
$("#div1").load("ccompreg.php");
}
function compview(){
$("#loading-image").show();
$("#div1").load("compview.php");
} function load_home(){
$("#loading-image").show();
$("#div1").load("cmpreg1.php");
}
</script>
this is the div i call
<div class="box box-default">
<div class="box-header with-border">
<h3 class="box-title">Upload Document</h3>
<div class="box-tools pull-right">
<button class="btn btn-box-tool" data-widget="collapse"><i class="fa fa-minus"></i></button>
<button class="btn btn-box-tool" data-widget="remove"><i class="fa fa-remove"></i></button>
</div>
</div><!-- /.box-header -->
<div class="box-body">
<div class="row">
<div class="col-md-12">
<div class="wizard">
<div class="wizard-inner">
<div class="connecting-line"></div>
<ul class="nav nav-tabs" role="tablist">
<li role="presentation" class="active">
<a href="#step1" data-toggle="tab" aria-controls="step1" role="tab" title="Step 1">
<span class="round-tab">
<i class="glyphicon glyphicon-globe"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step2" data-toggle="tab" aria-controls="step2" role="tab" title="Step 2">
<span class="round-tab">
<i class="glyphicon glyphicon-calendar"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#step3" data-toggle="tab" aria-controls="step3" role="tab" title="Step 3">
<span class="round-tab">
<i class="glyphicon glyphicon-file"></i>
</span>
</a>
</li>
<li role="presentation" class="disabled">
<a href="#complete" data-toggle="tab" aria-controls="complete" role="tab" title="Complete">
<span class="round-tab">
<i class="glyphicon glyphicon-ok"></i>
</span>
</a>
</li>
</ul>
</div>
<form role="form" id="fupload" method="POST" enctype="multipart/form-data"">
<div class="tab-content">
<div class="tab-pane active" role="tabpanel" id="step1">
<ul class="list-inline">
<div class="col-md-6">
<div class="form-group">
<label>Select Parent Pan Number</label>
<select class="form-control select2" name="panno" style="width: 100%;">
<option selected="selected" >AABPS8791R</option>
<option>CCBPS8551R</option>
<option>CCBSD8771R</option>
<option>CCBPS8591R</option>
<option>CHHPS8791R</option>
<option>CDFPS8651R</option>
<option>CCBPS8771R</option>
</select>
</div><!-- /.form-group -->
</div>
<div class="col-md-6">
<div class="form-group">
<label>Select Tan Number</label>
<select class="form-control select2" name="tanno" style="width: 100%;">
<option selected="selected">AABPS8791R</option>
<option>CCBPS8551R</option>
<option>CCBSD8771R</option>
<option>CCBPS8591R</option>
<option>CHHPS8791R</option>
<option>CDFPS8651R</option>
<option>CCBPS8771R</option>
</select>
</div><!-- /.form-group -->
</div>
<div class="col-md-6">
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</div>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step2">
<ul class="list-inline">
<div class="col-md-3">
<div class="form-group">
<label>Select Financial year</label>
<select class="form-control select2" name="year" style="width: 100%;">
<option selected="selected">2015</option>
<option>2016</option>
<option>2017</option>
<option>2018</option>
<option>2019</option>
<option>2020</option>
<option>2021</option>
</select>
</div><!-- /.form-group -->
</div>
<div class="col-md-3">
<div class="form-group">
<label>Select Quarter</label>
<select class="form-control select2" name="quarter" style="width: 100%;">
<option selected="selected">Q1(Apr, May, Jun) </option>
<option>Q2 (July, Aug, Sept) </option>
<option>Q3 (Oct, Nov, Dec) </option>
<option>Q4 (Jan, Feb, Mar) </option>
</select>
</div><!-- /.form-group -->
</div>
<div class="col-md-6">
<div class="form-group">
<label>Select Form Type</label>
<select class="form-control select2" name="formtype" style="width: 100%;">
<option selected="selected">Form 24Q</option>
<option>Form 26Q</option>
<option>Form 27Q</option>
</select>
</div><!-- /.form-group -->
</div>
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="step3">
<ul class="list-inline">
<div class="col-md-3">
<div class="form-group">
<label>Select File Type</label>
<select class="form-control select2" name="ftype" style="width: 100%;">
<option selected="selected">Acknowledgement receipt(s) from bank</option>
<option>Acknowledgement receipt(s) from Income tax department</option>
<option>FORM16 A</option>
<option>Software Generated Files </option>
</select>
</div><!-- /.form-group -->
</div>
<li><button type="button" class="btn btn-default prev-step">Previous</button></li>
<li><button type="button" class="btn btn-primary next-step">Save and continue</button></li>
</ul>
</div>
<div class="tab-pane" role="tabpanel" id="complete">
<ul class="list-inline">
<div class="col-md-6">
<div class="form-group">
<label>Select File</label>
<input type="file" name="ufile"></input>
</div><!-- /.form-group -->
</div>
<div class="col-md-6">
<div class="form-group">
<label>Enter Details</label>
<input type="text" name="fnote" ></input>
</div><!-- /.form-group -->
</div>
<div class="col-md-6">
<button type="submit" name= "submit" class="btn btn-primary">Submit</button>
</div>
</ul>
</div>
<div class="clearfix"></div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
//Initialize tooltips
$('.nav-tabs > li a[title]').tooltip();
//Wizard
$('a[data-toggle="tab"]').on('show.bs.tab', function (e) {
var $target = $(e.target);
if ($target.parent().hasClass('disabled')) {
return false;
}
});
$(".next-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
$active.next().removeClass('disabled');
nextTab($active);
});
$(".prev-step").click(function (e) {
var $active = $('.wizard .nav-tabs li.active');
prevTab($active);
});
});
function nextTab(elem) {
$(elem).next().find('a[data-toggle="tab"]').click();
}
function prevTab(elem) {
$(elem).prev().find('a[data-toggle="tab"]').click();
}
</script>
<script src="plugins/select2/select2.full.min.js"></script>
<script>
$(".select2").select2();
$("#fupload").submit(function(e) {
var url = "processdocupld.php"; // the script where you handle the form input.
$.ajax({
type: "POST",
url: url,
data: $("#fupload").serialize(), // serializes the form's elements.
success: function(data)
{
alert(data);
}
});
e.preventDefault(); // avoid to execute the actual submit of the form.
});
</script>
