Develop Reference

How to transfer data from javascript to php with OnChange

im trying to get some data from a DropDown menu and i want to use that value when it change to make a Query in a secound DropDown but until now, i was unable to send the Value to my php with the javascript.
Im using this code:
<script type="text/javascript" language="javaScript">
function flow() {
var x = document.getElementById("txt_maq").value;
document.getElementById("demo").innerHTML = x;
var maq = document.getElementById('txt_maq').value;
var cat = document.getElementById('txt_catmaterial').value;
if (maq != "")
{
document.getElementById('txt_catmaterial').disabled=false;
}
if (cat == "")
{
document.getElementById('txt_material').disabled=true;
}
if (cat != "")
{
document.getElementById('txt_material').disabled=false;
}
}
</script>
<div class="col-2">
<div class="input-group">
<label class="label">Maq. Destino</label>
<div class="rs-select2 js-select-simple select--no-search">
<select id="txt_maq" name="txt_maq" onchange="flow()">
<option value="">Selecione</option>
<option value="E02">E02</option>
<option value="E03">E03</option>
<option value="E04">E04</option>
<option value="E05">E05</option>
<option value="E06">E06</option>
<option value="E07">E07</option>
<option value="E08">E08</option>
<option value="E04/E07">E04/E07</option>
<option value="E04/E08">E04/E08</option>
<option value="E03/E04">E03/E04</option>
<option value="E03/E07">E03/E07</option>
<option value="E04/E07/E08">E04/E07/E08</option>
<option value="E03/E07/E08">E03/E07/E08</option>
<option value="E07/E08">E07/E08</option>
<option value="E09">E09</option>
</select>
<div class="select-dropdown"></div>
</div>
</div>
</div>
</div>
<div class="row row-space">
<div class="col-2">
<div class="input-group">
<label class="label">Cat. Material</label>
<div class="rs-select2 js-select-simple select--no-search">
<select id="txt_catmaterial" disabled="true" name="txt_catmaterial" onchange="flow()">
<option value=""></option>
<?php
$maquina = $_POST['txt_maquina'];
$type_te = "";
if ($maquina == "E09"){
$type_te= "ET";
} else {
$type_te= "EP";
}
echo $type_te;
$selecione = "";
$consulta = "SELECT Cat_Material FROM cat_mat where TE = '".$type_te."' "; //código SQL
$resultado = mysqli_query($ligacao,$consulta);
while ($listar = mysqli_fetch_array($resultado)){
$catmat = $listar['Cat_Material'];
echo "<option value=".$catmat.">$catmat</option>";
}
?>
</select>
<div class="select-dropdown"></div>
</div>
</div>
</div>
</div>
All I try to do is make a If if the txt_maq is E09 so I can do the query in the txt_catmaterial but the value doesn't come from the javascript.

Use Ajax to send data from Javascript to PHP
function testEndpoint(){
$.ajax({
url: "https://path/to/your-php-script.php",
type: "POST",
crossDomain: true,
data: {"txt_maq": $("#txt_maq").val()},
dataType: "json",
error: function(xhr, status, error){
console.log("Error: " + error);
},
success: function(result, status, xhr){
console.log(result);
}
});
}
testEndpoint();
At your PHP script your-php-script.php
You can use txt_maq as a POST variable:
$useTxtMag = $_POST['txt_maq'];

The Ajax should be used after the jQuery is included or you can simply include the jQuery in your head element

Uncaught ReferenceError: $this is not defined ajax

I'm very new in javascript and ajax. i want to make dynamic select option list like this.
but there is error like this when i try to compile using google chrome developer (press F12).
here is my script :
<div class="container">
<div class="row">
<div class="col-md-offset-3 col-lg-6">
<h1 class="text-center">Ajax & Codeigniter Select Box Dependent</h1>
<div class="form-group">
<label for="country">Country</label>
<select class="form-control" name="country" id="country">
<option value="">Select Country</option>
<?php foreach ($countries as $country) : ?>
<option value="<?php echo $country->country_id; ?>"><?php echo $country->country_name; ?></option>
<?php endforeach; ?>
</select>
</div>
<div class="form-group">
<label for="pwd">Province:</label>
<select class="form-control" name="province" id="province" disabled="">
<option value="">Select Province</option>
</select>
</div>
</div>
</div>
<!-- /.row -->
</div>
<!-- /.container -->
<!-- jQuery Version 1.11.1 -->
<script src="http://code.jquery.com/jquery-1.11.1.js"></script>
<!-- Bootstrap Core JavaScript -->
<script src="<?php echo base_url() ?>assets/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#country').on('change',function(){
var country_id = $($this).val();
if(country_id == '')
{
$('#province').prop('disabled',true);
}
else
{
$('#province').prop('disabled',false);
}
});
});
</script>
</body>
</html>
if you know what wrong with my code, please help me.
Thanks

