Develop Reference

updating the options of the "admin_id" select element

In my project i want to create difference admins for colleges ,departments and laboratorys , i u used Ajax for fetching data of admin id depends on the admin type input and i also use a logic in controller as the following in my controller :
public function store(Request $request)
{
$this->validate($request, [
'name' => 'required',
'email' => 'required|',
'password' => 'required',
'roles' => 'required',
'admin_type'=>'required',
'admin_id'=>'required'
]);
$adminType = $request->input('admin_type');
$adminId = $request->input('admin_id');
$input = $request->all();
// $input['password'] = Hash::make($input['password']);
$user = User::create($input);
if ($adminType == 'colleges') {
$user->colleges()->attach($adminId);
} else if ($adminType == 'departments') {
$user->departments()->attach($adminId);
} else if ($adminType == 'laboratories') {
$user->laboratories()->attach($adminId);
}
$user->assignRole($request->input('roles'));
return redirect()->route('users.index')
->with('success','User created successfully');
}
public function getAdminId(Request $request)//for getting admin ids depends on the admin_type
{
$adminType = $request->admin_type;
$options = '';
if ($adminType == 'college') {
$colleges = College::all();
foreach ($colleges as $college) {
$options .= '<option value="'.$college->id.'" id="'.$college->id.'">'.$college->name.'</option>';
}
} elseif ($adminType == 'department') {
$departments = Department::all();
foreach ($departments as $department) {
$options .= '<option value="'.$department->id.'">'.$department->name.'</option>';
}
} elseif ($adminType == 'laboratory') {
$laboratories = Laboratory::all();
foreach ($laboratories as $laboratory) {
$options .= '<option value="'.$laboratory->id.'">'.$laboratory->name.'</option>';
}
}
return '<select name="admin_id" id="admin_id" class="form-control">'.$options.'</select>';;
}
in my route i have this for Ajax
Route::get('get/admin_id', [App\Http\Controllers\UserController::class, 'getAdminId'])->name('get.admin_id');
in my blade template
#extends('layouts.mainlayout')
#section('content')
<section class="content">
<div class="body_scroll">
<div class="block-header">
<div class="container-fluid">
<div class="row clearfix">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="card">
<div class="body">
<h2 class="card-inside-title" >User Registration</h2>
#if ($errors->any())
<div class="alert alert-danger">
<ul>
#foreach ($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
</div>
#endif
<form method="POST" action="{{ route('users.store') }}">
#csrf
<div class="form-group">
<label for="name">Name:</label>
<input type="text" class="form-control" placeholder="name" name = "name" />
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="email"name = "email">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" id="password" name="password" placeholder="Password">
</div>
<div class="form-group ">
<label for="role">Roles:</label>
<select name="roles[]" id="roles" class= "form-control show-tick ms select2" multiple data-placeholder="Select Roles">
#foreach($roles as $tag)
<option value="{{$tag}}"
>{{$tag}}</option>
#endforeach
</select>
</div>
<div class="form-group">
<label for="admin_type">Admin Type</label>
<select name="admin_type" id="admin_type" class="form-control">
<option value="college">College</option>
<option value="department">Department</option>
<option value="laboratory">Laboratory</option>
</select>
</div>
<div class="form-group">
<label for="admin_id">Admin ID</label>
<select name="admin_id" id="admin_id" class="form-control">
<option value=""> </option>
</select>
</div>
<div>
<button class="btn btn-raised btn-primary waves-effect" onclick="this.form.submit()" type="submit">SUBMIT</button>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
#endsection
#section('scripts')
<script>
$(document).ready(function(){
$('#admin_type').on('change', function(){
var adminType = $(this).val();
$.ajax({
type:'GET',
url: '{{ route('get.admin_id') }}',
data: { admin_type: adminType },
success:function(data){
console.log(data);
$('#admin_id').append(data);
}
});
});
});
</script>
#endsection
and in console l got what i want like this "habtewolddf" but in the blade page the options are not coming, I dont know why it is not working any one who can help me please please???

