We Keep Coding

Search by Name Category/SubCategory using Javascript on laravel view

I had some problems with the task. I'm not very good with javascript. Please help.
I display categories as form and I want to when the form to be typed to display products that are set for each category and sub-category. In the next task I have to make sure that when the form is typed, the categories show up and, also without refreshing the page.
code on product_upload.blade.view
<div class="form-group row" id="category">
<label class="col-md-3 col-from-label">{{translate('Category')}}</label>
<div class="col-md-8">
<select class="form-control aiz-selectpicker" name="category_id" id="category_id" data-live-search="true" required>
#foreach($categories as $category)
<option value="{{$category->id}}">{{ $category->getTranslation('name') }}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group row" id="subcategory">
<label class="col-md-3 col-from-label">{{translate('Subcategory')}}</label>
<div class="col-md-8">
<select class="form-control aiz-selectpicker" name="subcategory_id" id="subcategory_id" data-live-search="true" required>
</select>
</div>
</div>
My script :
function get_subcategories_by_category(){
var category_id = $('#category_id').val();
$.post('{{ route('subcategories.get_subcategories_by_category') }}',{_token:'{{ csrf_token() }}', category_id:category_id}, function(data){
$('#subcategory_id').html(null);
for (var i = 0; i < data.length; i++) {
$('#subcategory_id').append($('<option>', {
value: data[i].id,
text: data[i].name
}));
$(".aiz-selectpicker").selectpicker();
}
get_subsubcategories_by_subcategory();
});
}
$('#category_id').on('change', function() {
get_subcategories_by_category();
});
$('#subcategory_id').on('change', function() {
get_subsubcategories_by_subcategory();
});
and my controller :
public function get_subcategories_by_category(Request $request)
{
$subcategories = SubCategory::where('category_id', $request->category_id)->get();
return $subcategories;
}
But that wont work.

How can I display selected values together using jQuery?

I have some dropdown fields which trigger a popup that allows the user to enter a value. I want this value to appear in the button here:
<button type="button" id="moving_average_output" name="moving_average_output" class="btn-primary col-xl-12 form-control">Value should appear here</button>
I'm able to get the most recently selected value to appear in the <button>, but I can't get all three values to appear together. Here is the full source code:
$("#comparator_indicator").on('change', function() {
var comparator_value = $(this).val();
$("#moving_average_output").text(comparator_value);
});
$("#right_side_indicator_select-me").on('change', function() {
//alert($(this).val());
if ($(this).val() == 1) {
$("#myModal_first").modal('show');
}else if($(this).val() == 2) {
$('#simple_moving_average').val('');
$("#myModal_second").modal('show');
}
});
$("#movingaveragebutton").on('click', function(event) {
event.preventDefault();
simplemovingaverage = $("#simple_moving_average").val();
$("#moving_average_output").text(simplemovingaverage);
});
$("#exponentialbutton").on('click', function(event) {
event.preventDefault();
exponentialstring = $("#exponentialstring").val();
exponentialnumber = $("#exponentialnumber").val();
$("#moving_average_output").text(exponentialstring+','+exponentialnumber);
});
/* ----------------------right side -------------------------------------------*/
$("#left_indicator_side_select-me").on('change', function() {
//alert($(this).val());
if ($(this).val() == 1) {
$("#myModal_first").modal('show');
}else if($(this).val() == 2) {
$('#simple_moving_average').val('');
$("#myModal_second").modal('show');
}
});
$("#movingaveragebutton").on('click', function(event) {
event.preventDefault();
simplemovingaverage = $("#simple_moving_average").val();
$("#moving_average_output").text(simplemovingaverage);
});
$("#exponentialbutton").on('click', function(event) {
event.preventDefault();
exponentialstring = $("#exponentialstring").val();
exponentialnumber = $("#exponentialnumber").val();
$("#moving_average_output").text(exponentialstring+','+exponentialnumber);
});
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<div class="row block-9">
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Right Side Indicator:</label>
<select class="form-control" id="right_side_indicator_select-me" name="right_side_indicator_select-me">
<option>Select</option>
<option value="1">Moving Average</option>
<option value="2">Exponential Moving Average</option>
</select>
</div>
</div>
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Comparator:</label>
<select class="form-control" id="comparator_indicator" name="comparator_indicator">
<option>Select</option>
<option value="=">=</option>
<option value=">">></option>
<option value="<"><</option>
</select>
</div>
</div>
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Left Side Indicator:</label>
<select class="form-control" id="left_indicator_side_select-me" name="left_indicator_side_select-me">
<option>Select</option>
<option value="1">Moving Average</option>
<option value="2">Exponential Moving Average</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="sel1">Selected values</label>
<button type="button" id="moving_average_output" name="moving_average_output" class="btn-primary col-xl-12 form-control">value will display here</button>
</div>
<div class="form-group">
<div id="myModal_first" class="modal fade" role="dialog">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-content">
<div class="modal-body">
<input type="text" name="simple_moving_average" id="simple_moving_average" class="form-control" placeholder="TEXT">
</div>
<button type="button" id="movingaveragebutton" name="movingaveragebutton" class="btn btn-primary col-xl-6 text-center" style="align-self: center !important;" data-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
<div class="form-group">
<div id="myModal_second" class="modal fade" role="dialog">
<div class="modal-dialog">
<button type="button" class="close" data-dismiss="modal">×</button>
<div class="modal-content">
<div class="modal-body">
<div class="row block-9">
<div class="col-md-6 pr-md-6">
<div class="form-group">
<select class="form-control" id="exponentialstring" name="exponentialstring">
<option>SELECT THE OPTIONS</option>
<option value="open">OPEN</option>
<option value="close">CLOSE</option>
<option value="low">LOW</option>
<option value="high">HIGH</option>
</select>
</div>
</div>
<div class="col-md-6 pr-md-6">
<div class="form-group">
<select class="form-control" id="exponentialnumber" name="exponentialnumber">
<option>SELECT THE OPTIONS</option>
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
<option>5</option>
<option>6</option>
<option>7</option>
<option>8</option>
<option>9</option>
<option>10</option>
</select>
</div>
</div>
</div>
</div>
<button type="button" id="exponentialbutton" name="exponentialbutton" class="btn btn-primary col-xl-6 text-center" style="align-self: center !important;" data-dismiss="modal">Save changes</button>
</div>
</div>
</div>
</div>
If you run the example, you'll see that only the most recently entered value is displayed in the <button>.

