How to save selected dropdown item to database table - javascript

I have a dropdownlist that im fetching from my database and displaying in my php file as follows:
<script type="text/JavaScript">
//get a reference to the select element
var $select = $('#bananas');
//request the JSON data and parse into the select element
$.getJSON('http://127.0.0.1/folder/bananas.json', function(data){
//clear the current content of the select
$select.html('');
//iterate over the data and append a select option
$.each(data.allbananas, function(key, val){
$select.append('<option id="' + val.id + '">' + val.name + '</option>');
})
});
my html file
<select id="bananas" class="form-control">
<option value="">-- Select A Banana -- </option></select>
But i need user to select each banana from a form and when he or she submits it must be saved to a different table using php.How do i do this,seeing as the dropdownlist is coming from a json file?
Ajax solutions are also welcome.

What you need is:
on Select option change, update a table?
Try this..
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<select id="bananas">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
</select>
</body>
</html>
<script>
$("#bananas").change(function(){
// var option holds the selected option value whenever changed
var option = $("#bananas").val();
console.log(option);
/*
It would be better practice to add the data to a DB like mySQL and then generating a JSON file from there
However you can just send this information as you already wanted this way
*/
$.ajax({
url: './myphpfile.php',
data:
{
option:option
}
}).done(function(resp){
if(resp == 200) {
console.log("Success!");
}else if(resp == 0){
console.log("Failed..");
}
});
});
</script>

Related

jQuery add selected to option after post data