There is a typo, most probably:
$('#country').on('change',function(){
var country_id = $($this).val();
// ^ Remove this $ sign
...
})
Replace $($this) with $(this), because you didn't define $this. this (without $) is the context.
Also, as an improvement, you can remove the if and the repetitive code by doing:
$('#country').on('change',function(){
var country_id = $(this).val();
$('#province').prop('disabled', country_id == '');
});
Furthermore, you can do directly:
$('#country').on('change',function(){
$('#province').prop('disabled', this.value == '');
});

change this line
var country_id = $($this).val();
to
var country_id = $(this).val();

Try this
<script>
$(document).ready(function () {
$('#country').on('change', function () {
var country_id = $(this).val();
if (country_id == '') {
$('#province').prop('disabled', true);
}
else {
$('#province').prop('disabled', false);
}
});
});
</script>

How to select dropdown by inserting value in the text box

Hello i have a dropdown which is fetching data from a database. Forget about the database, i have a text box in front of the dropdown select. The logic is if i type in the text the value should be selected automatically from the dropdown if the value typed in the text not matched with the values in the dropdown, then the user can select the dropdown. Any help would be much appreciated.
Here is my html code!
<div class="form-group">
<label class="col-sm-4 control-label">Scheme**</label>
<div class="col-sm-4">
<select class="form-control" name="scheme" id="scheme">
<?php
for ($column = 'A'; $column <= $lastcol; $column++) {
echo '<option value="' . $column . '">' . $worksheet->getCell($column . '1')->getValue() . '</option>';
}
?>
</select>
</div>
<div class="col-sm-4">
<input type="text" class="form-control" id="txt_scheme" name="txt_scheme" placeholder="Or Type here">
</div>
</div>
In dropdown i m getting these values
QC code
Analyte
Assay Value
Assigned Value
STANDARDDEVIATION
ACCEPTABLEMIN
ACCEPTABLEMAX
Sample ID
Date

Try this code, then you can modified with your need.
$("#product").on("change keyup paste", function(){
var valuefound ='';
$("#platformid option").each(function(i){
if($(this).text().substring(0, 2).toLowerCase()==$("#product").val().substring(0, 2).toLowerCase() ){ valuefound = $(this).val(); } });
$('option:selected', 'select[name="platformid"]').removeAttr('selected'); $('#platformid option[value="' + valuefound + '"]').prop('selected', true); })
Working fiddle here https://jsfiddle.net/8xfqeb9y/

<label for="">Enter Value</label>
<input type="text" class="textVal">
<select name="" id="listItems">
</select>
var listItems = ["One","Two","Three","Four","Five","Six"];
for (var i = 0; i < listItems.length; i++) {
console.log(listItems[i]);
$("#listItems").append("<option>" + listItems[i] + "</option>")
}
$(".textVal").on("focusout",function(){
for (var i = 0; i < listItems.length; i++) {
console.log(listItems[i]);
if(listItems[i] == $(this).val()) {
$("#listItems").val($(this).val());
}
}
})

check now that values and texts are different and you can even select now by typing one
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#txtselect").keyup(function(){
$("#selbox > option").each(function() {
if($(this).text()==$("#txtselect").val())
{
$(this).attr('selected', 'selected');
}
});
});
});
</script>
</head>
<body>
<select id="selbox">
<option val="select">select</option>
<option val="123">one</option>
<option val="abc">two</option>
<option val="23sfd">three</option>
<option val="27345">four</option>
</select>
<input type="text" id="txtselect"/>
</body>
</html>
check this you will get solution run snippet and type "one"
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#txtselect").keyup(function(){
$("#selbox").val($("#txtselect").val());
});
});
</script>
</head>
<body>
<select id="selbox">
<option val="select">select</option>
<option val="one">one</option>
<option val="two">two</option>
<option val="three">three</option>
<option val="four">four</option>
</select>
<input type="text" id="txtselect"/>
</body>
</html>

