Cannot fetch data from json using select in javascript - javascript

I am new in Json and javascript . What I want is a select tag with option, thus by selecting the options - that particular object will be fetched from JSON and will be displayed , I have used Nested JSON .
data.json:
var data = {
"abc":{
"color":["rgb(4,45,97)","rgb(255,122,0)"],
"font":"Interface Thin",
"logo":"<img src='logo.png' width='200' height='150'>"
}
}
index.html
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<script type="text/javascript" src="data.json"></script>
</head>
<body>
<!--document.getElementById('color').innerHTML += '<div style="border:1px solid black;padding:2px;width:100px;background-color:'+data.AllenandHanburys[j]+';height:100px"></div>'-->
<p id="demo"></p>
<p id="color"></p>
<p id="logo"></p>
<select id="brand" onChange="run()">
<option>Select Option</option>
<option value="abc">abc</option>
</select>
</body>
<script>
var i;
function run() {
var brand_name=document.getElementById('brand').value;//
for(x in data)
{
if(x==brand_name)
{
for(j in data.brand_name)
{
document.getElementById('demo').innerHTML +=j+":"+data.abc[j]+"<br>";
if(j=='color')
{
for(i=0;i<data.abc.color.length;i++)
{
document.getElementById('color').innerHTML +='<div style="border:1px solid black;padding:2px;width:100px;background-color:'+data.abc.color[i]+';height:100px"></div>'+"<br>";
}
}
}
}
}
}
</script>
</html>

this line is wrong,
for(j in data.brand_name) //because `brand_name` property is not exist in the object
change it to
for(j in data[brand_name]) //data[brand_name] will parsed as data['abc'] which is same as data.abc
Here's the demo
var data = {
"abc":{
"color":["rgb(4,45,97)","rgb(255,122,0)"],
"font":"Interface Thin",
"logo":"<img src='logo.png' width='200' height='150'>"
}
}
var i;
function run() {
var brand_name=document.getElementById('brand').value;//
for(x in data)
{
if(x==brand_name)
{
for(j in data[brand_name])
{
document.getElementById('demo').innerHTML +=j+":"+data.abc[j]+"<br>";
if(j=='color')
{
for(i=0;i<data.abc.color.length;i++)
{
document.getElementById('color').innerHTML +='<div style="border:1px solid black;padding:2px;width:100px;background-color:'+data.abc.color[i]+';height:100px"></div>'+"<br>";
}
}
}
}
}
}
<p id="demo"></p>
<p id="color"></p>
<p id="logo"></p>
<select id="brand" onChange="run()">
<option>Select Option</option>
<option value="abc">abc</option>
</select>

Related

JQuery append HTML using class tags onclick

Im sorry if this is a bit of a novice quest. I've only recently started learning. I'm trying to use jQuery to append a series of input text boxes onto my website but nothing I've tried has worked so far.
HTML doc
<!DOCTYPE html>
<html lang="en">
<div class="background">
<link rel="stylesheet" href="style.css">
<script src="testjavascript.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<head>
<titleTest Web App</title>
<h1>Test Number 1</h1>
</head>
<button onclick="meth_hide_show()">Hide/Show</button>
<div id="methodology" class="methodology">
<label for="constr_method">Choose a Renewal Methodology:</label>
<select name="constr_method" id="constr_method">
<option value="Pipe_crack">Pipe Crack</option>
</select>
<br>
<label for="constr_method">Renewal Location:</label>
<select name="location" id="location">
<option value="N/S">Nature Strip</option>
<option value="Road">Road</option>
<option value="n/s_rd">Nature Strip & Road</option>
</select>
<form>
<label for="meters">Number of Meters:</label>
<input type="number" id="ren_meter" name="ren_meter">
</form>
</div>
<button id="save_meth" onclick="appendmethd()">Add Methodology</button>
<div class="meth_append">
</div>
</div>
</html>
Javascript doc:
function meth_hide_show() {
var x = document.getElementById("methodology");
if (x.style.display === "none") {
x.style.display = "block";
} else {
x.style.display = "none";
}
}
function appendmethd() {
var meth=document.getElementById("methodology")
$("meth_append").append(meth)
}
Try this
function meth_hide_show() {
//retrieve the jquery object
var x = $("#methodology");
if (x.is(':visible')) {
//if its visible, hide it
x.hide();
} else {
//else show it
x.show();
}
}
function appendmethd() {
var meth=$("#methodology");
$(".meth_append").append(meth);
}

