I am trying to submit a form with text fields and image using AJAX CodeIgniter.
First I am trying to upload the image using AJAX
HTML
<form id="frm_add_school" role="form" class="form-validation" method="post" enctype="multipart/form-data">
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">School Name</label>
<label style="color:red;" id="scl_name_error"></label>
<div class="append-icon">
<input type="text" id="scl_name" name="scl_name" class="form-control" minlength="3" placeholder="Minimum 3 characters..." required>
<i class="icon-user"></i>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">Email Address</label>
<label style="color:red;" id="scl_email_error"></label>
<div class="append-icon">
<input type="email" id="scl_email" name="scl_email" class="form-control" placeholder="Enter your email..." required>
<i class="icon-envelope"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">Phone Number</label>
<label style="color:red;" id="scl_Phonenumber_error"></label>
<div class="append-icon">
<input type="text" id="scl_Phonenumber" name="scl_Phonenumber" class="form-control" minlength="3" placeholder="Minimum 3 characters..." required>
<i class="icon-user"></i>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">Address</label>
<label style="color:red;" id="scl_Address_error"></label>
<div class="append-icon">
<input type="text" id="scl_Address" name="scl_Address" class="form-control" placeholder="Enter your address..." required>
<i class="icon-envelope"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">Password</label>
<label style="color:red;" id="scl_password_error"></label>
<div class="append-icon">
<input type="password" id="scl_password" name="scl_password" class="form-control" placeholder="Between 4 and 16 characters" minlength="4" maxlength="16" required>
<i class="icon-lock"></i>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">Repeat your password</label>
<label style="color:red;" id="scl_password2_error"></label>
<div class="append-icon">
<input type="password" id="scl_password2" name="scl_password2" class="form-control" placeholder="Must be equal to your first password..." minlength="4" maxlength="16" required>
<i class="icon-lock"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">Time of Lunch</label>
<label style="color:red;" id="scl_TimeofLunch_error"></label>
<div class="append-icon">
<input type="text" id="scl_TimeofLunch" name="scl_TimeofLunch" class="form-control" minlength="3" placeholder="Minimum 3 characters..." required>
<i class="icon-user"></i>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">Total Number Of Student</label>
<label style="color:red;" id="scl_TotalNumberOfStudent_error"></label>
<div class="append-icon">
<input type="text" id="scl_TotalNumberOfStudent" name="scl_TotalNumberOfStudent" class="form-control" placeholder="Enter a number..." required>
<i class="icon-envelope"></i>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">School Picture</label>
<div class="file">
<div class="option-group">
<span class="file-button btn-primary">Choose File</span>
<input type="file" class="custom-file" name="avatar" id="avatar" onchange="document.getElementById('uploader').value = this.value;" required>
<input type="text" class="form-control" name="uploader" id="uploader" placeholder="no file selected" readonly="">
</div>
</div>
</div>
</div>
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">Admin Name</label>
<label style="color:red;" id="scl_admin_name_error"></label>
<div class="option-group">
<select id="scl_admin_name" name="scl_admin_name" class="language" required>
<option value="">Select Admin...</option>
<option value="EN">1</option>
<option value="FR">2</option>
<option value="SP">3</option>
<option value="CH">4</option>
<option value="JP">5</option>
</select>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-6">
<div class="form-group">
<label class="control-label">Are you OK with our terms?</label>
<label style="color:red;" id="scl_terms_error"></label>
<div class="option-group">
<label for="terms" class="m-t-10">
<input type="checkbox" name="terms" id="terms" data-checkbox="icheckbox_square-blue" required/>
I agree with terms and conditions
</label>
</div>
</div>
</div>
</div>
<div class="text-center m-t-20">
<button type="submit" id="submit_school" class="btn btn-embossed btn-primary">Sign Up</button>
<button type="reset" class="cancel btn btn-embossed btn-default m-b-10 m-r-0">Cancel</button>
</div>
</form>
Ajax Code
<script type="text/javascript">
$(document).ready (function(){
$("#frm_add_school").submit ( function(e){
e.preventDefault();
var school_name = $('form #scl_name').val();
var email = $('form #scl_email').val();
var phone = $('form #scl_Phonenumber').val();
var address = $('form #scl_Address').val();
var password = $('form #scl_password').val();
var password2 = $('form #scl_password2').val();
var lunch_time = $('form #scl_TimeofLunch').val();
var no_of_students = $('form #scl_TotalNumberOfStudent').val();
var avatar = $('form #avatar').val();
var scl_admin_name = $('form #scl_admin_name').val();
if(school_name == "" || school_name.length < 3){
$('#scl_name_error').html("</b>Please enter a valid School name.</b>");
}else if(!isValidEmailAddress( email )){
$('#scl_email_error').html("</b>Please enter a valid email.</b>");
}else if(phone == "" || phone.length < 3 ){
$('#scl_Phonenumber_error').html("</b>Please enter a valid phone number.</b>");
}else if(password = "" || password !== password2){
$('#scl_password2_error').html("</b>password combination does not match.</b>");
$('#scl_password_error').html("</b>password combination does not match.</b>");
}else if(lunch_time == "" || lunch_time.length < 3 ){
$('#scl_TimeofLunch_error').html("</b>Please enter a valid lunch time.</b>");
}else if(scl_admin_name==0){
$('#scl_admin_error').html("</b>Please Select a admin.</b>");
}else{
var formData = $('#frm_add_school').serialize();
console.log(formData);
$.ajax({
type:"POST",
dataType: 'json',
url:"<?php echo base_url('administrator/add_school/'); ?>",
data: formData,
success: function(stream) {
console.log(stream.total);
}
});
}
});
});
function isValidEmailAddress(emailAddress) {
var pattern = new RegExp(/^((([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+(\.([a-z]|\d|[!#\$%&'\*\+\-\/=\?\^_`{\|}~]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])+)*)|((\x22)((((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(([\x01-\x08\x0b\x0c\x0e-\x1f\x7f]|\x21|[\x23-\x5b]|[\x5d-\x7e]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(\\([\x01-\x09\x0b\x0c\x0d-\x7f]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF]))))*(((\x20|\x09)*(\x0d\x0a))?(\x20|\x09)+)?(\x22)))@((([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|\d|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.)+(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])|(([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])([a-z]|\d|-|\.|_|~|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])*([a-z]|[\u00A0-\uD7FF\uF900-\uFDCF\uFDF0-\uFFEF])))\.?$/i);
return pattern.test(emailAddress);
};
</script>
Controller
function add_school(){
$post_data['school_name'] = $this->input->post('scl_name');
$post_data['email'] = $this->input->post('scl_email');
$post_data['phone'] = $this->input->post('scl_Phonenumber');
$post_data['address'] = $this->input->post('scl_Address');
$post_data['password'] = md5($this->input->post('scl_password'));
$post_data['lunch_tim'] = $this->input->post('scl_TimeofLunch');
$post_data['nof_students'] = $this->input->post('scl_TotalNumberOfStudent');
$post_data['admin_name'] = $this->input->post('scl_admin_name');
if($post_data['school_name']){
if($_FILES["avatar"]){
$config = array();
$config['upload_path'] = './school_image/';
$config['allowed_types'] = 'gif|jpg|jpeg|png';
$config['max_size'] = '10000';
$config['file_name'] = 'lankahomes_21';
$config['overwrite'] = false;
$this->upload->initialize($config);
$this->upload->do_upload('avatar');
$image_data = array('upload_data' => $this->upload->data());
}
}else {
$this->load->view('add_school');
}
}
Can someone help me to upload the images with from using AJAX in CodeIgniter. Tnx..
