Change multiple input including text and select on change of datalist input

Dharmeshdhabu

New member
I have a datalist and a textbox. When I change data in list, textbox change accordingly. Now I wish same to happen with multiple input like textbox, textarea, dropdown select etc. I do not wish to use dropdown select instead of datalist. Please guide me. Below is my code.

Code:
<input list="ff" class="form-control " onfocus="this.value=''" onchange="this.blur();" name="ffs" id="ffs">
													
													<datalist id="ff">
													<?php $result = mysqli_query($conn, "SELECT * FROM Source where Medicines is not null order by Medicines asc"); ?>
														<?php while ($row = mysqli_fetch_array($result)) { 
														 echo'<option data-value="'. $row["Dose"].'" value="'. $row["Medicines"].'">';
														 
														}
														?>
														
															
													 
													</datalist>
													<script type="text/javascript">
														$("#ffs").on("change", function () {
										
									   var value = $('#ffs').val();
										  value = $('#ff [value="' + value + '"]').data('value');
										  $('#Dose').val(value);
										  
										
										});
														</script>

For example at present on changing "medicines", "dose" change accordingly. Now I wish that in other textarea "duration" also should change. Thanks
 
To achieve the desired functionality where multiple inputs (such as textbox, textarea, dropdown select, etc.) update dynamically based on the changes in the data list, you can modify your code as follows:

HTML:

htmlCopy code
<input list="ff" class="form-control" oninput="updateInputs(this.value)" name="ffs" id="ffs">
<textarea id="duration" class="form-control"></textarea>

<datalist id="ff">
<?php $result = mysqli_query($conn, "SELECT * FROM Source where Medicines is not null order by Medicines asc"); ?>
<?php while ($row = mysqli_fetch_array($result)) {
echo '<option data-value="'. $row["Dose"].'" value="'. $row["Medicines"].'">';
}
?>
</datalist>

JavaScript:

javascriptCopy code
function updateInputs(selectedValue) {
var value = $('#ff [value="' + selectedValue + '"]').data('value');
$('#Dose').val(value);
$('#duration').val(value); // Update the duration textarea with the same value
}

In this modified code, I've added a <textarea> element with the ID "duration" that will be updated along with the "Dose" input. The updateInputs() function is called on the oninput event of the "ffs" input. It retrieves the selected value from the input, updates the "Dose" input, and also sets the value of the "duration" textarea to the same value.

Note: Make sure you have included the jQuery library for the $ selector to work.
 
Back
Top