Try this
<script type="text/javascript">
function getselected(elem)
{
var textvalue = $(elem).val();
if(textvalue != '')
{
$('select').removeAttr('disabled');
$('select option').removeAttr('selected');
$('select option').each(function(){
if ($(this).html().indexOf(textvalue) > -1)
{
$('select').val($(this).attr('value'));
}
});
}
else
{
$('select').val('');
$('select').attr('disabled','disabled');
}
}
</script>
<input type="text" name="name" value="" onkeydown="getselected(this)">
<select disabled="disabled">
<option value="">Select</option>
<option value="1">QC code</option>
<option value="2">Analyte</option>
<option value="3">Assay Value</option>
<option value="4">Assigned Value</option>
<option value="5">STANDARDDEVIATION</option>
<option value="6">ACCEPTABLEMIN</option>
<option value="7">ACCEPTABLEMAX</option>
<option value="8">Sample ID</option>
<option value="9">Date</option>
</select>

Fill select list with values depending on preselection

I want to have one select list populated with different values (price) depending on which option was chosen in other select list (sale or rent)
So what I have done is first create the arrays for sale and rent.
Then get the jquery and do an change event to pick which selection was made.
then a Switch statement that should populate the select list in question, but it is not showing anything. While jquery is a library for javascript I dont know if mixing them like I have done is alright:
$('#transaction').change(function(){
$value = $('#transaction').val();
var sale = [];
for (var i = 350000; i <= 2000000; i+100000) {
sale.push(i);
}
var rent = [];
for (var i = 500; i <= 6000; i+100) {
rent.push(i);
}
switch($value) {
case 'sale':
$.each(sale, function(key, value){
$('#price').append('<option value="' + index+ '">' + value + '</option>')
break;
case 'rent':
break;
}); // end of each
} // end of switch
}) ; //end of jquery snippet
<div class="row">
<div class="col-md-2 col-md-offset-1">
<div class="form-group">
{{Form::label('transaction', 'Transaction')}}
<select name="transaction" id="transaction" class="form-control">
<option value="select">Select</option>
<option value="sale">Sale</option>
<option value="rent">Rent</option>
<option value="holiday">Holiday</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
{{Form::label('price', 'Price')}}
<select name="price" id="price" class="form-control">
</select>
</div>
</div>

You dont have the options element in your select tag, so it never gets the $value from this statement :- $value = ('#transaction').val();
Insert the option tags and then run your example.

All credits go to Keith Wood (Sydney)
$(function() {
$('#transaction').change(function() {
var sale = [];
for (var i = 350000; i <= 2000000; i += 100000) {
sale.push(i);
}
var rent = [];
for (var i = 500; i <= 6000; i += 100) {
rent.push(i);
}
var option = $('#transaction').val();
var prices = (option === '1' ? sale : (option === '2' ? rent : []));
var options = '';
$.each(prices, function(key, value) {
options += '<option value="' + value + '">' + value + '</option>';
});
$('#price').html(options);
});
});
<div class="col-md-2 col-md-offset-1">
<div class="form-group">
{{Form::label('street', 'Transaction')}}
<select name="transaction" id="transaction" class="form-control">
<option value="0">Select</option>
<option value="1">Sale</option>
<option value="2">Rent</option>
<option value="3">Holiday</option>
</select>
</div>
</div>
<div class="col-md-2">
<div class="form-group">
{{Form::label('price', 'Price')}}
<select name="price" id="price" class="form-control">
</select>
</div>
</div>

Drop-down box dependent on the option selected in another drop-down box

