We Keep Coding

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

I am trying get price of specific product using ajax call. so far i had tried this. but i am not getting the price after selecting product

my blade.php
<select name="productname[]" class="form-control productname">
<option value="0" selected="true" disabled="true">Select Product</option>
#foreach ($stock as $product)
<option value="{{$product->id}}">{{$product->productname}}</option>
#endforeach
</select>
user select product from here and i want ptice input feild auto-filled.
<td><input type="text" name="price[]" class="form-control price"></td>
using this javascript
$('tbody').delegate('.productname','change', function(){
var tr=$(this).parent().parent();
var id = tr.find('.productname').val();
var dataId={'id':id};
$.ajax({
type : 'GET',
url : "{{route('findprice')}}",
dataType: 'json',
data : dataId,
success:function(data){
tr.find('text.price').val(data[0].price);
}
});
});
and in my controller I am using this thing.
public function findprice(Request $request)
{
$data = Stock::where('price')->where('id',$request->id)->first();
return response()->json($data);
}
anyone who can help me out.

You have a mistake in query. Add this
$data = Stock::select('price')
->where('id',$request->id)
->first();
You placed 'where' instead of 'select'

Access the label text of a datalist option using jquery

I am filling a data-list in html using data from a Json . The options are being appended to the data-list with the value and label text . on click of an option , I want the value and the text to be inserted into a form text field .
The value of the option can be accessed and is successfully inserted into the text field. But I am not able to access the label of the option to insert it.
I have tried using $(this).innerhtml(); , $(this).text(); , $(this).label(); , $(this).innerhtml(); and so on..
all of which turned out to return null value (undefined) instead of the required string.
$(document).ready(function ()
{
$.ajax({
type: 'POST',
url: '#Url.Action("MyJsonFunction")',
datatype: 'json',
success: function (data) {
$.each(data, function (index, data) { $("#myid1").append("<option value='"+data.Value+"'label='"+data.Text+"'></option > ");})},
error: function ()
{
alert("Something went wrong!");}});
$("#myid2").change(function ()
{
var s = $(this).val();
var d = $(this).html();
alert(d);
$("#input1").val(s);
$("#input2").val(d);
});
});
The value of the option is being inserted to the input text field but the label of the option is null when i try to access it .
when i alert it , it displays either an empty string or "undefined" .

$('body').on('change','#myid1',function(){ alert( $(this).find(':selected').attr('label') ) });
Please try this code. I am sure this will work

