how to Parsing multiple level JSON using jquery and ajax

how to Parsing multiple level JSON using jquery and ajax - javascript

I have this code example below working just fine with one level json file, not able to parse the data from multi level jason file.
so i'm trying to make this code work with the json file located on the link below, any help will be appreciated.
https://raw.githubusercontent.com/ahammoudi/jason_data/master/jsoncountry2.json
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | JSON - Dynamic Dependent Dropdown List using Jquery and Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:600px;">
<h2 align="center">JSON - Dynamic Dependent Dropdown List using Jquery and Ajax</h2><br /><br />
<select name="country" id="country" class="form-control input-lg">
<option value="">Select country</option>
</select>
<br />
<select name="state" id="state" class="form-control input-lg">
<option value="">Select state</option>
</select>
<br />
<select name="city" id="city" class="form-control input-lg">
<option value="">Select city</option>
</select>
</div>
</body>
</html>
<script>
$(document).ready(function(){
load_json_data('country');
function load_json_data(id, parent_id)
{
var html_code = '';
$.getJSON('https://raw.githubusercontent.com/ahammoudi/jason_data/master/json_country.json', function(data){
html_code += '<option value="">Select '+id+'</option>';
$.each(data, function(key, value){
if(id == 'country')
{
if(value.parent_id == '0')
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
else
{
if(value.parent_id == parent_id)
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
});
$('#'+id).html(html_code);
});
}
$(document).on('change', '#country', function(){
var country_id = $(this).val();
if(country_id != '')
{
load_json_data('state', country_id);
}
else
{
$('#state').html('<option value="">Select state</option>');
$('#city').html('<option value="">Select city</option>');
}
});
$(document).on('change', '#state', function(){
var state_id = $(this).val();
if(state_id != '')
{
load_json_data('city', state_id);
}
else
{
$('#city').html('<option value="">Select city</option>');
}
});
});
</script>

Related

Get the name of the object based on id in jquery

I am creating dynamic drop down menu. Based on the tutorial:
<html>
<head>
<title>Webslesson Tutorial | JSON - Dynamic Dependent Dropdown List using Jquery and Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<br /><br />
<div class="container" style="width:600px;">
<h2 align="center">JSON - Dynamic Dependent Dropdown List using Jquery and Ajax</h2><br /><br />
<select name="country" id="country" class="form-control input-lg">
<option value="">Select country</option>
</select>
<br />
<select name="state" id="state" class="form-control input-lg">
<option value="">Select state</option>
</select>
<br />
<select name="city" id="city" class="form-control input-lg">
<option value="">Select city</option>
</select>
</div>
</body>
</html>
<script>
$(document).ready(function(){
load_json_data('country');
function load_json_data(id, parent_id)
{
var html_code = '';
$.getJSON('country_state_city.json', function(data){
html_code += '<option value="">Select '+id+'</option>';
$.each(data, function(key, value){
if(id == 'country')
{
if(value.parent_id == '0')
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
else
{
if(value.parent_id == parent_id)
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
});
$('#'+id).html(html_code);
});
}
$(document).on('change', '#country', function(){
var country_id = $(this).val();
if(country_id != '')
{
load_json_data('state', country_id);
}
else
{
$('#state').html('<option value="">Select state</option>');
$('#city').html('<option value="">Select city</option>');
}
});
$(document).on('change', '#state', function(){
var state_id = $(this).val();
if(state_id != '')
{
load_json_data('city', state_id);
}
else
{
$('#city').html('<option value="">Select city</option>');
}
});
});
</script>
User selects country and I want to get the name of the country which was selected. I get correct country id based on this var country_id = $(this).val(); but I need the name of it. I have tried to get this name using $("#country_id ").attr("name"); or $(this).attr("name"); but it doesn't work, please help me.

You can get the selected option text by using following code.
var country_name = $(this).find('option:selected').text();
Working Fiddle

SOLUTION:
$(this).children("option:selected").text();

Dynamic Dependent Select from dropdown using Jquery and Ajax and json file

I'm looking for some help with the code below,
I have this form that each dropdown list depends on the one above it, so you based on what your selection is, the right data will show on the next selection. I want dropdown list 4 (select house) activate based on dropdown list 1 select country. so when the country selected. both state(2) and the house(4) will be activated and showing data. see screenshot below,
here is the HTML code
$(document).ready(function(){
load_json_data('country');
function load_json_data(id, parent_id)
{
var html_code = '';
$.getJSON('https://raw.githubusercontent.com/ahammoudi/jason_data/master/data.jason', function(data){
html_code += '<option value="">Select '+id+'</option>';
$.each(data, function(key, value){
if(id == 'country')
{
if(value.parent_id == '0')
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
else
{
if(value.parent_id == parent_id)
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
});
$('#'+id).html(html_code);
});
}
$(document).on('change', '#country', function(){
var country_id = $(this).val();
if(country_id != '')
{
load_json_data('state', country_id);
}
else
{
$('#state').html('<option value="">Select state</option>');
$('#city').html('<option value="">Select city</option>');
$('#house').html('<option value="">Select house</option>');
}
});
$(document).on('change', '#state', function(){
var state_id = $(this).val();
if(state_id != '')
{
load_json_data('city', state_id);
}
else
{
$('#city').html('<option value="">Select city</option>');
}
});
$(document).on('change', '#city', function(){
var city_id = $(this).val();
if(city_id != '')
{
load_json_data('house', city_id);
}
else
{
$('#house').html('<option value="">Select house</option>');
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorial | JSON - Dynamic Dependent Dropdown List using Jquery and Ajax</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="script.js"></script>
<br /><br />
<div class="container" style="width:600px;">
<h2 align="center">JSON - Dynamic Dependent Dropdown List using Jquery and Ajax</h2><br /><br />
<select name="country" id="country" class="form-control input-lg">
<option value="">Select country</option>
</select>
<br />
<select name="state" id="state" class="form-control input-lg">
<option value="">Select state</option>
</select>
<br />
<select name="city" id="city" class="form-control input-lg">
<option value="">Select city</option>
</select>
<br />
<select name="house" id="house" class="form-control input-lg">
<option value="">Select house</option>
<br />
</div>
</body>
</html>

has been fixed. here is what i did>
$(document).ready(function(){
load_json_data('country');
function load_json_data(id, parent_id)
{
var html_code = '';
$.getJSON('https://raw.githubusercontent.com/ahammoudi/jason_data/master/data.jason', function(data){
html_code += '<option value="">Select '+id+'</option>';
$.each(data, function(key, value){
if(id == 'country')
{
if(value.parent_id == '0')
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
else
{
if(value.parent_id == parent_id)
{
html_code += '<option value="'+value.id+'">'+value.name+'</option>';
}
}
});
$('#'+id).html(html_code);
});
}
$(document).on('change', '#country', function(){
var country_id = $(this).val();
if(country_id != '')
{
load_json_data('state', country_id);
}
else
{
$('#state').html('<option value="">Select state</option>');
$('#city').html('<option value="">Select city</option>');
$('#house').html('<option value="">Select house</option>');
}
});
$(document).on('change', '#state', function(){
var state_id = $(this).val();
if(state_id != '')
{
load_json_data('city', state_id);
}
else
{
$('#city').html('<option value="">Select city</option>');
}
});
$(document).on('change', '#country', function(){
var country_id = $(this).val();
if(country_id == 1)
{
load_json_data('house', 7);
}
else if(country_id == 2)
{
load_json_data('house', 8);
}
else
{
$('#house').html('<option value="">Select house</option>');
}
});
});
<!DOCTYPE html>
<html>
<head>
<title>Webslesson Tutorialx</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" />
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
</head>
<body>
<script src="script.js"></script>
<br /><br />
<div class="container" style="width:600px;">
<h2 align="center">JSON x</h2><br /><br />
<select name="country" id="country" class="form-control input-lg">
<option value="">Select country</option>
</select>
<br />
<select name="state" id="state" class="form-control input-lg">
<option value="">Select state</option>
</select>
<br />
<select name="city" id="city" class="form-control input-lg">
<option value="">Select city</option>
</select>
<br />
<select name="house" id="house" class="form-control input-lg">
<option value="">Select house</option>
<br />
</div>
</body>
</html>
i just changed the last function to
$(document).on('change', '#country', function(){
var country_id = $(this).val();
if(country_id == 1)
{
load_json_data('house', 7);
}
else if(country_id == 2)
{
load_json_data('house', 8);
}
else
{
$('#house').html('<option value="">Select house</option>');
}
});

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>

How to echo the value of a select to a text box

I have code in which I try to echo the value of a select with onclick.
I have a select which is getting its data from a database. Now I want that the option I click on is echoed into the text box. But I fail.
Here is my code:
<?php
require_once('functions.php');
$cont = new pacra3();
$segments = $cont->getSegment();
?>
<!DOCTYPE html>
<html>
<head>
<title>Popup contact form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="js/jquery-ui.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
<script>
function get_main_sector(myid){
var id = document.getElementById("segment_id").value;
alert(id);
$(document).ready(function() {
$("#segment_id")({
onSelect: function(Text, inst) {
$("#dt_title input[type='text']").val($("#dt_title input[type='text']").attr('data-title')+Text);
}
})
});
}
</script>
</head>
<body>
<span id="spanSegmentData">
<select name="segment_id" id="segment_id" STYLE="width: 300px" onchange="get_main_sector(this.value)">
<option value="">[--Select Segment------]</option>
<?php
if(is_array($segments) && !empty($segments)) {
foreach($segments as $segment) {
echo '<option value="'.$segment->ID.'"';
echo '>';
echo $segment->title;
echo '</option>';
}
}
?>
</select>
</span>
<span id="dt_title">
<input name="title" type="text" value=" MB | <?php echo $segment->title;?> | " data-title="MB | <?php echo $segment->title;?> | " style="width:300px"/ readonly>
</span>
</body>
</html>

For that you don't need php. It's done client side.
Get value of select item :
$("#idoftheselect").val();
Get the option text selected of the select :
$("#idoftheselect").find(":selected").text();
Set a input values :
$("#idoftheinput").val("All your string content or var");
Here an example :
$(".myselect").change(function(){
var res = $(".myselect").find(":selected").map(function () {
if($(this).val()!="")
return $(this).text();
else
return "";
}).get().join(" ");
$("#inputid").val(res);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<select class="myselect">
<option value="">Choose</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
<select class="myselect">
<option value="">Choose</option>
<option value="4">Four</option>
<option value="5">Five</option>
<option value="6">Six</option>
</select>
<input type="text" id="inputid" placeholder="Here selected item">

Updated code
$("#segment_id").change(function () {
var id = $(this).val();
$("#title").val($("#segment_id option:selected").text());
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<span id="spanSegmentData">
<select name="segment_id" id="segment_id" STYLE="width: 300px" >
<option value="">[--Select Segment------]</option>
<option value="1">One</option>
<option value="2">Two</option>
<option value="3">Three</option>
</select>
</span>
<span id="dt_title"> <input id="title" name="title" type="text" value=" "
data-title="MB" style="width:300px" readonly> </span>

If you are trying to get the selected item value in to the text box, completely remove this part of your code (I think this is useless)
MB | <?php echo $segment->title;?> | "data-title="MB | <?php echo $segment->title;?> |
for your answer=>
Remove the "onchange" event from select element:
<select name="segment_id" id="segment_id" STYLE="width: 300px">
Inside script (put this script area at the end of the code ... better that way)
<script>
$( document ).ready(function() {
$("#segment_id").on('change', function () {
var id = document.getElementById("segment_id").value;
alert(id);
$("#title").val($$("#segment_id option:selected").text());
});
});
</script>
the complete answer will be :
<?php
require_once('functions.php');
$cont = new pacra3();
$segments = $cont->getSegment();
?>
<!DOCTYPE html>
<html>
<head>
<title>Popup contact form</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" href="js/jquery-ui.css">
<script src="js/jquery-1.10.2.js"></script>
<script src="js/jquery-ui.js"></script>
</head>
<!-- Body Starts Here -->
<body>
<span id="spanSegmentData">
<select name="segment_id" id="segment_id" STYLE="width: 300px">
<option value="">[--Select Segment------]</option>
<?php
if(is_array($segments) && !empty($segments))
{
foreach($segments as $segment)
{
echo '<option value="'.$segment->ID.'"';
echo '>';
echo $segment->title;
echo '</option>';
}
}
?>
</select>
</span>
<span id="dt_title"> <input name="title" type="text" value="" data-title="" style="width:300px"/ readonly> </span>
<script type="text/javascript">
$(document).ready(function () {
$("#segment_id").on('change', function () {
var id = document.getElementById("segment_id").value;
alert(id);
$("#title").val($$("#segment_id option:selected").text());
});
});
</script>
</body>
</html>

How to make one of the selected options in a drop-down list of an HTML form add a text input?

I have the following code:
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="other" onselect="">Other...</option>
</select>
I would like the form to show a new input text below this drop-down list when user chooses 'other' so that he/she can input his own city. The same way, if the user chooses back one of the existing cities in the drop-down list, the generated text input would disappear.

Add a input after the select and make it as display none
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="other" onselect="">Other...</option>
</select>
<input id="other" style="display:none" />
and inside the script tag
<script type="text/javascript">
$(document).ready(function () {
$('#city').on('change', function (e) {
var selectValue = this.value;
if (selectValue == "other") {
$("#other").show();
}
else {
$("#other").hide();
}
});
});
</script>
and you also should add Jquery in your html file before the above script tag
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
after combine the Html and Scripts your html file should look like this
<html>
<body>
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="other" onselect="">Other...</option>
</select>
<input id="other" style="display:none" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#city').on('change', function (e) {
var selectValue = this.value;
if (selectValue == "other") {
$("#other").show();
}
else {
$("#other").hide();
}
});
});
</script>
</body>
</html>

Vadivel's fixed code:
<script type="text/javascript">
$( document ).ready(function() {
$('#city_value').attr('type','hidden');
$('#city').change( function(){
var city=$('#city').val();
if(city=="other")
{
$('#city_value').attr('type','text');
}
else
{
$('#city_value').attr('type','hidden');
}
});
});
</script>

$('#city').live('change', function() {
var selectedCity = $(this).val();
if(selectedCity == "other"){
$('#city').after('<input type="text" id="othercity" name="othercity">');
}else{
$('#othercity').remove():
}
});

JavaScript Code:
function otherOptionCall()
{
var e = document.getElementById("city");
var einput = document.getElementById("inputother");
var strUser = e.options[e.selectedIndex].value;
if(strUser == 2)
{
einput.style.display="block";
}
else
{
einput.style.display="none";
}
}
Html code:
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1">city1</option>
<option value="city2">city2</option>
<option value="other" onselect="otherOptionCall()">Other...</option>
</select>
<input type="text" name="strother" id="inputother" style="display:none">

Use this code .
this is work fine.
You create this type use Jquery or JavaScript functions
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<body>
<div id=" " style="">
<label for="city">City</label>
<select id="city" name="city" required>
<option value="">Select city</option>
<option value="city1" onselect="city(this.val)">city1</option>
<option value="city2" onselect="city(this.val)">city2</option>
<option value="other" onselect="city(this.val)">Other...</option>
</select>
<input type="text" value="" id="city_value" placeholder="Enter City"/>
</div>
<script type="text/javascript">
$( document ).ready(function() {
$('#city_value').hide();
$('#city').change( function(){
var city=$('#city').val();
if(city=="other")
{
$('#city_value').attr('required',true);
}
else
{
$('#city_value').attr('required',false);
}
});
});
</script> </body>

Develop Reference

JavaScript is the programming language of the Web.

how to Parsing multiple level JSON using jquery and ajax - javascript

Related

Get the name of the object based on id in jquery

Dynamic Dependent Select from dropdown using Jquery and Ajax and json file

How to select dropdown by inserting value in the text box

How to echo the value of a select to a text box

How to make one of the selected options in a drop-down list of an HTML form add a text input?

Categories

Resources