You are appending select with another select. Try change <select> in blade file by <div> or even better - instead of .append() use .replaceWith() :
$('#admin_type').on('change', function(){
var adminType = $(this).val();
$.ajax({
type:'GET',
url: '{{ route('get.admin_id') }}',
data: { admin_type: adminType },
success:function(data){
console.log(data);
$('#admin_id').replaceWith(data); // Here
}
});
});

JQuery Replace Function Did Not Work On Certain Select Dropdown

What I want to do is replace the id for every input. I have several inputs in my page.
This is the coding for some user input
<div class="row">
<div class="col">
<div class="form-group row">
<label class="col-md-2 col-form-label" for="daddr3_1">Address 3:</label>
<div class="col-md-9">
<input class="form-control" rows="1" maxlength="30" type="text" id="daddr3_1" name="daddr3[]" placeholder="Third line of address as in Identity Card (optional)">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col">
<?php
include_once "common.php";
$common = new Common();
$countries = $common->getCountry($connection);
?>
<div class="form-group row">
<label class="col-md-3 col-form-label" for="countryId_1">Country:</label>
<div class="col-md-5">
<select name="countryId[]" id="countryId_1" class="form-control" onchange="getStateByCountry();">
<option>Country</option>
<?php
if ($countries->num_rows > 0 ){
while ($country = $countries->fetch_object()) {
$countryName = $country->name; ?>
<option value="<?php echo $country->id; ?>"><?php echo $countryName;?></option>
<?php }
}
?>
</select>
</div>
</div>
</div>
<div class="col">
<div class="form-group row">
<label class="col-md-3 col-form-label" for="stateId_1">State:</label>
<div class="col-md-5">
<select name="stateId[]" id="stateId_1" class="form-control" onchange="getCityByState();getPostalByState()">
<option>State</option>
</select>
</div>
</div>
</div>
<div class="col">
<div class="form-group row">
<label class="col-md-3 col-form-label" for="cityDiv_1">City:</label>
<div class="col-md-5">
<select name="cityDiv[]" id="cityDiv_1" class="form-control">
<option value="">City</option>
</select>
</div>
</div>
</div>
<div class="col">
<div class="form-group row">
<label class="col-md-3 col-form-label" for="dpostal">Postal:</label>
<div class="col-md-5">
<select name="postalDiv[]" id="postalDiv_1" class="form-control">
<option>Postal</option>
</select>
</div>
</div>
</div>
</div>
I want to increase the _1 of the input if user add more than one item by duplicating the form.
This is the script to replace the _1 everytime user duplicate the form.
var attrs = ['for', 'id', 'name'];
function resetAttributeNames(section) {
var tags = section.find('input, label, select'), idx = section.index();
tags.each(function() {
var $this = $(this);
$.each(attrs, function(i, attr) {
var attr_val = $this.attr(attr);
if (attr_val) {
$this.attr(attr, attr_val.replace(/_\d+$/, '_'+(idx + 1)))
}
})
})
}
As you can see, in user input for country, state, city, and postal I used onchange function. I wonder if it ain't working because of the onchange function. Because the id can be replaced for Address 3 input. Only the list I mention above is not working.
This is the script of onchange function
<script>
function getStateByCountry() {
var countryId = $("#countryId_1").val();
$.post("ajax.php",{getStateByCountry:'getStateByCountry',countryId:countryId},function (response) {
var data = response.split('^');
$("#stateId_1").html(data[1]);
});
}
function getCityByState() {
var stateId = $("#stateId_1").val();
$.post("ajax.php",{getCityByState:'getCityByState',stateId:stateId},function (response) {
var data = response.split('^');
$("#cityDiv_1").html(data[1]);
});
}
function getPostalByState() {
var stateId = $("#stateId_1").val();
$.post("ajax.php",{getPostalByState:'getPostalByState',stateId:stateId},function (response) {
var data = response.split('^');
$("#postalDiv_1").html(data[1]);
});
}
function enable(){
var check = document.getElementById("check");
var btn = document.getElementById("btn");
if(check.checked){
btn.removeAttribute("disabled");
}
else{
btn.disabled = "true";
}
}
</script>
Any help is appreciated :)