Try this solution.you have to make any one option as selected, because on form load,none of your options are selected and it will surely alert as undefined.
$(document).ready(function ()
{
$("#colors").trigger('change');
});
$("#colors").change(function () {
var d = $('#colors').find("option:selected").val();
alert(d);
$('#selvalue').val(d);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<label for="color">Favorite Color</label>
<input list="colors" name="color">
<datalist id="colors">
<option selected=selected value="Green">
<option value="Red">
<option value="Blue">
<option value="Yellow">
<option value="Orange">
</datalist>
<input type='text' id='selvalue' placeholder='Display seleted value'/>

select disabled not passing selected value to the php code [duplicate]

This question already has answers here:
$_POST for disabled select
(4 answers)
Closed 3 years ago.
I am having a one page activity code, where I can submit a new data and fetch the previous data on the same page. Whenever i fetch the data i mark select disable by js code. But the fetched data will not submitted to database, because it is disabled. I want to save the data of disabled dropdown.
<input type="hidden" name='same_as_select' value=""/>
JS Code :
function getData(val)
{
var myLength = $("#mob_1").val();
$.ajax({
type: "POST",
url: "test.php",
dataType: "json",
data:'dt='+val,
success: function(data){
console.log(data);
var len = data.length;
if(len > 0){
var id12 = data[0]['id12'];
var id13 = data[0]['id13'];
document.getElementById('category').value = id12;
document.getElementById('source').value = id13;
if(id13!='DID NOT PROVIDE')
{
$('#source').attr("disabled", "disabled").value;
$('#category').attr("disabled", "disabled").value;
}
else
{
$('#source').removeAttr("disabled");
$('#category').removeAttr("disabled");
document.getElementById('category').value = '';
document.getElementById('source').value = '';
}
}
}
});
}
HTML:
<input type="number" name="mob_1" ID='mob_1' value="" onchange="getData(this.value);" />
<select name="category" id="category">
<option value="" class="1">--SELECT--</option>
<option value="NEWSPAPER">NEWSPAPER</option>
<option value="ONLINE">ONLINE</option>
</select>
<select name="source" id="category">
<option value="" class="1">--SELECT--</option>
//THIS SOURCE COMING FROM DATABASE BY CATEGORY SELECTION
</select>
In php query it shows category='',source='' because it is disabled

First of all, you have two different elements with the same ID (category) - fix it.
Second, to get the data from the disabled selection boxes use the following (here is example for the category selection):
var categorySelection= document.getElementById('category')
var categoryValue = categorySelection.options[categorySelection.selectedIndex].value;
and use categoryValue where you need to.

HTML Input field value set by AJAX and catch that event

I have field in my html, and some third-party service will set it's value.
How could I catch that event when the field value is changing?
<input data-val="true" data-val-length="City cannot be longer than 30 characters." data-val-length-max="30" data-val-required="City is required." id="Address_City" maxlength="30" name="Address.City" type="text" value="">
How could I catch the value change of this field,
I've tried .change event also,
$('#Address_City').on('change', function() {
console.log("Changed");
});

Use change event.
$("#myTextBox").on("change", function() {
//alert($(this).val());
});

<select name="user_id" id="user_id" class="form-control" onchange=get_contact(this.value)>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" class="form-control" name = "contact_mob" id="contact_mob" placeholder="Contact Number" value="" />
function get_contact(user_id) {
$.ajax({
type: "POST",
url: "search.php",
data: {
"user_id": user_id
},
dataType:'json',
success: function(data) {
// console.log(data.user_mobile);
$("#contact_mob").val(data.user_mobile);
// $("#replaceThis").append(responseData);
}
});
}

Please specify which control your using in your code.
You Can use change or keydown Event.
FOr Client Control
$("#TextBOXID").bind("keydown", function() {
if($("#TextBOXID")[0].value!="" && $("#TextBOXID")[0].value.length>0)
{}
});
For Server Control
$("#<%=TextBOXID.ClientID%>").bind("keydown", function() {
if($("#TextBOXID")[0].value!="" && $("#TextBOXID")[0].value.length>0)
{}
});

We are going to retrieve a value and set that value in an HTML form. First, let's create the form.
Form
<form method="POST" action="">
<select name="user_id" id="user_id" class="form-control">
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
<input type="text" class="form-control" name = "contact_mob" id="contact_mob" placeholder="Contact Number" value="" />
</form>
Now that we have a form, we will do the technical part using javascript and jQuery
Javascript/jQuery
// Wait for the dom to load before we start doing stuff
$(document).ready(function ($) {
// append value to input on change of the dropdown
$(document).on('change', '#user_id' , function () {
// Get selected value
var user_id = $(this).val();
$.ajax({
type: "POST", // Set ajax call type
url: "search.php", // Set url
data: {"user_id": user_id}, // Set an array of data
dataType:'json', // Set the data type
success: function(data) {
// Log response to console
console.log(data);
// Append data to input
$("#contact_mob").val(data.user_mobile);
}
});
});
});
That's all

I think I found some solution, I'm going to use a timer here, there will be some permanence issues.. but I couldn't find anything be
$('#Address_Address').on('change keyup paste click', function () {
$('.pcaautocomplete .pcaselected').click(function () {
var refreshInterval = setInterval(function () {
if ($('#State').val() != "") {
var statusVal = $('#State').val();
clearInterval(refreshInterval);
}
}, 100);
});
});