OK I think I have this refactored correctly, I changed the order of your indicators because they seemed backwards:
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Left Side Indicator:</label>
<select class="form-control" id="left_indicator_side_select-me" name="left_indicator_side_select-me">
<option>Select</option>
<option value="1">Moving Average</option>
<option value="2">Exponential Moving Average</option>
</select>
</div>
</div>
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Comparator:</label>
<select class="form-control" id="comparator_indicator" name="comparator_indicator">
<option>Select</option>
<option value="=">=</option>
<option value=">">></option>
<option value="<"><</option>
</select>
</div>
</div>
<div class="row block-9">
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Right Side Indicator:</label>
<select class="form-control" id="right_side_indicator_select-me" name="right_side_indicator_select-me">
<option>Select</option>
<option value="1">Moving Average</option>
<option value="2">Exponential Moving Average</option>
</select>
</div>
</div>
</div>
<div class="form-group">
<label for="sel1">Selected values</label>
<button type="button" id="moving_average_output" name="moving_average_output" class="btn-primary col-xl-12 form-control">Value goes here</button>
</div>
And here is the refactored JS (note that I removed the last two event handlers from your example, as they were not needed):
const output = {
left: '',
compare: '',
right: '',
toString: function() {
return `${this.left} ${this.compare} ${this.right}`;
},
};
let sideIndicator = '';
$("#left_indicator_side_select-me").on('change', function() {
sideIndicator = 'left';
if ($(this).val() == 1) {
$("#myModal_first").modal('show');
}else if($(this).val() == 2) {
$('#simple_moving_average').val('');
$("#myModal_second").modal('show');
}
});
$("#comparator_indicator").on('change', function() {
output.compare = $(this).val();
$("#moving_average_output").text(output.toString());
});
$("#right_side_indicator_select-me").on('change', function() {
sideIndicator = 'right';
if ($(this).val() == 1) {
$("#myModal_first").modal('show');
}else if($(this).val() == 2) {
$('#simple_moving_average').val('');
$("#myModal_second").modal('show');
}
});
$("#movingaveragebutton").on('click', function(event) {
event.preventDefault();
output[sideIndicator] = $("#simple_moving_average").val();
$("#moving_average_output").text(output.toString());
});
$("#exponentialbutton").on('click', function(event) {
event.preventDefault();
exponentialstring = $("#exponentialstring").val();
exponentialnumber = $("#exponentialnumber").val();
output[sideIndicator] = exponentialstring + ',' + exponentialnumber;
$("#moving_average_output").text(output.toString());
});
Here's a JSFiddle where you can work with it and see if this solution meets your needs.
Brief Explanation
I created an object, output which will hold the text of the #moving_average_output <button> element. The properties will hold the text from the elements of the same name on the page:
const output = {
left: '',
compare: '',
right: '',
toString: function() {
return `${this.left} ${this.compare} ${this.right}`;
},
};
So, output.left will have the text content from this HTML element:
<div class="col-md-4 pr-md-4">
<div class="form-group">
<label for="sel1">Left Side Indicator:</label>
<select class="form-control" id="left_indicator_side_select-me" name="left_indicator_side_select-me">
<option>Select</option>
<option value="1">Moving Average</option>
<option value="2">Exponential Moving Average</option>
</select>
</div>
</div>
This works by creating a variable sideIndicator in the global scope and setting it to the side of the dropdown that was clicked in your 'change' event handlers. Here is the example for the #left_indicator_side_select-me event handler:
let sideIndicator = '';
$("#left_indicator_side_select-me").on('change', function() {
sideIndicator = 'left';
if ($(this).val() == 1) {
$("#myModal_first").modal('show');
}else if($(this).val() == 2) {
$('#simple_moving_average').val('');
$("#myModal_second").modal('show');
}
});
We can then use bracket notation to dynamically assign the value of the #simple_moving_average button and the #exponentialstring and #exponential number to the correct side in the output object:
$("#movingaveragebutton").on('click', function(event) {
event.preventDefault();
output[sideIndicator] = $("#simple_moving_average").val();
$("#moving_average_output").text(output.toString());
});
$("#exponentialbutton").on('click', function(event) {
event.preventDefault();
exponentialstring = $("#exponentialstring").val();
exponentialnumber = $("#exponentialnumber").val();
output[sideIndicator] = exponentialstring + ',' + exponentialnumber;
$("#moving_average_output").text(output.toString());
});
The call to output.toString() will return the correctly formatted string as the button text.
Another Possible Solution
As an aside, you are doing some repetitive things in your version, which I didn't change in my refactor above. If I were approaching this project, I would do things a little differently in my JS. Here's another way of looking at things:
const movingAverageOutput = document.getElementById('moving_average_output');
const simpleMovingAverage = document.getElementById('simple_moving_average');
const output = {
left: '',
compare: '',
right: '',
toString: function() {
return `${this.left} ${this.compare} ${this.right}`;
},
};
const triggerModal = (val) => {
if (val == 1) return $("#myModal_first").modal('show');
if (val == 2) {
simpleMovingAverage.value = '';
$("#myModal_second").modal('show');
}
};
let sideIndicator = '';
const setSideIndicator = (id) => {
if (id === 'left_indicator_side_select-me') return sideIndicator = 'left';
if (id === 'right_side_indicator_select-me') return sideIndicator = 'right';
};
window.addEventListener('change', function(e) {
triggerModal(e.target.value);
setSideIndicator(e.target.id);
});
$("#comparator_indicator").on('change', function() {
output.compare = $(this).val();
movingAverageOutput.textContent = output.toString();
});
$("#movingaveragebutton").on('click', function(event) {
output[sideIndicator] = simpleMovingAverage.value;
movingAverageOutput.textContent = output.toString();
});
$("#exponentialbutton").on('click', function(event) {
exponentialstring = $("#exponentialstring").val();
exponentialnumber = $("#exponentialnumber").val();
output[sideIndicator] = exponentialstring + ',' + exponentialnumber;
movingAverageOutput.textContent = output.toString();
});
And here is a JSFiddle of that version if you want to mess around with it.