How to make a div using loop in JavaScript?

I have to make a div triangle like this, with looping in JavaScript. Anyone know how to make this?
*Input using <select> tag. Thanks!
Check this
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script>
$(document).ready(function () {
var container = $("#html2");
$("#CreateDiv").change(function () {
$('#html2').html('');
var strBlocksHTML = '';
var selectedvalue = $("#CreateDiv option:selected").val();
for (var i = 0; i <= selectedvalue; i++) {
for (var n = 0; n < i ; n++) {
strBlocksHTML += '<div id="pdfDiv" style=" background-color:red; display:inline-block; width:50px; height:50px; margin:2px 5px; border:2px solid #ccc;"> </div>';
}
strBlocksHTML += '<div></div>';
}
$('#html2').append(strBlocksHTML);
})
});
</script>
</head>
<body style="text-align:center">
<div>
<select id="CreateDiv">
<option value="0"> Select</option>
<option value="1"> One</option>
<option value="2"> Two</option>
<option value="3"> There</option>
<option value="4"> Four</option>
<option value="5"> Five</option>
</select>
</div>
<br />
<br />
<div id="html2" style="text-align:center">
</div>
</body>
</html>
Simple double loop. First loop for rows, second for single div.
var levels = 5;
var output = '';
for (var row = 1; row <= levels; row++) {
output += '<div class="row">';
for (var i = 0; i < row; i++) {
output += '<div class="item"></div>'
}
output += '</div>';
}
document.write(output);
.row {
text-align: center;
}
.item {
display: inline-block;
width: 40px;
height: 40px;
border: 1px solid green;
background: gray;
}

fill color for each table cell with color-option listed in drop menu only if clicked