I add json data into option data-values
In action when I click on option, my jQuery code add data-values data to option list in #target using JSON.parse, each, and append methods.
$('#list').change(function() {
var response = JSON.parse($(this).find(':selected').attr('data-values'));
var len = response.length;
$("#target").empty();
$.each(response, function() {
$.each(this, function(name, value) {
$("#target").append("<option value='" + name + "'>" + value + "</option>");
});
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select id="list">
<optgroup label="Hardware">
<option value="5" data-values='[{"34":"500GB","35":"1TB","36":"2TB","37":"4TB"}]'>
HDD
</option>
<option value="11" data-values='[{"63":"Ardreno 650","64":"Adreno 640","65":"NVIDIA GeForce GTX 1650","66":"NVIDIA GeForce GTX 1080","67":"NVIDIA GeForce GTX 2070","68":"NVIDIA GeForce GTX 2080"}]' selected="selected">
Graphics
</option>
</optgroup>
</select>
<select id="target"></select>
Now, in create page my code work true, But I have a big problem in post back. When I send data to my php controller and my controller return any error, I need to add old select data (send data) into #target list. Actually I need to auto load #target list on page load if #list option is selected and add selected to #target option list.
Worked demo
Doesn't work demo (add selected to option)
Try this: $('#list').trigger('change');

Update variable in JS based on selected option from dropdown

I have this dropdown, where I want to change the variable in my js script based on which option is selected. The variable is send to another function which updates the page.
My html file:
//My JS function that is trying to access the data from the dropdown
function updateDD(){
$(".sheetnameSelect").change(function(){
return $(this).find(":selected").text()
})
}
//I want to use that function to update another variable based on selected option
var selected = updateDD()
alert(selected)
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class='sheetnameSelect'>
<option value="Cars">Cars</option>
<option value="Homes">Homes</option>
<option value="Planes">Planes</option>
</select>
However the function updateDD() is not returning the selected option (both when the pages loads or when I select different option)
You might not need to return the value, you can call the method whenever there is a change in select:
$(".sheetnameSelect").on('change', function() {
var selected = $(this).val();
createTable(selected);
});
function createTable(value) {
console.log(value);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<select class='sheetnameSelect'>
<option value="Cars">Cars</option>
<option value="Homes">Homes</option>
<option value="Planes">Planes</option>
</select>

DEPENDENT SELECTS WITH CLASS = "chosen-select"

I'm trying to make a form with dependent dropdown, but the problem is when I go from select 1 to select 2 that has the "chosen-select" class, it does not show me the data in this dropdown, but if I change this class to this dropdown and I put "form-control", if you pass me the necessary data.
How can I use the "chosen-select" class in SELECT 2, so that I can read the data dynamically
Select 1
<select id="jornada" class="form-control" name="jornada" required>
<option value="">-- SELECCIONE --</option>
<?php
while ($row=mysqli_fetch_array($jornada)) {
echo '<option value='.$row["id"].'>'.$row["jornada"].'</option>';
}
mysqli_free_result($jornada)
?>
</select>
Select2 - the ideal is that in this dropdown I can search, instead of selecting
<select id="r_ruta" class="chosen-select" name="r_ruta" required>
<option value="">-- SELECCIONE --</option>
</select>
Script
$(document).ready(function(){
$("#jornada").change(function(){
$.get("get_colegios.php","jornada_id="+$("#jornada").val(), function(data){
$("#r_ruta").html(data);
console.log(data);
});
});
});
I try whits this script and addClass() jquery, but not work
$(document).ready(function(){
$("#jornada").change(function(){
$.get("get_colegios.php","jornada_id="+$("#jornada").val(), function(data){
$("#r_ruta").html(data);
console.log(data);
$("#r_ruta").addClass("chosen-select");
});
});
});
Im noob in this, very thnks for u help
since you mentioned you would like to search as well as selecting you could use select2.
https://select2.org/ then you can change your dependent dropdown data source like this
$('#example').on('select2:select', function (e) {
var data = e.params.data;
if (data.text == 'Dogs'){
$('#dependent').select2('destroy').empty().select2({data: dogs});
}
if (data.text == 'Birds'){
$('#dependent').select2('destroy').empty().select2({data: birds});
}
if (data.text == 'Snakes'){
$('#dependent').select2('destroy').empty().select2({data: snakes});
}
});
here is a fiddle
https://jsfiddle.net/rLmztr2d/2462/

Display elements in dropdown with jquery

Good day community,
I have an ASP.NET MVC4 project, where on edit page I'm use jquery script. But I have a problem to display elements on the page.
Here is my dropdown's HTML markup before changes:
<select id="ProgramId" name="ProgramId"><option value=""></option>
<option value="1">testrtu1</option>
<option value="2">testrtu2</option>
<option value="3">testtsi</option>
<option selected="selected" value="4">testrtu3</option>
</select>
And here is after jquery changes
<select id="ProgramId" name="ProgramId"><option value=""></option>
<option value="1">testrtu1</option>
<option value="2">testrtu2</option>
<option selected="selected" value="4">testrtu3</option>
</select>
But it's display on the page not a selected element testrtu3, always display first element. And when I click save button saved my first value.
Here is my jQuery function:
$(document).ready(function () {
var values = [];
$(".checkboxUniversities:checked").each(function () {
values.push($(this).val());
});
$.getJSON('/Administrator/ProgramList/' + values, function (data) {
alert('Return json result new information');
var items = '<option disabled>Select a Program</option>';
$.each(data, function (i, program) {
items += "<option value='" + program.Value + "'>" + program.Text + "</option>";
});
$('#ProgramId').html(items);
});
//var selectedElement = $("#ProgramId").find(":selected").text();
});
I guess I need somehow add selected value when create my dropdown inside jquery, or after creating, but I don't know how. Can anybody help me?
Before appeding options to your dropdown you have to save selected index or text in variable and use it further.
Sample Code:
<select id="ProgramId" name="ProgramId"><option value=""></option>
<option value="1">testrtu1</option>
<option value="2">testrtu2</option>
<option selected="selected" value="4">testrtu3</option>
</select>
<input id="click" type="button" value="click me"/>
$(document).ready(function(){
var option = '<option value="1">testrtu1</option><option value="2">testrtu2</option><option value="3">testtsi</option><option value="4">testrtu3</option>';
$("input#click").click(function(){
var selInx = $("select[name='ProgramId'] option:selected").index();
$('#ProgramId').html(option);
$('select#ProgramId').prop('selectedIndex', selInx);
});
});
DEMO FIDDLE
NOTE: As we cannot connect to your backend code to get options hardcoded in code itself and on click of button dropdown will be replaced with latest options and will update the selected index based on first one. You can use either selectedindex or text based on your requirement.

Jquery set selected value for cloned dropdown based on database

Hi i am using jquery to pull data from database n if the field has some value, i am calling clone function to create a dropdown list and using that value to set the selected value for dropdownbox. Like in code below database returns score so i am trying to set selected value of dropdown to score. ANDCriteria2 is the dropdown created using clone. Even if i try to print ANDCriteria's selected value which by default should be total_balance, it show empty alertbox (alert($('#ANDCriteria2').val()) as if the dropdown doesnt even exist
HTML
<div id="ListOne">
<div id="crit">
<div id="innerDiv2">
<select name="ANDCriteria2">
<option value="total_balance">Total Balance</option>
<option value="collector_code">Collector Code</option>
<option value="score">Score</option>
<option value="standard_desc">SDC</option>
<option value="acct_age">Account Age</option>
<option value="attempts_total">Total Attempts</option>
<option value="phone_age">Phone Age</option>
</select>
</div>
</div>
</div>
Jquery ready function
(document).ready(function(){
$('#lst').change(function(){
$.ajax({
type: "GET",
url: "getter.php",
data: "list=" + $(this).val(),
success: function(data){
var items = JSON.parse(data)
var andc2 = items[5];
if(andc2 === 'score ') {
clone ();
alert("BEFORE");
//$('#ANDCriteria2 option').eq(2).attr('selected', 'selected');
//alert( $('.innerDiv2 ANDCriteria2').text());
$('#ANDCriteria2 > .innerDiv2 >.crit option[value=score]').attr('selected','selected');
alert("AFTER");
I think you mean $("[name='ANDCriteria']") and not $("#ANDCriteria"). # is for ID based selection.
Culprit:
<select name="ANDCriteria2">
And you're using:
$('#ANDCriteria2 > .innerDiv2 >.crit option[value=score]')

Categories

Resources