Create 2 functions like bellow
Function 1 :
$(document).ready(function(){
$('#my_form').on('submit', function(event){
event.preventDefault();
var form_data = $(this).serialize();
$.ajax({
url:"add_data.php", //This is your page which inserts data in db
method:"POST",
data:form_data,
dataType:"JSON",
success:function(data)
{
if(data.error != '')
{
$('#error_message').html(data.error);
load_my_data(); //This is second function name
}
}
})
});
Now ! we are ready for second function here
load_my_data();
function load_my_data()
{
$.ajax({
url:"fetch_data.php",
method:"POST",
success:function(data)
{
$('#display_data').html(data);
}
})
}
});
Create all your php and html codes in fetch_data.php when data submited in modal it will auto display your data in
<div id="display_data"></div>
And This div will display errors
<div id="error_message"></div>
See this comment system as an example it works same way as you want : https://www.webslesson.info/2017/12/comments-system-using-php-and-ajax.html

Dynamique combobox return 'undefined ' instead of displaying the 'nom' of 'technicien'

I have the form below, with 4 comboboxes "Metier=profession" "tache=task" "tacrification=pricing" and "technicien=technician", and the name of technican is on table user Dynamique combobox return 'undefined ' name variable when i choose technicien but when i make id on script it work
interventioncontroller
<?php
namespace App\Http\Controllers;
use App\zoneintervention;
use App\technicien;
use App\Intervention;
use App\metier;
use App\tache;
use App\client;
use App\user;
use App\adresse;
use App\Tarification;
use App\tarificationtache;
use Illuminate\Http\Request;
use App\Http\Requests\InterventionRequest;
use DB;
class InterventionController extends Controller
{
/**
* Display a listing of the resource.
*
* #return \Illuminate\Http\Response
*/
public function index()
{
$Listintervention=Intervention::with(['technicien','client',
'tarificationtache'])->get();
return view('intervention.index',['interventions'=>$Listintervention]);
}
/**
* Show the form for creating a new resource.
*
* #return \Illuminate\Http\Response
*/
public function create()
{
$user= user::orderBy('id', 'asc')->get();
$client = client::orderBy('id', 'asc')->get();
$metiers = metier::orderBy('id', 'asc')->get();
$technicien = Technicien::orderBy('id', 'desc')->get();
$tarifications = tarificationtache::orderBy('id', 'desc')->get();
return view('intervention.create')->with('technicien', $technicien)-
>with('client',$client)->with('metiers',$metiers)-
>with('tarifications',$tarifications);
}
/**
* Store a newly created resource in storage.
*
* #param \Illuminate\Http\Request $request
* #return \Illuminate\Http\Response
*/
public function store(InterventionRequest $request)
{
$intervention = new Intervention();
$intervention ->description =$request->input('description');
$intervention ->duree_prevu =$request->input('duree_prevu');
if($request->has('statut')){
$intervention->statut = $request->input('statut');
}else{
$intervention->statut = 0;
}
$intervention ->technicien_id = $request->input('technicien_id');
$intervention ->client_id = $request->input('client_id');
$intervention ->tarification_id = $request->tarificationtache_id;
$intervention->save();
return redirect('intervention');
}
public function prodfunct(){
$technicien=technicien::all();//get data from table
return redirect('intervention',compact('technicien'));//sent data to
view
}
public function findlibelle_metier(Request $request){
$metier=metier::all();//get data from table
return redirect('intervention',compact('metier'));//sent data to view
}
public function findProductName(Request $request){
//if our chosen id and products table prod_cat_id col match the get
first 100 data
//$request->id here is the id of our chosen option id
$data=tache::select('libelle_tache','id')->where('metier_id',$request-
>id)->take(100)->get();
return response()->json($data);//then sent this data to ajax success
}
/**
* Display the specified resource.
*
* #param int $id
* #return \Illuminate\Http\Response
*/
public function show( $id)
{
$intervention=Intervention::find($id);
$technicien = $intervention->technicien;
$tarificationtache = tarificationtache::orderBy('id', 'desc')->get();
return view('intervention.show',['intervention'=>$intervention])-
>with('technicien',$technicien)->with('tarificationtache',
$tarificationtache);
}
/**
* Show the form for editing the specified resource.
*
* #param int $id
* #return \Illuminate\Http\Response
*/
public function edit($id)
{
$intervention=Intervention::find($id);
return view('intervention.edit',['intervention'=>$intervention]);
}
/**
* Update the specified resource in storage.
*
* #param \Illuminate\Http\Request $request
* #param int $id
* #return \Illuminate\Http\Response
*/
public function update(InterventionRequest $request, $id)
{
$intervention=Intervention::find($id);
$intervention ->date_intervention =$request->input('date_intervention');
$intervention ->description =$request->input('description');
$intervention ->duree_prevu =$request->input('duree_prevu');
$intervention ->statut =$request->has('statut');
$intervention->save();
return redirect('intervention');
}
/**
* Remove the specified resource from storage.
*
* #param int $id
* #return \Illuminate\Http\Response
*/
public function destroy($id)
{
$intervention =intervention::find($id);
$intervention->delete();
return redirect('intervention');
}
}
create.blade.php
#extends('Layouts/app')
#extends('Layouts/master')
#section('content')
<!-- jQuery -->
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js">
</script>
<script type="text/javascript">
var getTachesByMetierUrl = "{{url('/tachesbymetier')}}";
var getAdresseByClientUrl = "{{url('/adressebyclient')}}";
var getTarificationsByTacheUrl = "{{url('/tarificationsbytache')}}";
var getTechniciensByTarificationtacheUrl = "
{{url('/techniciensbytarificationtache')}}";
function getAdresseByClient(val) {
if(val.length>0) {
var client_id = val;
$.get(getAdresseByClientUrl+'/'+client_id,function(res) {
var html = '<option value="">-Select-</option>' ;
$.each(res.adresses,function(index,item) {
html+='<option
value="'+item.id+'">'+item.code_postal+'</option>';
});
$('#adresses').html(html);
});
}
}
function getTachesByMetier(val) {
if(val.length>0) {
var metier_id = val;
$.get(getTachesByMetierUrl+'/'+metier_id,function(res) {
var html = '<option value="">-Select-</option>' ;
$.each(res.taches,function(index,item) {
html+='<option
value="'+item.id+'">'+item.libelle_tache+'</option>';
});
$('#taches').html(html);
});
}
}
function getTechniciensByTache(val) {
if(val.length>0) {
var tache_id = val;
$.get(getTechniciensByTacheUrl+'/'+tarificationtache_id,function(res) {
var html = '<option value="">-Select-</option>' ;
$.each(res.techniciens,function(index,item) {
html+='<option
value="'+item.id+'">'+item.id.nom+'</option>';
});
$('#techniciens').html(html);
});
}
}
function getTarificationsByTache(val) {
if(val.length>0) {
var tache_id = val;
$.get(getTarificationsByTacheUrl+'/'+tache_id,function(res) {
var html = '<option value="">-Select-</option>' ;
$.each(res.tarifications,function(index,item) {
html+='<option
value="'+item.id+'">'+item.tarif+'</option>';
});
$('#tarifications').html(html);
});
}
}
function getTechniciensByTarificationtache(val) {
if(val.length>0) {
var tarificationtache_id = val;
$.get(getTechniciensByTarificationtacheUrl+'/'+tarificationtache_id,
function(res ) {
var html = '<option value="">-Select-</option>' ;
$.each(res.techniciens,function(index,item) {
html+='<option
value="'+item.id+'">'+item.id.nom+'</option>';
});
$('#techniciens').html(html);
});
}
}
</script>
#if(count($errors))
<div class="alert alert-danger" role="alert">
<ul>
#foreach($errors ->all() as $message)
<li>{{$message}}</li>
#endforeach
</ul>
</div>
#endif
<div class="container">
<div class="row"></div>
<div class="col-md-10">
<h1>Ajout Intervention</h1>
<form action=" {{url ('intervention') }}" method="post">
{{csrf_field()}}
<div class="form-group">
<label for="client">Client</label>
<select onchange="getAdresseByClient(this.value)"
name="client_id" id="client" class="form-control">
<option value="">-Select-</option>
#foreach($client as $t)
<option value="{{$t->id }}">
{{$t->user->nom}}
</option>
#endforeach
</select>
</div>
<div class="form-group">
<label for="">date et heure </label>
<input class="form-control" type="datetime-local" name
="duree_prevu" value="{{old('duree_prevu')}}">
</div>
<div class="form-group">
<label for="">description</label>
<input type="text" name ="description" class="form-
control"value="{{old('description')}}">
</div>
<div class="form-group">
<div class="col-md-12">
<div class="col-md-4">
<label>Metier: </label>
<select onchange="getTachesByMetier(this.value)"
style="width: 200px" class="productm form-control" id="metiers">
<option value="">-Select-</option>
#foreach($metiers as $t)
<option value="{{$t->id }}">
{{$t->libelle_metier}}
</option>
#endforeach
</select>
</div>
<div class="col-md-4">
<label>tache: </label>
<select onchange="getTarificationsByTache(this.value)"
style="width: 200px" class="productname form-control" name="tache"
id="taches">
<option value="">-Select-</option>
</select>
</div>
<div class="col-md-4">
<label>tarification: </label>
<select
onchange="getTechniciensByTarificationtache(this.value)" style="width:
200px"
class="productname form-control" name="tarificationtache_id"
id="tarifications">
<option value="">-Select-</option>
</select>
</div>
<div class="col-md-4">
<label>technicien: </label>
<select style="width: 200px" class="productname
form-control" name="technicien_id" id="technicien">
<option value="">-Select-</option>
</select>
</div>
</div>
<div class="form-group">
<div class="form-group">
<label for="">statut : </label>
<input type="checkbox" name ="statut" value="1" required
autofocus>
</div>
<div class="form-group">
<label for="">payement</label>
<input type="checkbox" name ="payement" value="">
</div>
<div class="form-group">
<input type="submit" value = "enregistrer" class="form-
control btn btn-primary">
</div>
</div>
</div>
</div>
<link
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css"
rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
datepicker/1.5.0/css/bootstrap-datepicker.css" rel="stylesheet">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js">
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-
datepicker/1.5.0/js/bootstrap-datepicker.js"></script>
#endsection
table technicien
Schema::create('techniciens', function (Blueprint $table) {
$table->increments('id');
$table->boolean('actif')->default(1);
$table->float('moyenne_avis')->nullable();
$table->integer('user_id')->unsigned();
$table->foreign('user_id')->references('id')->on('users');
$table->datetime('deleted_at')->nullable();
$table->timestamps();
});
*

