Develop Reference

How to display data in textbox from database MySQL based on selected option?

I have a table "tb_seri" in MySQL, with columns "id_seri", "nm_seri" and "value_seri"
So, I want to select "nm_seri" in the select option, and then "value_seri" will appear in the textbox afterwards based on "nm_seri" selected
Here is the code to select "nm_seri" from the database
<select name="nm_seri" id="nm_seri" onchange="myfunction()" required>
<option disabled selected>-Pilih Seri-</option>
<?php
$qu="Select DISTINCT nm_seri from tb_seri";
$res=$koneksi->query($qu);
while($r=mysqli_fetch_row($res))
{
echo "<option data-value='$r[1]' value='$r[0]'> $r[0] </option>";
}
?>
</select>
And I've tried various codes from here, but I'm still confused.
And this textbox code to display "value_seri"
<input type="text" name="value_seri" id="value_seri" value="" disabled><br></td>
<script>
function myFunction()
{
var value_seri = $('#value').find(':selected').data('nm_seri');
$('#value').val(value_seri);
}
</script>

In your current js code there is no value it should be nm_seri .Then , you are getting data attribute using data('nm_seri') it should be data('value') and show this value inside input box using $('#value_seri').val(value_seri); .Also ,your function name should match with onchange="myfunction()" so change that as well.
Demo Code :
function myfunction() {
var value_seri = $('#nm_seri').find(':selected').data('value');
$('#value_seri').val(value_seri);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select name="nm_seri" id="nm_seri" onchange="myfunction()" required>
<option disabled selected>-Pilih Seri-</option>
<option data-value='1' value='soemthing'> soemthing</option>
<option data-value='2' value='soemthing2'> soemthing2</option>
<option data-value='3' value='soemthin3g'> soemthing3</option>
</select>
<input type="text" name="value_seri" id="value_seri" value="" disabled><br>

change dropdown selected value based on textbox value in jquery

I have a textbox and selected option list of 4 options like below...
<select id="select2" class="form-control">
<option value="pre">Pre</option>
<option value="rep" selected="selected">Rep</option>
<option value="new">New</option>
<option value="dec">Dec</option>
</select>
and a textbox where user input some keywords and based on keywords i want to change selected option in above option list
<td id="fpv_col1" contenteditable="">decorating and repair work</td>
main value for selction comes from php and ajax based on user input
so i just want to set selected value in above option list
below is my jquery code
$(document).on('keyup', '#fpv_col1', function(event) {
var desc_text = $(this).text();
$.ajax({
url: 'php/fpv_lbyl_prediction.php',
type: 'POST',
data:{
value1:desc_text,
},
dataType:'text',
success: function(data){
$("#error_msg").fadeIn();
$("#error_msg").html("<strong>Success!</strong> "+data);
//$('select#select2 option').removeAttr('selected');
//$('select#select2').find('option[value='+data+']').attr("selected",true);
$('select#select2 option').removeAttr('selected').filter('[value='+data+']').attr('selected', true);
}
});
event.preventDefault();
});
my jquery code works fine, it set selected option but not displaying selected option, it saw using inspect

$(document).ready(function() {
$('#otherCategory').keyup(function() {
if ($(this).val() == 0) {
$('#category').val(1);
} else if ($(this).val() > 0) {
$('#category').val(2);
} else {
$('#category').val(0);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select id="category" name="category">
<option value="0">Please select</option>
<option value="1">Clear</option>
<option value="2">UnClear</option>
</select>
<input type="text" id="otherCategory" name="otherCategory">

How could I send a value to MYSQL from a dropdown selection without refresh page and without click the "send" button?

In a PHP page I have a simple selection with some values like this:
<div class="container">
<section>
<select>
<option value="" disabled selected>Select an activity</option>
<option value="1">1</option>
<option value="2">2</option>
...
</select>
</section>
</div>
I have a database MYSQL to store the choiced value like this:
table name=user_favorite with 2 columns respectively called items and values
itemsvalues
item1 value1
item2 value2
etc.
When a user select an item from the dropdown list I wish to send automatically to MYSQL the value chosen (inside the values column) without click on a send button.
Is it possible and how to achieve?

As #NishantSolanki said, you should use Ajax. Here an example using jQuery.
HTML FILE:
<div class="container">
<section>
<select id="options">
<option value="" disabled selected>Select an activity</option>
<option value="1">1</option>
<option value="2">2</option>
</select>
</section>
</div>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#options").on("change", function(){ //listen when the option change
var optionValue = jQuery(this).val(); //get the new value
$.ajax({
url: "fileWhichSaveTheValue.php", //php file which recive the new value and save it to the database
data: { "newValue": optionValue }, //send the new value
method: "POST" //use POST method
});
});
});
</script>
PHP FILE:
$newValue = $_POST["newValue"]; //if you used POST method on the javascript, you have to use $_POST here to get the data
//HERE YOUR MYSQL CONNECTION AND YOUR QUERY FOR SAVING THE VALUE

Use onchange event on select
<?php
if($_POST){
$item = $_POST['item'];
$link = mysql_connect('host', 'username', 'password');
mysql_select_db('database_name', $link);
//write your sql query to enter into table
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script>
<div class="container">
<section>
<select onchange="save_record(this.value);">
<option value="" disabled selected>Select an activity</option>
<option value="1">1</option>
<option value="2">2</option>
...
</select>
</section>
</div>
<script type="text/javascript">
function save_record(item){
//call an ajax here to post item
$.post( "your_php_page_name.php",
{item:item},
function( data ) {
// do something after ajax result
});
}
</script>
On your php page you can retrieve post data by $_POST variable

How to send 2 select box dynamically generated values via ajax to get 3rd select box values

I'm trying to get 3rd select box values according to first 2 select box selection (dynamic values);
jQuery ajax code is (It only works with airport select box)
$("#airport").change(function() {
var aid=$(this).val();
var dataString = 'aid='+ aid;
$.ajax
({
type: "POST",
url: "booking/findcompany.php",
data: dataString,
cache: false,
success: function(data) {
$("#company").html(data);
}
});
});
<select name="site" id="site" class="site">
<option value="" selected="selected">Select</option>
<option value="1">Site One</option>
<option value="2">Site Two</option>
<option value="3">Site Three</option>
</select>
<select name="airport" id="airport" class="airport">
<option value="1">Airport One</option>
<option value="2">Airport Two</option>
<option value="3">Airport Three</option>
</select>
<select name="company" id="company" class="company">
//Options here based on above 2 selected values
</select>
PHP code is findcompany.php
<?php
if($_POST['aid']) {
$aid=$_POST['aid'];
$site=$_POST['sid']; <<<<<< How Can I pass This ID
$compsql=mysql_query("select * from tbl_company Where air_id='$aid' and site_id='$sid'");
while($rows=mysql_fetch_array($compsql)){
$cid=$rows['comp_id'];
$cdata=$rows['comp_title'];
?>
<option value="<?php echo $cid; ?>"><?php echo $cdata; ?></option>
<?php } } ?>

use $('#site').val() to get the value of the 1st select box, and then add it to your dataString. So now your js code would look like -
$("#airport").change(function()
{
var aid=$(this).val();
var sid=$('#site').val();
var dataString = 'aid='+ aid +'&sid='+sid;
...

Jquery chosen plugin doesn't Work in ajax response

I have two select box. and I want to apply chosen plugin in both select box.
When No-1 Select box change then No-2 select box generate from AJAX response.
Chosen Plugin in No-1 work perfectly. But When No-2 select box generate from ajax then chosen plugin doesn't work in No-2 select box.
main.php
<tr>
<td>Select Location</td>
<td>
<select id="issue_type" name="issue_type" class="chosen-select">
<option value="" disabled="disabled" selected="selected">Select Location</option>
<option value="17">RM Store</option>
<option value="17">PM Store</option>
<option value="17">FG Store</option>
</select>
</td>
</tr>
<tr id="tr_product" name="product">
<td>Select Product</td>
<td></td>
</tr>
JS code for ajax
$('#location').change(function(){
if(this.value){
$('#td_avail_qty').html('');
$.ajax({
type:"GET",
url:"mat_issue.php",
data:{action:"ajax",sub_action:"location",location:this.value}
}).done(function(data){
$('tr#tr_product').show().children().eq(1).html(data);
});
}
});
mat_issue.php
$product_str = '<select id="product" name="product" class="chosen-select">
<option value="" disabled="disabled" selected="selected">Select Product</option>';
$location = $req['location'];
$sql_product = "SELECT l.`loccode`, l.`stockid`, l.`quantity`,s.description FROM `locstock` l INNER JOIN stockmaster s ON l.stockid = s.stockid WHERE l.`loccode` = '$location' AND l.`quantity` > 0";
if($query_fg = DB_query($sql_product,$db)):
while($data_product = DB_fetch_assoc($query_fg)):
$product_str .= '<option title="Available Quantity '.$data_product['quantity'].'" value="'.$data_product['stockid'].'">'.$data_product['description'].'</option>';
endwhile;
endif;
$product_str .= '</select>';
echo $product_str;
No-2 Select box generate from ajax successfully. But chosen plugin doesn't work in this select box.
I use this code for chosen plugin
var config = {
'.chosen-select' : {},
'.chosen-select-deselect' : {allow_single_deselect:true},
'.chosen-select-no-single' : {disable_search_threshold:10},
'.chosen-select-no-results': {no_results_text:'Oops, nothing found!'},
'.chosen-select-width' : {width:"95%"}
}
for (var selector in config) {
$(selector).chosen(config[selector]);
}
And I use .chosen-select class in my select box

pass your chosen jquery function in your ajax success function...
may be this can help you out..
$('#location').change(function(){
if(this.value){
$('#td_avail_qty').html('');
$.ajax({
type:"GET",
url:"mat_issue.php",
data:{action:"ajax",sub_action:"location",location:this.value}
}).done(function(data){
$('tr#tr_product').show().children().eq(1).html(data);
$("#product").chosen({max_selected_options: 5}); //your chosen code for select tag
});
}
});
let me know if you face any other problem....

You need to load chosen after you have finished loading data in the select tag, Look at my snippet below
<script>
$('#subject_id').on('change',function(e){
var subject_id = e.target.value;
$.get('/ajax_subject_finder/'+subject_id,function(data){
$('#subject_paper_id').empty();
$('#subject_paper_id').append("<option></option>");
$.each(data,function(index,subObject){
$('#subject_paper_id').append("<option value="+subObject.id+">"+subObject.number+"</option>");
});
$('#subject_paper_id').chosen();
});
});