We Keep Coding

How to fill the value and set upon success:function using name object

I am trying to make autofill, so when user select the item, it will put the value into the input field, but nothing change. I am using the name instead of id.
It work if I do like below.
$(document).on('change', '[name="item_media[]"]', function(){
var itemID = $(this).val();
var itemType = 1;
$(this).parents('.body-media').find('[name="value_media[]"]').val(0);
$(this).parents('.body-media').find('[name="unit_media[]"]').val();
});
But What I am trying to do is here, seem on the success:function do not work. When I try to console all the data is there
$(document).on('change', '[name="item_media[]"]', function(){
var itemID = $(this).val();
var itemType = 1;
if(itemID){
$.ajax({
type:'POST',
url:'?syspath=ajax&controller=ajax&action=getActItemDose',
data: { 'itemId': itemID, 'itemType': itemType },
success:function(data){
var object = JSON.parse(data);
var value = object.itemValue;
var unit = object.itemUnit;
$(this).parents('.body-media').find('[name="value_media[]"]').val(value);
$(this).parents('.body-media').find('[name="unit_media[]"]').val(unit);
}
});
}else{
$(this).parents('.body-media').find('[name="value_media[]"]').val(0);
$(this).parents('.body-media').find('[name="unit_media[]"]').val();
}
});
This is how I made my html section
<fieldset>
<div class="input-group body-media">
<select class="form-select" id="basicSelect" name="item_media[]" required>
<option value="">Please Select</option>';
foreach($treat as $item_media){
$id = $item_media['media_treat_id'];
$name = $item_media['media_treat_brand'];
echo "<option value='$id'>$name</option>";
}
echo'
</select>
<input type="text" class="form-control" name="value_media[]" placeholder=Input amount use" aria-label="Amount"/>
<select class="form-select" id="basicSelect" name="unit_media[]" required>
<option value="">Select unit</option>
<option value="2">g</option>
<option value="3">ml</option>
<option value="7">unit</option>
</select>
</div>
</fieldset>

Data In Input Box Not Going to JavaScript var

Good day! I want to write an ajax request passing two variables to the controller. The problem is that I cannot get the values from the textboxes to my JavaScript
This is the JavaScript and the HTML code.
When I alert the day variable I get nothing it shows that the field is empty. I am very new to programming
$('#historic_form').submit(function(e) {
e.preventDefault();
var fund_id = $(this).val();
var day = $(this).val();
//data = $('#historic_form').serialize();
$.ajax({
url:'Search/Searchday',
type: 'POST',
dataType:'json',
data: {fund_id: fund_id, day: day},
error: function() {
alert(day);},
success: function(response) {
$("tbody").append("<tr><td>"+title+"</td><td>"+description+"</td></tr>");
}
});
});
And below are my HTML Codes
<select required id="member_id" name="member_id" class="form-control">
<option selected disabled>Select Member</option>
<?php for ($i=0;$i<$fMembers->num_rows();$i++){
echo "<option value='".$fMembers->row($i)->id."'>".$fMembers->row($i)->member_name."</option>";}?>
</select>
<select required class="form-control" id="fund_id" name="fund_id">
<option selected disabled>Select Fund</option>
</select>
<input type="date" required name="day" placeholder="Select a date" class="form-control datepicker hasDatepicker" data-dateformat="dd/mm/yy" id="histDate">

