I am using this multiSelect plugin.
Blade template
<form method="POST" id="report-form" action="{{ route('admin.reports.store') }}" aria-label="{{ __('Create Report') }}">
{{ csrf_field() }}
<div class="row">
<div class="form-group col-md-6">
<label class="control-label mb-10 text-left" for="tableName">Choose Table</label>
<select class="form-control" name="tableName" id="tableName">
<option>Choose</option>
#foreach ( $tables as $table )
<option value="{{ $table }}">{{ slugFormat($table) }}</option>
#endforeach
</select>
#if ($errors->has('tableName'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('tableName') }}</strong>
</span>
#endif
</div>
<div class="col-md-6">
<label class="control-label mb-10 text-left" for="columns">Select Column</label>
<select class="form-control" name="columns[]" id="columns">
<option>Choose</option>
</select>
#if ($errors->has('column'))
<span class="invalid-feedback" role="alert">
<strong>{{ $errors->first('column') }}</strong>
</span>
#endif
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group mb-0 pull-right">
<button name="submit" type="submit" class="btn btn-primary">submit</button>
</div>
</div>
</div>
</form>
jQuery code
$('#report-form').on('change', '#tableName', function(event){
event.preventDefault();
$('#columns').empty();
$('#columns').append('<option value="">Choose</option>');
var table = this.value;
var url = APP_URL + '/admin/reports/columns';
$.ajax({
url: url,
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
},
type: 'POST',
data: { table: table },
success: function(response) {
if ( response ) {
var columns = response.columns;
var options = '';
for (var i=0; i < columns.length; i++){
options += '<option value="'+ table + '.' + columns[i] + '">' + columns[i] + '</option>';
}
$('#columns').append(options);
$('#columns').multiSelect('refresh', {
selectableOptgroup: true
});
}
},
dataType: 'json'
});
});
When I am changing the table select, I am getting columns belongs to that table in #columns select box, now if I am selecting some columns from #columns seelect box and changing the table, it is clearing the selected value also, I need to check multiple columns from multiple tables.
Github Code showing basic implementation of plugin.
Related
I want to make it so that when I click on one of the dropdowns, the value according to the record id in the related table immediately appears.
I want to make it so that when I click on one of the dropdowns, the value according to the record id in the related table immediately appears.
when "golongan" is selected then the value of "gaji pokok" automatically appears.
when "asisten ahli" is selected then the value of "tunjangan fungsional" automatically appears.
when "pembantu ketua | asisten ahli" is selected then the value of "tunjangan struktural" automatically appears.
<div class="modal fade" id="tambahgajiModal" tabindex="-1" role="dialog" aria-labelledby="tambahgajiModal" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="tambahfungsiModal">Tambah Gaji Karyawan</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form action="/gaji/insert" method="POST" enctype="multipart/form-data">
#csrf
<div class="content">
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<select name="nama" type="text" class="form-control select2 #error('nama') is-invalid #enderror" value="{{ old('nama') }}">
<option>-- Nama Karyawan --</option>
#foreach ($karyawan as $data)
<option value="{{ $data->nama }}">{{ $data->nama }}</option>
#endforeach
</select>
<div class="invalid-feedback">
#error('nama')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<select name="gol" type="text" class="form-control select2 #error('gol') is-invalid #enderror" onchange="getddl()" value="{{ old('gol') }}">
<option>-- Golongan dan M K G --</option>
#foreach ($golongan as $data)
<option value="{{ $data->gol }} | {{ $data->mkg }}">{{ $data->gol }} | {{ $data->mkg }}</option>
#endforeach
</select>
<div class="invalid-feedback">
#error('gol')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<input name="tunjangan_gol" type="text" placeholder="Gaji Pokok" class="form-control #error('tunjangan_gol') is-invalid #enderror" value="{{ old('tunjangan_gol') }}" id="gol">
<div class="invalid-feedback">
#error('tunjangan_gol')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<select name="jbt_fungsi" type="text" class="form-control select2 #error('jbt_fungsi') is-invalid #enderror" value="{{ old('jbt_fungsi') }}">
<option>-- Jabatan Fungsional --</option>
#foreach ($fungsi as $data)
<option value="{{ $data->jbt_fungsi }}">{{ $data->jbt_fungsi }}</option>
#endforeach
</select>
<div class="invalid-feedback">
#error('gol')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<input name="tunjangan_fungsi" type="text" placeholder="Tunjangan Fungsional" class="form-control #error('tunjangan_fungsi') is-invalid #enderror" value="{{ old('tunjangan_fungsi') }}">
<div class="invalid-feedback">
#error('tunjangan_fungsi')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<select name="jbt_struktur" type="text" class="form-control select2 #error('jbt_struktur') is-invalid #enderror" value="{{ old('jbt_struktur') }}">
<option>-- Jabatan Struktural & Fungsional --</option>
#foreach ($struktur as $data)
<option value="{{ $data->jbt_struktur }} | {{ $data->jbt_fungsi }}">{{ $data->jbt_struktur }} | {{ $data->jbt_fungsi }}</option>
#endforeach
</select>
<div class="invalid-feedback">
#error('jbt_struktur')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<input name="tunjangan_struktur" type="text" placeholder="Tunjangan Struktural" class="form-control #error('tunjangan_struktur') is-invalid #enderror" value="{{ old('tunjangan_struktur') }}">
<div class="invalid-feedback">
#error('tunjangan_struktur')
{{ $message }}
#enderror
</div>
</div>
<div class="form-group">
<input name="total_gaji" type="text" placeholder="Total Gaji" class="form-control #error('total_gaji') is-invalid #enderror" value="{{ old('total_gaji') }}">
<div class="invalid-feedback">
#error('total_gaji')
{{ $message }}
#enderror
</div>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
how to package it with Javascript onChange in laravel ?
Sorry, I couldn't understand your language well, but you can do something like this with jquery
<div class="form-group mb-3">
<select id="country-dropdown" class="form-control">
<option value="">-- Select Country --</option>
#foreach ($countries as $data)
<option value="{{$data->id}}">
{{$data->name}}
</option>
#endforeach
</select>
</div>
<div class="form-group mb-3">
<select id="state-dropdown" class="form-control">
</select>
</div>
<div class="form-group">
<select id="city-dropdown" class="form-control">
</select>
</div>
you can leave the dependent dropdown empty, then get those depentdent dropdown through ajax like these:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
/*------------------------------------------
--------------------------------------------
Country Dropdown Change Event
--------------------------------------------
--------------------------------------------*/
$('#country-dropdown').on('change', function () {
var idCountry = this.value;
$("#state-dropdown").html('');
$.ajax({
url: "{{url('api/fetch-states')}}",
type: "POST",
data: {
country_id: idCountry,
_token: '{{csrf_token()}}'
},
dataType: 'json',
success: function (result) {
$('#state-dropdown').html('<option value="">-- Select State --</option>');
$.each(result.states, function (key, value) {
$("#state-dropdown").append('<option value="' + value
.id + '">' + value.name + '</option>');
});
$('#city-dropdown').html('<option value="">-- Select City --</option>');
}
});
});
/*------------------------------------------
--------------------------------------------
State Dropdown Change Event
--------------------------------------------
--------------------------------------------*/
$('#state-dropdown').on('change', function () {
var idState = this.value;
$("#city-dropdown").html('');
$.ajax({
url: "{{url('api/fetch-cities')}}",
type: "POST",
data: {
state_id: idState,
_token: '{{csrf_token()}}'
},
dataType: 'json',
success: function (res) {
$('#city-dropdown').html('<option value="">-- Select City --</option>');
$.each(res.cities, function (key, value) {
$("#city-dropdown").append('<option value="' + value
.id + '">' + value.name + '</option>');
});
}
});
});
});
</script>
and declare the routes that you will call in url in ajax
Route::post('etch-states', [DropdownController::class,
'fetchState']);
Route::post('fetch-cities', [DropdownController::class, 'fetchCity']);
In the controller do something like this:
public function fetchState(Request $request)
{
$data['states'] = State::where("country_id", $request->country_id)
->get(["name", "id"]);
return response()->json($data);
}
/**
* Write code on Method
*
* #return response()
*/
public function fetchCity(Request $request)
{
$data['cities'] = City::where("state_id", $request->state_id)
->get(["name", "id"]);
return response()->json($data);
}
I am trying to create/insert data into the database, but I am still getting an error for getting the data I've input. I tried using the dump and die method, and I encountered that no data is being gotten from the data that has been input. What could be wrong with my codes?
Here is the result of the inspected element
Click to see image
My Modal
<div id="modalAddChild" class="modal fade" tabindex="-1" aria-labelledby="modalAddChild">
#csrf_field
{{ method_field('PUT') }}
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h4 class="modal-title"><b>Add Child</b></h4>
<button type="button" class="btn btn-sm btn-secondary" data-bs-dismiss="modal">X</button>
</div>
<div class="modal-body">
<p><i>Note: In Weight, it is required to put (.) regardless if it is (.0).</i></p>
<p><i>Note: In Height, do not add (.) if it is (.0) but it is allowed to put (.) if it's any number.</i>
</p>
<form id="saveChild" method="post">
<div class="form-group row">
<div class="col-sm-6">
<label for="mothersname">Mother's Name:</label>
<input type="text" class="form-control" id="mothersname" name="mothersname" required>
</div>
<div class="col-sm-6">
<label for="childsname">Child's Name:</label>
<input type="text" class="form-control" id="childsname" name="childsname" required>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label>Indigenous:</label>
<select class="form-control" id="ind_id" name="ind_id" required>
<option value="">YES or NO</option>
#foreach ($indigenous as $key => $value)
<option id="{{ $key }}" value="{{ $key }}">{{ $value }}</option>
#endforeach
</select>
</div>
<div class="col-sm-6">
<label>Sex:</label>
<select class="form-control" id="sex_id" name="sex_id" required>
<option value="">M or F</option>
#foreach ($sex as $key => $value)
<option id="{{ $key }}" value="{{ $key }}">{{ $value }}</option>
#endforeach
</select>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label>Date of Birth:</label>
<input type="text" class="form-control" id="birthdate" name="birthdate"
placeholder="YYYY-MM-DD" required>
</div>
<div class="col-sm-6">
<label>Actual Date of Weighing:</label>
<input type="text" class="form-control" id="actualdate" name="actualdate"
placeholder="YYYY-MM-DD" required>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label>Weight(kg):</label>
<input type="text" class="form-control" id="weight" name="weight" required>
</div>
<div class="col-sm-6">
<label>Height(cm):</label>
<input type="text" class="form-control" id="height" name="height" required>
</div>
</div>
<div class="form-group row">
<div class="col-sm-6">
<label for="zone">Zone:</label>
<input type="text" class="form-control" id="zone" name="zone" required>
</div>
<div class="col-sm-6">
<label>Age in Months:</label>
<input type="text" class="form-control" id="ageinmonths" name="ageinmonths" required>
</div>
</div>
<div class="form-group">
<button type="submit" value="Submit" class="btn btn-flat btn-primary" id="saveBtn">Submit</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
My AJAX
<script type="text/javascript">
$('#saveChild').submit('click', function() {
var zone = $('#zone').val();
var mothersname = $('#mothersname').val();
var childsname = $('#childsname').val();
var ind_id = $('#ind_id').val();
var sex_id = $('#sex_id').val();
var birthdate = $('#birthdate').val();
var actualdate = $('#actualdate').val();
var weight = $('#weight').val();
var height = $('#height').val();
var ageinmonths = $('#ageinmonths').val();
var dataString="zone="+zone+"&mothersname="+mothersname+"&childsname="+childsname+"&ind_id="+ind_id+"&sex_id="+sex_id
+"&birthdate="+birthdate+"&actualdate="+actualdate+"&weight="+weight+"&height="+height+"&ageinmonths="+ageinmonths;
$.ajax({
type: "POST",
dataType: "JSON",
data: dataString,
url: "insert_child",
success: function(data) {
console.log(data);
if (data == "success"){
alert("Data successfully added!");
} else if (data = "failed") {
alert("ERROR IN FETCHING DATA!");
}
displayData();
}
});
return false;
});
$('#saveBtn').click(function() {
$('#modalAddChild').modal('hide');
});
$('#modalAddChild').on('hidden.bs.modal', function(e) {
$(this)
.find("input,textarea,select")
.val('')
.end()
.find("input[type=checkbox], input[type=radio]")
.prop("checked", "")
.end();
})
</script>
This old ajax is working before but I changed it to the ajax mentioned above but both of them are not working anymore.
My OLD Ajax
<script type="text/javascript">
$('#saveChild').submit('click', function() {
var zone = $('#zone').val();
var mothersname = $('#mothersname').val();
var childsname = $('#childsname').val();
var ind_id = $('#ind_id').val();
var sex_id = $('#sex_id').val();
var birthdate = $('#birthdate').val();
var actualdate = $('#actualdate').val();
var weight = $('#weight').val();
var height = $('#height').val();
var ageinmonths = $('#ageinmonths').val();
$.ajax({
type: "POST",
dataType: "JSON",
data: {
zone: zone,
mothersname: mothersname,
childsname: childsname,
ind_id: ind_id,
sex_id: sex_id,
birthdate: birthdate,
actualdate: actualdate,
weight: weight,
height: height,
ageinmonths: ageinmonths,
"_token": "{{ csrf_token() }}"
},
url: "insert_child",
success: function(data) {
alert("Data successfully added!");
displayData();
}
});
return false;
});
$('#saveBtn').click(function() {
$('#modalAddChild').modal('hide');
});
$('#modalAddChild').on('hidden.bs.modal', function(e) {
$(this)
.find("input,textarea,select")
.val('')
.end()
.find("input[type=checkbox], input[type=radio]")
.prop("checked", "")
.end();
})
</script>
well in your first line off java script you wrote:
$('#saveChild').submit('click', function()
this is wrong, the jquery submit event only gets a function, but you passed a 'click' event as well.
you should write it like this:
$('#saveChild').submit(function()...
I am trying to keep select option value selected during the edit. There I used javascript for the dynamic dependent dropdown list. But now I am facing a problem to keep option value selected during the edit. Would someone help me please to solve this problem? edit.blade.php -
<form class="form-material form-horizontal" action="{{ route('admin.commercial.orders.update', $order->id) }}" method="POST">
#method('PUT')
#csrf
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label class="col-md-12" for="name">Buyer Name: </label>
<div class="col-md-12">
<select class="form-control select2" name="name" id="buyerName">
<option value="">Select Buyer</option>
</select>
#if ($errors->has('name'))
<small class="error">{{ $errors->first('name') }}</small>
#endif
</div>
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label class="col-md-12" for="job_name">Job Name/Title: </label>
<div class="col-md-12">
<select class="form-control select2" name="job_name" id="jobName">
<option value="">Select Job</option>
</select>
#if ($errors->has('job_name'))
<small class="error">{{ $errors->first('job_name') }}</small>
#endif
</div>
</div>
</div>
</div>
</form>
And javascript for dependant dropdown-
<script type="text/javascript">
$(function () {
$(".select2").select2();
});
/** Dependent Dropdowns**/
$(function() {
dynamicDropdown('/admin/commercial/get-buyers', '#buyerName');
$('#buyerName').change(function() {
let url = `/admin/commercial/get-buyer-jobs/${this.value}`;
let target = '#jobName';
dynamicDropdown(url, target);
});
});
function dynamicDropdown(url, selector) {
$.get(url, function (data) {
let $select = $(selector);
$select.find('option').not(':first').remove();
let options = [];
$.each(data, function(index, item) {
options.push(`<option value="${item.id}">${item.name}</option>`);
})
$select.append(options);
});
}
</script>
My edit function is -
public function edit($id)
{
$order = BuyerOrder::find($id);
return view('admin.marchendaising.commercials.orders.edit', compact('order'));
}
Add this to the bottom of your javascript;
$("#buyerName").val("{{old('name')}}");
$("#jobName").val("{{old('job_name')}}");`
You may try this idea:
<select name="buyer">
#foreach(['buyer1', 'buyer2', 'buyer3'] as $buyer)
<option vlaue="{{ $buyer }}"{{ (old('buyer') == $buyer) ? ' selected' : '' }}>{{ $buyer }}</option>
#endforeach
</select>
OR
<select name="buyer">
#foreach(['buyer1', 'buyer2', 'buyer3'] as $buyer)
<option vlaue="{{ $buyer }}"{{ ($order->buyer == $buyer) ? ' selected' : '' }}>{{ $buyer }}</option>
#endforeach
</select>
I am doing sales of product in which I use AJAX to capture data based on a selection from a dropdown to another one. When I dynamically create a field it works only once i want it to work N number of time.
Here is my HTML & PHP Code:
<div class="row col-md-12 mrg-top-20">
<h4 class="card-title" style="color:#ff0033">Sales Details</h4><br>
<div class="col-md-12"></div>
<div class="row col-md-12" data-duplicate="add">
<div class="col-md-4">
<label>Select <strong>Installation Date</strong></label>
<div class="form-group">
<div class="timepicker-input input-icon form-group">
<i class="ti-time"></i>
<input type="text" name="ins_date" class="form-control datepicker-1" placeholder="Datepicker" data-provide="datepicker">
</div>
</div>
</div>
<div class="col-md-4" id="sel_dynamic">
<div class="form-group">
<label>Select <strong>Manufacturer</strong></label>
<select name="manu" id="manu" class="form-control" style="width:100%">
<option disabled="disabled" selected="selected">Select Manufacturer</option>
<?php
$data = mysqli_query($conn,"SELECT * FROM manufacturer_details");
while($itemcat = mysqli_fetch_array($data))
{
?>
<option value="<?php echo $itemcat['MANUFACTURER_ID']; ?>"><?php echo $itemcat['MANUFACTURER_NAME'];?></option>
<?php
}
?>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Select <strong>Modal</strong></label>
<select name="modal" id="modal" class="form-control" style="width:100%">
<option value="" selected disabled="disabled">Select Modal...</option>
</select>
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Ser<strong>ial</strong></label>
<input type="text" name="serial" placeholder="Enter Serial No" class="form-control">
</div>
</div>
<div class="col-md-4">
<label>Select <strong>AMC Start Date</strong></label>
<div class="form-group">
<div class="timepicker-input input-icon form-group">
<i class="ti-time"></i>
<input type="text" name="amc_date" class="form-control datepicker-1" placeholder="Datepicker" data-provide="datepicker" data-date-format="mm/dd/yyyy">
</div>
</div>
</div>
<div class="col-md-4">
<label>Select <strong>AMC End Date</strong></label>
<div class="form-group">
<div class="timepicker-input input-icon form-group">
<i class="ti-time"></i>
<input type="text" name="amc_edate" class="form-control datepicker-1" placeholder="Datepicker" data-provide="datepicker" data-date-format="mm/dd/yyyy">
</div>
</div>
</div>
</div>
<div>
<input type="button" id="add" data-duplicate-add="add" class="btn btn-info" value="+"/>
</div>
<div >
<input type="button" data-duplicate-remove="add" class="btn btn-info" value="-"/>
</div>
</div>
Here is My Js Script to Call Ajax Each Time
<script type="text/javascript">
$(document).ready(function()
{
$("#sel_dynamic").on("change","#manu",(function() //just try to use on change
{
var id = $("#manu").val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "ajax_modal.php",
data: dataString,
cache: false,
success: function(html)
{
$("#modal").html(html);
}
});
});
});
</script>
Here is my Ajax File
<?php
include('script/db.php');
if($_POST['id'])
{
$id=$_POST['id'];
$sql=mysqli_query($conn,"select * from modal_details where MANUFACTURER_ID='".$id."'");
?>
<option selected disabled="disabled">Select Modal Name</option>
<?php
while($row = mysqli_fetch_assoc($sql))
{
$id = $row['MODAL_ID'];
$data = $row['MODAL_NAME'];
echo '<option value="'.$id.'">'.$data.'</option>';
}
}
?>
Whenever I create a new field dynamically my AJAX is not working.
Try this :
<script type="text/javascript">
$(document).ready(function()
{
$(document).on('change','#manu',function()
{
var id = $("#manu").val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "ajax_modal.php",
data: dataString,
cache: false,
success: function(html)
{
$("#modal").html(html);
}
});
});
});
</script>
The comments made it clear that you are duplicating your form. I think you have duplicate IDs on your page and your jQuery event will not work anymore. An ID may only occur once.
Take a look here:
Clone form and increment
Add the class to select as shown below:
<select name="manu" id="manu" class="form-control manuClass" style="width:100%">
And use the below script
<script type="text/javascript">
$(document).ready(function()
{
$(document).on('change','.manuClass',function()
{
var id = $(this).val();
var dataString = 'id='+ id;
$.ajax
({
type: "POST",
url: "ajax_modal.php",
data: dataString,
cache: false,
success: function(html)
{
$(this).parent().parent().next().children().children("#modal").html(html);
}
});
});
});
</script>
I have this modal view :
<div class="modal fade" id ="myModal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<h4 class="modal-title">Delta Rom insert missed entries</h4>
</div>
<div class="modal-body">
<form class="form-horizontal">
<div class="form-group">
<label class="col-sm-2 control-label">Event:</label>
<div class="col-sm-10">
<select id="eventData" name="type" data-placeholder="Select"
class="form-control chosen-select">
<option value="Harvest">
Harvest Product Machine
</option>
<option value="Tara">
Tara Machine
</option>
</select>
</div>
</div>
<div id ="producttab" class="form-group">
<label class="col-sm-2 control-label">Product:</label>
<div class="col-sm-10">
<select name="harvest" id ="harvestData" data-placeholder="Select"
class="form-control chosen-select">
<?php
foreach ($this->datamodal['products'] as $value) {
echo '<option value = "' . $value->name . '">' . $value->name . '</option>';
}
?>
</select>
</div>
</div>
<div id ="tabmachines" class="form-group">
<label class="col-sm-2 control-label">Machine:</label>
<div class="col-sm-10">
<select name="machine" id ="machineData" data-placeholder="Select"
class="form-control chosen-select">
<?php
foreach ($this->datamodal['machines'] as $value) {
echo '<option value = "' . $value->name . '">' . $value->name . '</option>';
}
?>
</select>
</div>
</div>
<div id="impuritytab" class="form-group">
<label class="col-sm-2 control-label">Impurity:</label>
<div class="col-sm-10">
<input name="impurities" type="text" class="form-control" id="inputimpuritiesData"
placeholder="Impurities">
</div>
</div>
<div id ="humiditytab" class="form-group">
<label class="col-sm-2 control-label">Humidity:</label>
<div class="col-sm-10">
<input name="humidity" type="text" class="form-control" id="humidityAData"
placeholder="Humidity">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="saveModal" type="button" value="submit" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
And I got 2 types of events with value Harvest or Tara, depending on the event selected I show some particular div's like this:
$('#eventData').change(function() {
opt = $(this).val();
if (opt=="Tara") {
$("#producttab").hide();
$("#impuritytab").hide();
$("#humiditytab").hide();
}else if (opt == "Harvest") {
$("#producttab").show();
$("#impuritytab").show();
$("#humiditytab").show();
}
});
I have a ajax that will submit that form:
function onAddMissedEntryInfoClicked(entryId) {
var currentEntryId = entryId;
$('#myModal').modal('show'); //this load modal view
$("#saveModal").unbind( "click");
$('#saveModal').bind('click', function(){
var event = $('#eventData').val();
var product = $('#harvestData').val();
var machine = $('#machineData').val();
var impurities = $("#inputimpuritiesData").val();
var humidity = $("#humidityData").val();
var dataJson = {
"eventid":currentEntryId,
"event": event,
"product": product,
"machine": machine,
"impurities": impurities,
"humidity":humidity
};
$.ajax({
type: 'POST',
url: "Monitor/thisUpdate",
data: dataJson,
success: function (data) {
console.log(data);
},
error: function (XMLHttpRequest, textStatus, errorThrown) {
alert(textStatus);
}
});
$('#myModal').modal('hide');
});
}
My problem is that when I'm on the Machine option, I will see only the tabmachines id field (that is good) but when I submit I will send all form values including the fields that I was hiding in my jQuery. I want to only send the forms on the select option, in my case only send machine values. How I can make my ajax data in a dynamic way? Thank you!
You can add an if clause in your onAddMissedEntryInfoClicked and create a different json object according to the event data.
if (event==="Harvest") {
var dataJson = {
"eventid":currentEntryId,
"event": event,
"machine": machine
};
}
else if (event==="Tara") {
var dataJson = {
"eventid":currentEntryId,
"event": event,
"product": product
"impurities": impurities,
"humidity":humidity
};
}