I have to create table by clicking button where as table contains columns and rows specified by user. After that,we have to fill each table cell by performing onclick with the color listed in the drop down list menu.
The below code snippet is to create table with user's input. I don't know to proceed further. How to perform this ?
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.highlighted {
background: red;
}
table{
width:500px;
height:500px;
}
table td{
padding:10px;
margin:10px;
border:1px solid #ccc;
}
table tr{
height:100px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function createTable(){
mytable = $('<table></table>').attr({ id: "basicTable" });
var rows = new Number($("#rows").val());
var cols = new Number($("#columns").val());
var tr = [];
for (var i = 0; i < rows; i++) {
var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(mytable);
for (var j = 0; j < cols; j++) {
$('<td></td>').text("").appendTo(row);
}
}
console.log("TTTTT:"+mytable.html());
mytable.appendTo("#matrixTableId");
}
</script>
</head>
<body>
Enter Rows <input type='text' id='rows'><br>
Enter Cols <input type='text' id='columns'><br>
<input type="button" onclick="createTable();" name="save" value="Form Matrix" /><br>
Choose Color: <select id="dropDown">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
<br><br>
<div id="matrixTableId">
</div>
</body>
</html>
Try this : You can add a click event handler for all td and set background-color as a value from dropDown.
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.highlighted {
background: red;
}
table{
width:500px;
height:500px;
}
table td{
padding:10px;
margin:10px;
border:1px solid #ccc;
}
table tr{
height:100px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function createTable(){
mytable = $('<table></table>').attr({ id: "basicTable" });
var rows = new Number($("#rows").val());
var cols = new Number($("#columns").val());
var tr = [];
for (var i = 0; i < rows; i++) {
var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(mytable);
for (var j = 0; j < cols; j++) {
$('<td></td>').text("").appendTo(row);
}
}
console.log("TTTTT:"+mytable.html());
mytable.appendTo("#matrixTableId");
}
$(function(){
$(document).on("click","table tr td", function(){
var color = $('#dropDown').val();
$(this).css('background-color', color);
});
});
</script>
</head>
<body>
Enter Rows <input type='text' id='rows'><br>
Enter Cols <input type='text' id='columns'><br>
<input type="button" onclick="createTable();" name="save" value="Form Matrix" /><br>
Choose Color: <select id="dropDown">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
<br><br>
<div id="matrixTableId">
</div>
</body>
</html>
You should handle onclick event of td and set background of clicked td to select value
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<style>
.highlighted {
background: red;
}
table{
width:500px;
height:500px;
}
table td{
padding:10px;
margin:10px;
border:1px solid #ccc;
}
table tr{
height:100px;
}
</style>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
function createTable(){
mytable = $('<table></table>').attr({ id: "basicTable" });
var rows = new Number($("#rows").val());
var cols = new Number($("#columns").val());
var tr = [];
for (var i = 0; i < rows; i++) {
var row = $('<tr></tr>').attr({ class: ["class1", "class2", "class3"].join(' ') }).appendTo(mytable);
for (var j = 0; j < cols; j++) {
var $td = $('<td></td>');
$td.text("").appendTo(row);
$td.click(function(){
$(this).css('background',$('#dropDown').val());
});
}
}
console.log("TTTTT:"+mytable.html());
mytable.appendTo("#matrixTableId");
}
</script>
</head>
<body>
Enter Rows <input type='text' id='rows'><br>
Enter Cols <input type='text' id='columns'><br>
<input type="button" onclick="createTable();" name="save" value="Form Matrix" /><br>
Choose Color: <select id="dropDown">
<option value="red">Red</option>
<option value="green">Green</option>
<option value="blue">Blue</option>
<option value="yellow">Yellow</option>
</select>
<br><br>
<div id="matrixTableId">
</div>
</body>
</html>

html javascript search not working

This is the code :
<style>
.copyrighttoolbox {
font-size:9px
}
</style>
<script>
function searchFor(searchEngine,searchQuery){
for (var i = 0; i < searchEngine.length; i++) {
if (searchEngine[i].type === 'radio' && searchEngine[i].checked) {
value = searchEngine[i].value;
}
}
if (value=="google"){
var x="http://google.com.hk/search?q="+searchQuery;
window.location.href=x
}
if (value=="yahoo"){
var x="http://hk.search.yahoo.com/search?p="+searchQuery;
window.location.href=x
}
if (value=="bing"){
var x="http://bing.com/search?q="+searchQuery;
window.location.href=x
}
if (value=="wikipedia"){
var x="http://en.wikipedia.org/w/index.php?search="+searchQuery;
window.location.href=x
}
}
</script>
<form style="border:3px #cccccc dashed;width:400px">
<select name="searchLoc">
<option value="google">Google</option>
<option value="yahoo">Yahoo</option>
<option value="bing">Bing</option>
<option value="wikipedia">Wikipedia</option>
</select>
<input type="text" name="searchContent">
<input type="submit" onclick="searchFor(this.form.searchLoc.value,this.form.searchContent.value);return false;" value="Search"><span class="copyrighttoolbox"> by tool-box.weebly.com</p>
</form>
This is not working and the link after submit became:
http://tool-box.weebly.com/web-tool.html?searchLoc=google&searchContent=search
How can I solve this problem?
Any help will be appreciated.
Try this. It looks like you are mixing up some things as the right value is already in the searchEngine variable.
function searchFor(searchEngine,searchQuery){
if (searchEngine=="google"){
var x="http://google.com.hk/search?q="+searchQuery;
window.location.href=x
}
if (searchEngine=="yahoo"){
var x="http://hk.search.yahoo.com/search?p="+searchQuery;
window.location.href=x
}
if (searchEngine=="bing"){
var x="http://bing.com/search?q="+searchQuery;
window.location.href=x
}
if (searchEngine=="wikipedia"){
var x="http://en.wikipedia.org/w/index.php?search="+searchQuery;
window.location.href=x
}
}
Demo: plunker
Description:
You were cycling through searchEngine instead of just using the value you are passing from the onclick of the submit button.
I also changed this to a switch instead of multiple if statements because of the nature of this use case.
Next i closed all your javascript lines with ; since there were some that were missing it.
Finally I declared the var x at the top of the function so you don't get duplicate variable declaration warnings.
JS
function searchFor(searchEngine,searchQuery){
var x = "";
switch(searchEngine)
{
case "google":
x="http://google.com.hk/search?q="+searchQuery;
alert(x);
window.location.href=x;
break;
case "yahoo":
x="http://hk.search.yahoo.com/search?p="+searchQuery;
window.location.href=x;
break;
case "bing":
x="http://bing.com/search?q="+searchQuery;
window.location.href=x;
break;
case "wikipedia":
x="http://en.wikipedia.org/w/index.php?search="+searchQuery;
window.location.href=x;
break;
}
}
HTML:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="style.css">
<script src="script.js"></script>
</head>
<body>
<form style="border:3px #cccccc dashed;width:400px">
<select name="searchLoc">
<option value="google">Google</option>
<option value="yahoo">Yahoo</option>
<option value="bing">Bing</option>
<option value="wikipedia">Wikipedia</option>
</select>
<input type="text" name="searchContent">
<input type="submit" onclick="javascript:searchFor(this.form.searchLoc.value,this.form.searchContent.value);return false;" value="Search"><span class="copyrighttoolbox"> by tool-box.weebly.com</p>
</form>
</body>
</html>
CSS:
.copyrighttoolbox {
font-size:9px
}

Multiple dynamic select option lists

I'm trying to populate 3 drop down exactly the same from each other but select name and option value. I found a simple javascript works fine for my demand; however, unable to make it work once I combo the select list. Below is what I have changed and no longer work correctly when changed. I'm not good with js so any help is appreciated.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/ xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript" src="includes/jquery1.7.js"></script>
<script language="javascript">
$(function() {
var selectValues = {
"nokia": {
"N97": "http://www.google.com",
"N93": "http://www.stackoverflow.com"
},
"motorola": {
"M1": "http://www.ebay.com",
"M2": "http://www.twitter.com"
}
};
for (var i=1;i<4;i++) {
var $vendor+i = $('select.mobile-vendor'+i);
var $model+i = $('select.model'+i);
$vendor+i.change(function() {
$model+i.empty().append(function() {
var output = '';
$.each(selectValues[$vendor+i.val()], function(key, value) {
output += '<option value='+value+'>' + key + '</option>';
});
return output;
});
}).change();
}
});
</script>
<style type="text/css">
#download-link {
padding: 13px 15px 13px 15px;
font-size: larger;
font-decoration: underline;
background-color: #ffffbb;
border: 2px dashed red;
margin-top: 16px;
display: inline-block;
}
</style>
</head>
<body>
<p>
<form action="?" method="get">
<%for i=1 to 3%>
<select name="dvr_<%=i%>" class="mobile-vendor<%=i%>">
<option value="motorola">Motorola</option>
<option value="nokia">Nokia</option>
<option value="android">Android</option>
</select>
<select name="cam_<%=i%>" class="model<%=i%>">
<option></option>
</select>
<BR />
<%next%>
<input type="submit" value="submit" />
</form>
</p>
</body>
</html>
I think you can change these lines:
var $vendor+i = $('select.mobile-vendor'+i);
var $model+i = $('select.model'+i);
to
var $vendor = $('select.mobile-vendor'+i);
var $model = $('select.model'+i);
without the need to append the counter to the variable names. inside the function just refer to $vendor and $model
EDIT:
try this code
for (var i=1;i<4;i++) {
var $vendor = $('select.mobile-vendor'+i);
var $model = $('select.model'+i);
$vendor.change(function() {
var $o = $( this );
$o.next().empty().append(function() {
var output = '';
$.each(selectValues[$o.val()], function(key, value) {
output += '<option value='+value+'>' + key + '</option>';
});
return output;
});
}).change();
}
the error is not only how they named their variaves?
var $vendor+i = $('select.mobile-vendor'+i);
would not be so alone?
var $vendor = $('select.mobile-vendor'+i);

Categories