Submit images using dropzone in laravel with other attributes of a form

I am trying to submit images from dropzone and other text field. but dropzone works separately how can i submit dropzone files with other data of form in controller. I need to submit form with files on button click in the controller method.
HTML Form
<form method="post" enctype="multipart/form-data" id="case-form" action="{{route('case-submit')}}">
#csrf
<div class="box-body form-element" >
<div class="row">
<div class="form-group clearfix">
<div class="col-sm-12">
<label for="example-text-input" class="col-sm-10">Doctor</label>
<input class="form-control" type="text" name="doctor_name" id="doctor_name" required max="50">
</div>
</div>
<div class="form-group clearfix">
<div class="col-sm-12">
<label for="example-text-input" class="col-sm-10">Upper Aligner</label>
<input class="form-control" type="number" name="upper_aligner" id="upper_aligner" required>
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group clearfix">
<div class="col-sm-12">
<label for="example-text-input" class="col-sm-10">Portal</label>
<select class="form-control col-sm-10" name="portal_id" id="portal" required>
#foreach($portal as $obj)
<option value="{{$obj->id}}">{{$obj->name}}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group clearfix">
<div class="col-sm-12">
<label for="example-text-input" class="col-sm-10">Patient</label>
<input class="form-control" type="text" name="patient_name" id="patient_name" required max="50">
</div>
</div>
<div class="form-group clearfix">
<div class="col-sm-12">
<label for="example-text-input" class="col-sm-10">Lower Aligner</label>
<input class="form-control" type="number" id="lower_aligner" name="lower_aligner" required>
</div>
</div>
</div>
<!-- /.col -->
</div>
<div class="row">
<div class="col-md-12">
<div class="col-sm-4" runat="server">
<label for="exampleInputFile">File Before</label>
<label class="control-label file_before" style="display:none; color: #fc4b6c;"><i class="fa fa-times-circle-o"></i></label>
<div class="file-drop-area border dropzone clsbox" id="mydropzone">
</div>
</div>
<div class="col-sm-4" runat="server">
<div class="form-group">
<label for="exampleInputFile">File After</label>
<label class="control-label file_after" style="display:none; color: #fc4b6c;"><i class="fa fa-times-circle-o"></i></label>
<div class="file_after-drop-area border dropzone clsbox" id="fileafterdropzone">
</div>
</div>
</div>
<div class="col-sm-4">
<label for="exampleInputFile">IPR Form</label>
<div class="ipr_form-drop-area border">
<input type="file" id="ipr_form" name="ipr_form" class="ipr_form files" accept="image/*" required>
<p class="message">Drag your files here or click in this area.</p>
</div>
<img src="" id="profile-img-tag" width="200px" />
</div>
</div>
</div>
<!-- /.row -->
</div>
<div class="box-footer">
<button type="submit" class="btn btn-info pull-right">Submit Case</button>
</div>
<!-- /.box-body -->
</form>
Javascript
<script src="{{asset('public/js/dropzone.js')}}"></script>
<script>
Dropzone.autoDiscover = false;
// Dropzone class:
var myDropzone = new Dropzone("div#mydropzone", {
url: "{{route('case-submit')}}",
acceptedFiles:'.stl',
addRemoveLinks: true,
autoProcessQueue:false,
params: {
_token: "{{csrf_token()}}"
},
});
var myDropzone = new Dropzone("div#fileafterdropzone", {
url: "{{route('case-submit')}}",
acceptedFiles:'.stl',
addRemoveLinks: true,
autoProcessQueue:false,
params: {
_token: "{{csrf_token()}}"
},
});
</script>
$(document).ready(function(e){
// Submit form data via Ajax
$("#case-form").on('submit', function(e){
e.preventDefault();
$.ajax({
type: 'POST',
url: '{{route('case-submit')}}',
data: new FormData(this),
dataType: 'html',
contentType: false,
cache: false,
processData:false,
success: function(response){
},
error: function(response){
}
});
});
});
</script>
Controller
public function caseSubmit(Request $request)
{
$case_number = $request->input('case_number');
$patient_name = $request->input('patient_name');
$doctor_name = $request->input('doctor_name');
$portal_id = $request->input('portal_id');
$date = date("Y-m-d H:m:s");
$user_id = Auth::id();
$caseInputData = ['patient_name' => $patient_name,
'doctor_name' => $doctor_name,
'case_number' => $case_number,
'created_at' => $date,
'user_id' => $user_id,
'portal_id' => $portal_id
];
$case = new Cases();
$case_data = $case->storePatientCase($caseInputData);
$caseId = $case_data->id;
$caseNumber = $case_data->case_number;
}
if ($caseId != null && $caseId > 0) {
$filesBefore = $request->file('file_before');
$no_of_files_attached = count($filesBefore);
$files_array = array();
foreach ($filesBefore as $fileBefore) {
$fileName = $fileBefore->getClientOriginalName();
$pathToStoreFile = public_path() . '/cases/' . $caseNumber . '/filesBefore/' . $revisions;
$fileBefore->move($pathToStoreFile, $fileName);
$files_array[] = $fileName;
}
$filesAfter = $request->file('file_after');
$no_of_files_attached = count($filesAfter);
$afterfileArray = array();
foreach ($filesAfter as $fileAfter) {
$afterfileName = $fileAfter->getClientOriginalName();
$pathToStoreFile = public_path() . '/cases/' . $caseNumber . '/filesAfter/' . $revisions;
$fileAfter->move($pathToStoreFile, $afterfileName);
$afterfileArray = $afterfileName;
}
$iprForm = $request->file('ipr_form');
$ipr_form = $iprForm->getClientOriginalName();
$pathToStoreFile = public_path() . '/cases/' . $caseNumber . '/ipr_form/' . $revisions;
$iprForm->move($pathToStoreFile, $ipr_form);
$unique_url = URL::to('/').'/'.$case_number.'/'.uniqid();
$data_array = [
'case_id' => $caseId,
'operator_id' => $request->input('operator_id'),
'upper_aligner' => $request->input('upper_aligner'),
'lower_aligner' => $request->input('lower_aligner'),
'file_before' => json_encode($files_array),
'file_after' => json_encode($afterfileArray),
'ipr_form' => $ipr_form,
'updated_at' => null,
'created_at' => $date,
'revisions' => $revisions,
'url' => $unique_url,
];
}
How can i get files in controller with other text data and submit data in database using this method caseSubmit