I have 2 different SELECT OPTION in a form.
The first one is Source, the second one is Status. I would like to have different OPTIONS in my Status drop-down list depending on the OPTION selected in my Source drop-down.
Source:
<select id="source" name="source">
<option>MANUAL</option>
<option>ONLINE</option>
</select>
Status:
<select id="status" name="status">
</select>
Options:
- If Source is MANUAL, then Status is OPEN or DELIVERED
- If Source is ONLINE, then Status is OPEN or DELIVERED or SHIPPED
My non-working attempt:
<script>
$(document).ready(function () {
var option = document.getElementById("status").options;
if (document.getElementById('source').value == "MANUAL") {
$("#status").append('<option>OPEN</option>');
$("#status").append('<option>DELIVERED</option>');
}
if (document.getElementById('source').value == "ONLINE") {
$("#status").append('<option>OPEN</option>');
$("#status").append('<option>DELIVERED</option>');
$("#status").append('<option>SHIPPED</option>');
}
});
</script>

Try something like this... jsfiddle demo
HTML
<!-- Source: -->
<select id="source" name="source">
<option>MANUAL</option>
<option>ONLINE</option>
</select>
<!-- Status: -->
<select id="status" name="status">
<option>OPEN</option>
<option>DELIVERED</option>
</select>
JS
$(document).on('ready', function () {
$("#source").on('change', function () {
var el = $(this);
if (el.val() === "ONLINE") {
$("#status").append("<option>SHIPPED</option>");
} else if (el.val() === "MANUAL") {
$("#status option:last-child").remove();
}
});
});

I am posting this answer because in this way you will never need any plugin like jQuery and any other, This has the solution by simple javascript.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<script language="javascript" type="text/javascript">
function dynamicdropdown(listindex)
{
switch (listindex)
{
case "manual" :
document.getElementById("status").options[0]=new Option("Select status","");
document.getElementById("status").options[1]=new Option("OPEN","open");
document.getElementById("status").options[2]=new Option("DELIVERED","delivered");
break;
case "online" :
document.getElementById("status").options[0]=new Option("Select status","");
document.getElementById("status").options[1]=new Option("OPEN","open");
document.getElementById("status").options[2]=new Option("DELIVERED","delivered");
document.getElementById("status").options[3]=new Option("SHIPPED","shipped");
break;
}
return true;
}
</script>
</head>
<title>Dynamic Drop Down List</title>
<body>
<div class="category_div" id="category_div">Source:
<select id="source" name="source" onchange="javascript: dynamicdropdown(this.options[this.selectedIndex].value);">
<option value="">Select source</option>
<option value="manual">MANUAL</option>
<option value="online">ONLINE</option>
</select>
</div>
<div class="sub_category_div" id="sub_category_div">Status:
<script type="text/javascript" language="JavaScript">
document.write('<select name="status" id="status"><option value="">Select status</option></select>')
</script>
<noscript>
<select id="status" name="status">
<option value="open">OPEN</option>
<option value="delivered">DELIVERED</option>
</select>
</noscript>
</div>
</body>
</html>
For more details, I mean to make dynamic and more dependency please take a look at my article create dynamic drop-down list

function dropdownlist(listindex)
{
document.getElementById("ddlCity").options.length = 0;
switch (listindex)
{
case "Karnataka":
document.getElementById("ddlCity").options[0] = new Option("--select--", "");
document.getElementById("ddlCity").options[1] = new Option("Dharawad", "Dharawad");
document.getElementById("ddlCity").options[2] = new Option("Haveri", "Haveri");
document.getElementById("ddlCity").options[3] = new Option("Belgum", "Belgum");
document.getElementById("ddlCity").options[4] = new Option("Bijapur", "Bijapur");
break;
case "Tamilnadu":
document.getElementById("ddlCity").options[0] = new Option("--select--", "");
document.getElementById("ddlCity").options[1] = new Option("dgdf", "dgdf");
document.getElementById("ddlCity").options[2] = new Option("gffd", "gffd");
break;
}
}
*
State:
--Select--
Karnataka
Tamilnadu
Andra pradesh
Telngana
<div>
<p>
<label id="lblCt">
<span class="red">*</span>
City:</label>
<select id="ddlCity">
<!-- <option>--Select--</option>
<option value="1">Dharawad</option>
<option value="2">Belgum</option>
<option value="3">Bagalkot</option>
<option value="4">Haveri</option>
<option>Hydrabadh</option>
<option>Vijat vada</option>-->
</select>
<label id="lblCity"></label>
</p>
</div>