$('#historic_form').submit(function(e) {
Your event handler is triggered by a form submission, so inside the function this will refer to the <form>.
var fund_id = $(this).val();
var day = $(this).val();
<form> elements don't have values. You need to find() the <select> element you want to read the value from and call val() on that.

How to show selected value using javascript in laravel

i want to show the selected value to the select option, the value actually selected but cannot show that value on select option form.
for example i have a 3 value it can be choose is anyaman, cendana, and bakulan. when 1 edit that form with value cendana, the showed value is the first sequence (anyaman) but when i open that select option that focused on the true data value (cendana).
This is HTML Script :
<div class="mb-1">
<label class="form-label" for="user-role">Asal Kelompok</label>
<select id="editkelompok_id" name="kelompok_id" class="select2 form-select">
<option disabled="" value=""> <b> Pilih asal kelompok </b></option>
#foreach($kelompok as $data)
<option value="{{$data->id}}">{{$data->nama_desa}} - {{$data->nama_kelompok}} </option>
#endforeach
</select>
</div>
The Controller
public function detaildataanggota($id)
{
$status = anggota::findOrfail($id);
return $status;
}
Java Script
<script type="text/javascript">
function detaildataanggota(id){
$.ajax({
url: "{{url('admin/pendataan/dataanggota/detail')}}" + "/" + id,
dataType: "json",
success: function(status) {
$('#editid').val(status.id);
$('#editnama_anggota').val(status.nama_anggota);
$('#editnik').val(status.nik);
$('#editjabatan').val(status.jabatan);
$('#editjenis_kelamin').val(status.jenis_kelamin);
$('#edittanggal_lahir').val(status.tanggal_lahir);
$('#editalamat').val(status.alamat);
$('#editkelompok_id').val(status.kelompok_id);
},
});
}
</script>
The problem is on #editkelompok_id

Try this
let select = $('#editkelompok_id');
select.on('change',()=>{
// Your stuff
})
or
let options = $('#editkelompok_id').children();
options.each(function() {
let option = $(this);
option.on('change', () => {
select.val(option.val());
})
})
I hope it was useful

Autofill textbox from database based on change of dropdown list value

My jsp page has a select box with all userIds. And I have two text boxes for username and Data of birth. I want to autofill the textboxes when I select a userid from dropdown list.
I have a separate Servlet class and Database class for querying.
How to automatically the textboxes when I select userid from dropdown ? And i want this textboxes to be not editable. Can someone provide me example code.

This JS Fiddle showing how to implement it:
var $select = document.getElementById('slct'),
$un = document.getElementById('un'),
$dob = document.getElementById('dob'),
val, arr, username, dob;
// usually this array is obtained from a server response
arr = [
usr1 = ['user1', 'dob1'],
usr2 = ['user2', 'dob2'],
usr3 = ['user3', 'dob3'],
usr4 = ['user4', 'dob4']
];
$select.addEventListener('change', function(){
val = this.value - 1; // because arrays start at 0.
username = arr[val][0];
dob = arr[val][1];
$un.value = username;
$dob.value = dob;
});
<select id="slct">
<option></option>
<option value="1">id 1</option>
<option value="2">id 2</option>
<option value="3">id 3</option>
<option value="4">id 4</option>
</select>
<input type="text" id="un" disabled>
<input type="text" id="dob" disabled>

Show/Hide div send all data to database

I have this show/hide div. And I am running into couple issues. I am using CodeIgniter by the way.
First : When I select real-estate the div shows. But if I select Service, the real-estate div won't hide. (Service has no div).
Second : If I select real-estate and fill out the form, and I change my mind and select automobile and fill out the form then send to database, I get all the fields from real-estate and automobile into my database. Which is not what I want.
Third : Is there a different approach if I wanna add more categories and more divs show/hide?
<select id="catid_1" name="catid_1">
<option value=""></option>
<option value="5">Real-Estate</option>
<option value="8">Automobile</option>
<option value="10">Service</option>
</select>
<!--Auto-->
<div id="8" class="forms">
Energie :
<select name="energy">
<option></option>
<option value="Gasoline">Gasoline</option>
<option value="Diesel">Diesel</option>
<option value="GPL">GPL</option>
<option value="Electric">Electric</option>
<option value="Hybrid">Hybrid</option>
</select><br />
Transmission :
<select name="tans">
<option></option>
<option value="Manuel">Manuel</option>
<option value="Automatic">Automatic</option>
</select><br />
Miles :
<input type="text" name="mile"/><br />
Year :
<input type="text" name="year"/><br />
</div>
<!--Realestate-->
<div id="5" class="forms">
Room :
<input type="text" name="room"/><br />
Surface :
<input type="text" name="surface"/><br />
</div>
<!--End Tech-->
$(function() {
$(".forms").hide();
$("#catid_1").change(function() {
var e = $(this).val();
if(e == '8' || e == '5') {
$(".forms").hide().parent().find('#' + e).show().addClass('form-active');
}
});
// Bind to the submit
$('#submit').click(function(e){
e.preventDefault();
// Parse the data only for the displayed div.
var resolve_data = function() {
var output = {};
// Here you place the acceptable fields.
$('.form-active input, .default input').each(function() {
output[$(this).attr('name')] = $(this).val();
});
return output;
};
// Submit the form here.
$.ajax({
url: '/echo/json/',
type: 'POST',
dataType: 'json',
data: resolve_data(),
beforeSend: function(xhr, settings){
// Before sending, check the data.
alert(settings.data);
},
complete: function(xhr, textStatus) {
//called when complete
},
success: function(data, textStatus, xhr) {
//called when successful
},
error: function(xhr, textStatus, errorThrown) {
//called when there is an error
}
});
});
});

first: service show/hide is not working because you're putting a conditional on the ID:
if(e == '8' || e == '5') { // <<-- remove this conditional
$(".forms").hide().parent().find('#' + e).show().addClass('form-active');
}
second: When you're doing your update, check the value of the drop down box and only update the fields that belong to that choice. Your form should be sending along the value of the option, so that's not to hard to do. For instance, if the select value is 5, only update the room and surface fields in your database. Don't try to clear the form when switching choices, it's safer to do this in the back end.
If you insist on doing it front end, put an actual form in there and .reset() it when changing options.
third: probably, but this seems OK no? Are you not happy with it?
http://jsfiddle.net/zf9BN/1/