How do I disable a select option based on another select option?

I've been wondering if I can disable a select option based on the value length of another select option.
var start = 2010;
var end = 2030;
var options = "";
for (var year = start; year <= end; year++) {
options += "<option>" + year + "</option>";
}
document.getElementById("idTahunBerlaku").insertAdjacentHTML(
"beforeend", options);
var start = 1;
var end = 12;
var options = "";
for (var month = start; month <= end; month++) {
options += "<option>" + month + "</option>";
}
document.getElementById("idBulanBerlaku").insertAdjacentHTML(
"beforeend", options);
var start = 2010;
var end = 2030;
var options = "";
for (var year = start; year <= end; year++) {
options += "<option>" + year + "</option>";
}
document.getElementById("idTahunBerlakuS").insertAdjacentHTML(
"beforeend", options);
var start = 1;
var end = 12;
var options = "";
for (var month = start; month <= end; month++) {
options += "<option>" + month + "</option>";
}
document.getElementById("idBulanBerlakuS").insertAdjacentHTML(
"beforeend", options);
$('#idBtnSimpanSimpan').click(
function() {
if ($('#idPenerbit').val().length == 0 ||
$('#idtrainingName').val().length == 0) {
alert("ISI SEMUA FORM TERLEBIH DAHULU");
} else {
debugger;
var vDatasertifikasi = $('#idFrmAddSertifikasi')
.serialize();
alert(vDatasertifikasi);
debugger;
$.ajax({
url: '/savesertifikasi',
type: 'POST',
data: vDatasertifikasi,
dataType: "json",
success: function(model) {
debugger;
if (model.status == "berhasil") {
alert("Data berhasil disimpan");
$('#idMdlNewSertifikasi').modal('hide');
/* redirecting to home of barang */
debugger;
} else {
alert("Data salah");
}
},
error: function(model) {
debugger;
}
});
}
});
$(".clSelectKiri").change(function() {
if ($('#idTahunBerlaku').val().length == 0 &&
$('#idBulanBerlaku').val().length == 0) {
$(".clTgglKanan").attr("disabled", "disabled");
} else {
$(".clTgglKanan").removeAttr("disabled");
}
}).trigger("change");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-horizontal" id="idFrmAddSertifikasi" method="post">
<div class="row">
<div class="col-sm-12">
<div class="row">
<!-- LEVEL 1 / KIRI -->
<div class="col-xs-8 col-sm-6">
<div class="col-xs-12">
<label for="SertifikasiName" class="control-label">Nama
Sertifikasi<sup>*</sup>
</label>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control clborderbiru" maxlength="50" id="idtrainingName" name="certificate_name" placeholder="" title="MAKS. KARAKTER 50">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12">
<label for="schoolName" class="control-label">Berlaku
Mulai</label>
<div class="row">
<div class="col-xs-8 col-sm-6">
<div class="form-group">
<div class="col-sm-12">
<select class="form-control clborderbiru clSelectKiri" id="idBulanBerlaku" name="valid_start_month">
<option value="" disabled selected hidden>- Pilih
Bulan -</option>
</select>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-6">
<div class="form-group">
<div class="col-sm-12">
<select class="form-control clborderbiru clSelectKiri" id="idTahunBerlaku" name="valid_start_year">
<option value="" disabled selected hidden>- Pilih
Tahun -</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- LEVEL 2 / KANAN -->
<div class="col-xs-4 col-sm-6">
<div class="col-xs-12">
<label for="organizer" class="control-label">Penerbit<sup>*</sup></label>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control clborderbiru" id="idPenerbit" name="publisher" placeholder="">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12">
<label for="schoolName" class="control-label">Berlaku
Sampai</label>
<div class="row">
<div class="col-xs-8 col-sm-6">
<div class="form-group">
<div class="col-sm-12">
<select class="form-control clTgglKanan clborderbiru" id="idBulanBerlakuS" name="until_month">
<option value="" disabled selected hidden>- Pilih
Bulan -</option>
</select>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-6">
<div class="form-group">
<div class="col-sm-12">
<select class="form-control clTgglKanan clborderbiru" id="idTahunBerlakuS" name="until_year">
<option value="" disabled selected hidden>- Pilih
Tahun -</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<label for="notes" class="control-label">Catatan</label>
<div class="form-group">
<div class="col-sm-12">
<textarea class="form-control clborderbiru" id="idCatatan" rows="6" name="notes"></textarea>
</div>
</div>
</div>
<div class="col-md-offset-10">
<div class="btn-group">
<button type="button" class="btn clBtnMdl">Batal</button>
<button type="button" class="btn clBtnMdl" id="idBtnSimpanSimpan">Simpan</button>
</div>
</div>
</div>
</div>
</form>
When I select a value in the .clSelectKiri value length == 0 I want the .clTgglKanan to be disabled. And there's a hidden option, is that affecting it?
This is the code I've been working, but it isn't working. Does anyone has any idea why?