Instead of:
html+='<option value="'+item.id+'">'+item.id.nom+'</option>';
you need:
html+='<option value="'+item.id+'">'+item.user.nom+'</option>';
And change this:
public function getTechniciensByTarificationtache($tarificationtache_id)
{
$t = tarificationtache::with('techniciens.user')->find($tarificationtache_id);
return response()->json(['techniciens' => $t->techniciens]);
}

How to ignore sync if value is null in laravel

I have a form where I will sync my attributes (it's like tags) but the issue is I get error while select or even not select any attribute.
Here is the error I get:
SQLSTATE[HY000]: General error: 1366 Incorrect integer value: '' for
column 'attribute_id' at row 1 (SQL: insert into product_attributes
(attribute_id, product_id) values (*parameters, 65))
Before codes I need to explain what I try to do:
Select my attributes while creating new post
Give value to selected attribute
save product_id arribute_id and attribute_value in product_attributes table.
Here is my blade:
$(function() {
$('a.pl').click(function(e) {
e.preventDefault();
$('#phone').append('<div class="col-md-6"><select class="tagsselector mb-20 form-control" name="attribute[]"><option value="{{ $attribute->id }}">{{ $attribute->title }}</option></select></div><div class="col-md-6"><input name="attribute_value" class="form-control" type="text" placeholder="Value"></div>');
});
$('a.mi').click(function (e) {
e.preventDefault();
if ($('#phone input').length > 1) {
$('#phone').children().last().remove();
}
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="RegSpLeft" id="phone" style="margin-top:30px;">
<div class="col-md-6">
<label for="attributes" hidden>Attributes</label>
<select class="mb-20 form-control" name="attributes[]">
<option value="" selected>Select Attributes</option>
#foreach($attributes as $attribute)
<option value="{{ $attribute->id }}">{{ $attribute->title }}</option>
#endforeach
</select>
</div>
<div class="col-md-6">
<label for="attribute_value" hidden>attribute value</label>
<input name="attribute_value" class="form-control" type="text" placeholder="Value">
</div>
</div>
<div class="RegSpRight">
+
-
</div>
Here is my controller:
public function create()
{
$categories = Category::all();
$subcategories = Subcategory::all();
$attributes = Attribute::all();
if (is_null($attributes)) {
$attributes = [];
}
$user = Auth::user();
return view('admin.products.create', compact('user', 'categories', 'subcategories', 'attributes'));
}
My Product model:
public function attributes()
{
return $this->belongsToMany(Attribute::class, 'product_attributes', 'product_id', 'attribute_id');
}
My Attribute model:
public function products(){
return $this->belongsToMany(Product::class);
}

Codeigniter file form upload

I'm getting this error when I try to update a file on my form..."You did not select a file to upload." ...and the problem is that I really am selecting a new file to upload...help me pls, I don't understand what is happening ...here is my code:
FORM
<form class="col s12" id="update_form" required="" enctype="multipart/form-data" aria-required="true" name="update_form" method="post" >
<div class="row">
<div class="input-field col s6">
<input id="update_name" type="text" required="" aria-required="true" name="name" class="validate">
<label for="first_name">Nombre</label>
</div>
<div class="input-field col s6">
<input id="update_last_name" name="lastname" required="" aria-required="true" 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" required="" aria-required="true" name="side" class="validate">
<label for="partido">Partido</label>
</div>
<div class="input-field col s6">
<input id="update_charge" type="text" required="" aria-required="true" 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/Imagen</span>
<input type="file" name="animation">
</div>
<div class="file-path-wrapper">
<input class="file-path validate" id="animation" name="animation" type="text">
</div>
</div>
</div>
<div class="input-field col s6">
<select id="update_section" required="" aria-required="true" 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>
CONTROLLER
public function update_politic(){
$this->load->model("politic");
$params;
if ($this->input->is_ajax_request()) {
if (empty($this->input->post("animation"))){
echo "first";
$data = $this->politic->get_file_name($this->input->post("update_politic_hide"));
$file = $data->POLITIC_FILE;//recupero el nombre de la imagen
$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["section"] = $this->input->post("section");
$params["animation"] = $file;
$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;
}
}
else {
echo "second";
$config['upload_path'] = "./public/uploads/";
$config['allowed_types'] = "*";
//$config['overwrite'] = "true";
$config['max_size'] = "500000";
$config['max_width'] = "2000";
$config['max_height'] = "2000";
$this->load->library('upload', $config);
//$file = "animation";
if (!$this->upload->do_upload("animation")) {
$data['uploadError'] = $this->upload->display_errors();
echo $this->upload->display_errors();
}
else {
$file_info = $this->upload->data();
$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"] = $file_info['file_name'];
$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->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"],
"POLITIC_FILE" => $param["animation"],
"SECTION_ID" => $param["section"],
);
$this->db->where("POLITIC_ID",$id);
$this->db->update("politics",$values);
}
JAVASCRIPT
$("#update_politic_btn").click(function(event) {
/* Act on the event */
var chango = $("#update_form").serialize();
$.post(baseurl + 'admin/update_politic', chango,
function(data) {
console.log(data);
list_politic();
});
event.preventDefault();
});
function update_politic(id, name, lastname, section, side, charge, file) {
$("#update_politic_hdn").val(id);
$("#update_name").val(name);
$("#update_last_name").val(lastname);
$("#update_side").val(side);
$("#update_charge").val(charge);
$('[name=section]').val(section);
$("#animation").val(file);
$('select').material_select();
}

There are two name attributes having the same value animation.
<input type="file" name="animation">
and
<input class="file-path validate" id="animation" name="animation" type="text">
The second name attribute is overriding the first one. You need to give it a different name.

Change your Ajax code :
$("#update_politic_btn").click(function(event) {
var chango = new FormData($("#update_form")[0]);
// try this if above one not work
//var chango = new FormData($("#update_form"));
$.ajax({
url: baseurl + 'admin/update_politic',
type: 'POST',
data: chango,
async: false,
success: function (data) {
console.log(data);
list_politic();
},
cache: false,
contentType: false,
processData: false,
error : function() {
}
});
event.preventDefault();
});