In this jsfiddle you'll find a solution I deviced. The idea is to have a selector pair in html and use (plain) javascript to filter the options in the dependent selector, based on the selected option of the first. For example:
<select id="continents">
<option value = 0>All</option>
<option value = 1>Asia</option>
<option value = 2>Europe</option>
<option value = 3>Africa</option>
</select>
<select id="selectcountries"></select>
Uses (in the jsFiddle)
MAIN.createRelatedSelector
( document.querySelector('#continents') // from select element
,document.querySelector('#selectcountries') // to select element
,{ // values object
Asia: ['China','Japan','North Korea',
'South Korea','India','Malaysia',
'Uzbekistan'],
Europe: ['France','Belgium','Spain','Netherlands','Sweden','Germany'],
Africa: ['Mali','Namibia','Botswana','Zimbabwe','Burkina Faso','Burundi']
}
,function(a,b){return a>b ? 1 : a<b ? -1 : 0;} // sort method
);
[Edit 2021] or use data-attributes, something like:
document.addEventListener("change", checkSelect);
function checkSelect(evt) {
const origin = evt.target;
if (origin.dataset.dependentSelector) {
const selectedOptFrom = origin.querySelector("option:checked")
.dataset.dependentOpt || "n/a";
const addRemove = optData => (optData || "") === selectedOptFrom
? "add" : "remove";
document.querySelectorAll(`${origin.dataset.dependentSelector} option`)
.forEach( opt =>
opt.classList[addRemove(opt.dataset.fromDependent)]("display") );
}
}
[data-from-dependent] {
display: none;
}
[data-from-dependent].display {
display: initial;
}
<select id="source" name="source" data-dependent-selector="#status">
<option>MANUAL</option>
<option data-dependent-opt="ONLINE">ONLINE</option>
<option data-dependent-opt="UNKNOWN">UNKNOWN</option>
</select>
<select id="status" name="status">
<option>OPEN</option>
<option>DELIVERED</option>
<option data-from-dependent="ONLINE">SHIPPED</option>
<option data-from-dependent="UNKNOWN">SHOULD SELECT</option>
<option data-from-dependent="UNKNOWN">MAYBE IN TRANSIT</option>
</select>

You're better off making two selects and showing one while hiding the other.
It's easier, and adding options to selects with your method will not work in IE8 (if you care).

I hope the following code will help or solve your problem or you think not that understandable visit http://phppot.com/jquery/jquery-dependent-dropdown-list-countries-and-states/.
HTML DYNAMIC DEPENDENT SELECT
<div class="frmDronpDown">
<div class="row">
<label>Country:</label><br/>
<select name="country" id="country-list" class="demoInputBox" onChange="getState(this.value);">
<option value="">Select Country</option>
<?php
foreach($results as $country) {
?>
<option value="<?php echo $country["id"]; ?>"><?php echo $country["name"]; ?></option>
<?php
}
?>
</select>
</div>
<div class="row">
<label>State:</label><br/>
<select name="state" id="state-list" class="demoInputBox">
<option value="">Select State</option>
</select>
</div>
GETTING STATES VIA AJAX
<script> function getState(val) { $.ajax({
type: "POST",
url: "get_state.php",
data:'country_id='+val,
success: function(data){
$("#state-list").html(data);
}
});} </script>
READ STATE DATABASE USING PHP
<?php require_once("dbcontroller.php"); $db_handle = new DBController();if(!empty($_POST["country_id"])) {
$query ="SELECT * FROM states WHERE countryID = '" . $_POST["country_id"] . "'";
$results = $db_handle->runQuery($query); ?> <option value="">Select State</option><?php foreach($results as $state) { ?> <option value="<?php echo $state["id"]; ?>"><?php echo $state["name"]; ?></option><?php } } ?>

for this, I have noticed that it far better to show and hide the tags instead of adding and removing them for the DOM. It performs better that way.

The answer should be updated to replace the defunct functions .change & .ready
$(document).on('ready',function() {
$("#source").on('change', function(){
var el = $(this);
if (el.val() === "ONLINE") {
$("#status").append("<option>SHIPPED</option>");
} else if (el.val() === "MANUAL") {
$("#status option:last-child").remove();
}
});
});