In your if statement that disables the lower two select elements you just need to change .val().length == 0 to .val and that will disable them when the top two are selected.
var start = 2010;
var end = 2030;
var options = "";
for (var year = start; year <= end; year++) {
options += "<option>" + year + "</option>";
}
document.getElementById("idTahunBerlaku").insertAdjacentHTML(
"beforeend", options);
var start = 1;
var end = 12;
var options = "";
for (var month = start; month <= end; month++) {
options += "<option>" + month + "</option>";
}
document.getElementById("idBulanBerlaku").insertAdjacentHTML(
"beforeend", options);
var start = 2010;
var end = 2030;
var options = "";
for (var year = start; year <= end; year++) {
options += "<option>" + year + "</option>";
}
document.getElementById("idTahunBerlakuS").insertAdjacentHTML(
"beforeend", options);
var start = 1;
var end = 12;
var options = "";
for (var month = start; month <= end; month++) {
options += "<option>" + month + "</option>";
}
document.getElementById("idBulanBerlakuS").insertAdjacentHTML(
"beforeend", options);
$('#idBtnSimpanSimpan').click(
function() {
if ($('#idPenerbit').val().length == 0 ||
$('#idtrainingName').val().length == 0) {
alert("ISI SEMUA FORM TERLEBIH DAHULU");
} else {
debugger;
var vDatasertifikasi = $('#idFrmAddSertifikasi')
.serialize();
alert(vDatasertifikasi);
debugger;
$.ajax({
url: '/savesertifikasi',
type: 'POST',
data: vDatasertifikasi,
dataType: "json",
success: function(model) {
debugger;
if (model.status == "berhasil") {
alert("Data berhasil disimpan");
$('#idMdlNewSertifikasi').modal('hide');
/* redirecting to home of barang */
debugger;
} else {
alert("Data salah");
}
},
error: function(model) {
debugger;
}
});
}
});
$(".clSelectKiri").change(function() {
if ($('#idTahunBerlaku').val() && $('#idBulanBerlaku').val()) {
$(".clTgglKanan").attr("disabled", false);
} else {
$(".clTgglKanan").attr("disabled", true);
}
}).trigger("change");
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<form class="form-horizontal" id="idFrmAddSertifikasi" method="post">
<div class="row">
<div class="col-sm-12">
<div class="row">
<!-- LEVEL 1 / KIRI -->
<div class="col-xs-8 col-sm-6">
<div class="col-xs-12">
<label for="SertifikasiName" class="control-label">Nama
Sertifikasi<sup>*</sup>
</label>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control clborderbiru" maxlength="50" id="idtrainingName" name="certificate_name" placeholder="" title="MAKS. KARAKTER 50">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12">
<label for="schoolName" class="control-label">Berlaku
Mulai</label>
<div class="row">
<div class="col-xs-8 col-sm-6">
<div class="form-group">
<div class="col-sm-12">
<select class="form-control clborderbiru clSelectKiri" id="idBulanBerlaku" name="valid_start_month">
<option value="" disabled selected hidden>- Pilih
Bulan -</option>
</select>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-6">
<div class="form-group">
<div class="col-sm-12">
<select class="form-control clborderbiru clSelectKiri" id="idTahunBerlaku" name="valid_start_year">
<option value="" disabled selected hidden>- Pilih
Tahun -</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- LEVEL 2 / KANAN -->
<div class="col-xs-4 col-sm-6">
<div class="col-xs-12">
<label for="organizer" class="control-label">Penerbit<sup>*</sup></label>
<div class="form-group">
<div class="col-sm-12">
<input type="text" class="form-control clborderbiru" id="idPenerbit" name="publisher" placeholder="">
</div>
</div>
</div>
<div class="col-xs-12 col-sm-12">
<label for="schoolName" class="control-label">Berlaku
Sampai</label>
<div class="row">
<div class="col-xs-8 col-sm-6">
<div class="form-group">
<div class="col-sm-12">
<select class="form-control clTgglKanan clborderbiru" id="idBulanBerlakuS" name="until_month">
<option value="" disabled selected hidden>- Pilih
Bulan -</option>
</select>
</div>
</div>
</div>
<div class="col-xs-4 col-sm-6">
<div class="form-group">
<div class="col-sm-12">
<select class="form-control clTgglKanan clborderbiru" id="idTahunBerlakuS" name="until_year">
<option value="" disabled selected hidden>- Pilih
Tahun -</option>
</select>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="col-xs-12">
<label for="notes" class="control-label">Catatan</label>
<div class="form-group">
<div class="col-sm-12">
<textarea class="form-control clborderbiru" id="idCatatan" rows="6" name="notes"></textarea>
</div>
</div>
</div>
<div class="col-md-offset-10">
<div class="btn-group">
<button type="button" class="btn clBtnMdl">Batal</button>
<button type="button" class="btn clBtnMdl" id="idBtnSimpanSimpan">Simpan</button>
</div>
</div>
</div>
</div>
</form>

Codeigniter form serialize not working

i'm triying to pass data from form to controller in codeigniter...but when I want to print a table with the results...i'm getting null on every row of the table. Here is my code:
FORM
<form class="col s12" id="update_form" name="update_form" method="post" >
<div class="row">
<div class="input-field col s6">
<input id="update_name" type="text" name="name" class="validate">
<label for="first_name">Nombre</label>
</div>
<div class="input-field col s6">
<input id="update_last_name" name="lastname" type="text" class="validate">
<label for="last_name">Apellido</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<input id="update_side" type="text" name="side" class="validate">
<label for="partido">Partido</label>
</div>
<div class="input-field col s6">
<input id="update_charge" type="text" name="charge" class="validate">
<label for="cargo">Cargo</label>
</div>
</div>
<div class="row">
<div class="input-field col s6">
<div class="file-field input-field no-margin-top">
<div class="btn light-blue darken-4">
<span>Animación</span>
<input type="file">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" name="animation" type="text">
</div>
</div>
</div>
<div class="input-field col s6">
<select id="update_section" name="section" autocomplete="off">
<option value="" disabled selected>Seleccione una opción</option>
<option value="1">Presidencia</option>
<option value="2">Senadores</option>
<option value="3">Diputados</option>
</select>
<label>Sección</label>
</div>
</div>
<input type="hidden" name="update_politic_hide" id="update_politic_hdn" value="">
</form>
Jquery
$("#update_politic_btn").click(function(event) {
/* Act on the event */
var chango = $("#update_form").serialize();
alert(chango);
$.post(baseurl + 'admin/update_politic', {
data: chango
},
function(data) {
console.log(data);
list_politic();
});
event.preventDefault();
});
Controller
public function update_politic(){
if ($this->input->is_ajax_request()) {
$params["name"] = $this->input->post("name");
$params["lastname"] = $this->input->post("lastname");
$params["side"] = $this->input->post("side");
$params["charge"] = $this->input->post("charge");
$params["animation"] = $this->input->post("animation");
$params["section"] = $this->input->post("section");
$params["id"] = $this->input->post("update_politic_hide");
if ($params["section"]=="Presidencia") {
$params["section"]=1;
}
if ($params["section"]=="Senadores") {
$params["section"]=2;
}
if ($params["section"]=="Diputados") {
$params["section"]=3;
}
$this->load->model("politic");
$this->politic->update($params);
}
}
MODEL
public function update($param){
$id = $param["id"];
$values = array(
"POLITIC_NAME" => $param["name"],
"POLITIC_LASTNAME" => $param["lastname"],
"POLITIC_SIDE" => $param["side"],
"POLITIC_CHARGE" => $param["charge"],
//"animation" => $param["animation"],
"SECTION_ID" => $param["section"],
);
$this->db->update("politics",$values);
$this->db->where("POLITIC_ID",$id);
}
HELP!!! I don't understan why i'm getting null values once I want print results!!

Your where condition should come first like,
public function update($param){
$id = $param["id"];
$values = array(
"POLITIC_NAME" => $param["name"],
"POLITIC_LASTNAME" => $param["lastname"],
"POLITIC_SIDE" => $param["side"],
"POLITIC_CHARGE" => $param["charge"],
//"animation" => $param["animation"],
"SECTION_ID" => $param["section"],
);
$this->db->where("POLITIC_ID",$id);
$this->db->update("politics",$values);
}
And show us your list_politic(); code if it is not working.
I think you are passing data in incorrect way if you are using serialize() then use it directly in $.post like,
$.post(baseurl + 'admin/update_politic',chango,function(data) {
console.log(data);
list_politic();
});