We Keep Coding

I am trying to change the background image as soon as the respective option is selected from the select drop down list. but this is not happening

function bgimg() {
var ch = document.getElementById("country").value;
if (ch == "None") {
document.getElementById("bgi").style.background = "black";
} else if (ch == "India") {
document.getElementById("bgi").style.backgroundImage = "url('https://wallpaperaccess.com/full/5770.jpg')";
} else if (ch == "USA") {
document.getElementById("bgi").style.backgroundImage = "url('Usa.jpghttps://wallpaperaccess.com/full/52904.jpg')";
} else if (ch == "Japan") {
document.getElementById("bgi").style.backgroundImage = "url('https://wallpaperaccess.com/full/6512.jpg')";
} else {
document.getElementById("bgi").style.backgroundImage = "url('https://wallpapercave.com/wp/wp1833702.jpg')";
}
}
<h1 align="center" style="font-family: umpush;">WELCOME TO INTERACTIVITY</h1>
<div id="bgi"></div>
<select id="country" onchange="Javascipt: bgimg()">
<option value="None">None</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Israel">Israel</option>
<option value="Japan">Japan</option>
</select>
/* I am trying to change the background image as soon as the respective option is selected from the select drop down list. but this is not happening.
OUTPUT: No background is being shown after choosing the options */

The Javascript code was put into the css textarea. And there were some typos in your code ("Javascipt" and a wrong image url).
Also he backgrounds were set on an empty div without any styling, which results in not seeing them. I have added a height and width on it so that you can at least see the backgrounds. Furthermore I called the function at the start so that it will set the background for the initial value (which is "None" so the background becomes black)
function bgimg() {
var ch = document.getElementById("country").value;
if (ch == "None") {
document.getElementById("bgi").style.backgroundColor = "black";
} else if (ch == "India") {
document.getElementById("bgi").style.backgroundImage = "url('https://wallpaperaccess.com/full/5770.jpg')";
} else if (ch == "USA") {
document.getElementById("bgi").style.backgroundImage = "url('https://wallpaperaccess.com/full/52904.jpg')";
} else if (ch == "Japan") {
document.getElementById("bgi").style.backgroundImage = "url('https://wallpaperaccess.com/full/6512.jpg')";
} else {
document.getElementById("bgi").style.backgroundImage = "url('https://wallpapercave.com/wp/wp1833702.jpg')";
}
}
bgimg();
#bgi {
height: 200px;
width: 300px;
background-size: cover;
}
<h1 align="center" style="font-family: umpush;">WELCOME TO INTERACTIVITY</h1>
<div id="bgi"></div>
<select id="country" onchange="Javascript: bgimg()">
<option value="None">None</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Israel">Israel</option>
<option value="Japan">Japan</option>
</select>

You can also add an event listener for change on Javascript if you want. Also, do not forget to give the #bgi div a width and height on CSS otherwise it won't show.
<h1 align="center" style="font-family: umpush;">WELCOME TO INTERACTIVITY</h1>
<div id="bgi"></div>
<select id="country">
<option value="None">None</option>
<option value="India">India</option>
<option value="USA">USA</option>
<option value="Israel">Israel</option>
<option value="Japan">Japan</option>
</select>
const select = document.querySelector("#country");
select.addEventListener('change', (event) => {
const ch = document.getElementById("country").value;
console.log(ch);
if(ch=="None") {document.getElementById("bgi").style.background="black";}
else if(ch=="India") {document.getElementById("bgi").style.backgroundImage="url('https://wallpaperaccess.com/full/5770.jpg')";}
else if(ch=="USA") {document.getElementById("bgi").style.backgroundImage="url('Usa.jpghttps://wallpaperaccess.com/full/52904.jpg')";}
else if(ch=="Japan") {document.getElementById("bgi").style.backgroundImage="url('https://wallpaperaccess.com/full/6512.jpg')";}
else {document.getElementById("bgi").style.backgroundImage="url('https://wallpapercave.com/wp/wp1833702.jpg')";}
});

jquery based on two/three dropdown values hide textfield

currently im stuck with the JQuery script which i wanted to make text field visible based on two / three drop down values matches. following is my JQuery code which i need when "status" value 'resolved', "reason" value '[any]', reason of leakage value '[any]', and when cause value is 'G other' description text field should appear. if any of above values changes doest match for current condition the description text field should disappear.
$(function () {
var changeVisibility = function () {
var statusId = $('#issue_status_id').val();
if (statusId >= '3') {
var val2 =$("#issue_custom_field_values_18").val();
if (val2 == '28' || val2 == '29' || val2 == '30' || val2 == '31' || val2 == '32' ||
val2 == '33' || val2 == '34' || val2 == '35' || val2 == '36' || val2 == '89') {
var val3 = $ ("#issue_custom_field_values_19").val();
if (val3 == '37' || val3 == '38' || val3 == '39' || val3 == '40' || val3 == '41' ||
val3 == '42' || val3 == '43' || val3 == '96') {
var val = $('#issue_custom_field_values_26').val();
if (val == '87') {
$('#issue_custom_field_values_39').parent().show();
$('.cf_39').show();
} else if (val == '94') {
$('#issue_custom_field_values_39').parent().hide();
$('.cf_39').hide();
} else if (val == '81') {
$('#issue_custom_field_values_39').parent().hide();
$('.cf_39').hide();
} else if (val == '82') {
$('#issue_custom_field_values_39').parent().hide();
$('.cf_39').hide();
} else if (val == '83') {
$('#issue_custom_field_values_39').parent().hide();
$('.cf_39').hide();
} else if (val == '84') {
$('#issue_custom_field_values_39').parent().hide();
$('.cf_39').hide();
} else if (val == '85') {
$('#issue_custom_field_values_39').parent().hide();
$('.cf_39').hide();
}
else if (val == '86') {
$('#issue_custom_field_values_39').parent().hide();
$('.cf_39').hide();
} else if (val == '87') {
$('#issue_custom_field_values_39').parent().hide();
$('.cf_39').hide();
} else {}
}
}
}
};
changeVisibility();
$('#all_attributes').on('change', '#issue_custom_field_values_26 ', function (e) {
changeVisibility();
});
var _replaceIssueFormWith = replaceIssueFormWith;
replaceIssueFormWith = function (html) {
_replaceIssueFormWith(html);
changeVisibility();
};
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="all_attributes" class="attributes">
<p><label for="issue_status_id">Status<span class="required"> *</span></label><select onchange="updateIssueFrom('/issues/172/edit.js', this)" name="issue[status_id]" id="issue_status_id"><option value="1">New</option>
<option value="2">In Progress</option>
<option selected="selected" value="3">Resolved</option>
<option value="4">Feedback</option>
<option value="5">Closed</option>
<option value="6">Rejected</option></select></p>
<p style="display: block;"><label for="issue_custom_field_values_18"><span>Reason</span> <span class="required">*</span></label><select name="issue[custom_field_values][18]" id="issue_custom_field_values_18" class="enumeration_cf"><option selected="selected" value="89">--- Please select ---</option>
<option value="28">4 A</option>
<option value="29">4 B</option>
<option value="30">4 C</option>
<option value="31">4 D</option>
<option value="32">4 E</option>
<option value="33">4 F</option>
<option value="35">4 G </option>
<option value="36">4 H</option>
<option value="34">4 I </option></select></p><p style="display: block;"><label for="issue_custom_field_values_19"><span>Reason of Leakage</span> <span class="required">*</span></label><select name="issue[custom_field_values][19]" id="issue_custom_field_values_19" class="enumeration_cf"><option selected="selected" value="96">--- Please select ---</option>
<option value="37">5 A</option>
<option value="38">5 B</option>
<option value="39">5 C</option>
<option value="40">5 D</option>
<option value="41">5 E</option>
<option value="43">5 F</option>
<option value="42">5 G</option></select></p>
<p style="display: block;"><label for="issue_custom_field_values_26"><span>Cause</span> <span class="required">*</span></label><select name="issue[custom_field_values][26]" id="issue_custom_field_values_26" class="enumeration_cf"><option selected="selected" value="94">--- Please select ---</option>
<option value="81">A </option>
<option value="82">B </option>
<option value="83">C </option>
<option value="84">D </option>
<option value="85">E </option>
<option value="86">F </option>
<option value="87">G Other </option>
<option value="118">H </option></select></p>
<p style="display: block;"><label for="issue_custom_field_values_39">Description<span class="required"> *</span></label><input name="issue[custom_field_values][39]" id="issue_custom_field_values_39" value="" class="string_cf" type="text"></p>
</div>
when the drop down values are please select, the text field should disappear as well.

html get Method sending wrong url

on using html get method my url should be shown as
http://10.1.18.155/log_table_view.php?year=2017&frommonth=3&fromdate=3&tomonth=3&todate=3&query=ip&filter=like&search_text=10.1.17.20&subquery=&subfilter=&sub_search_text=
but it shows as
http://10.1.18.155/log_table_view.php?year=2017&frommonth=3&fromdate=3&tomonth=3&todate=3&query=ip&filter=like&search_text+=10.1.17.20&subquery=&subfilter=&sub_search_text=
there is a plus sign between query=ip&filter=like&search_text+=10.1.17.20
which creates problem in getting data
my html form code is like
<form method="get" action="log_table_view.php" onsubmit="return submit_query_form_check();" enctype="multipart/form-data">
<label>Log for Year</label>
<select id="year" name="year">
<option value="">Select Year</option>
<option value="2017">2017</option>
<option value="2016">2016</option>
</select>
<br>
<label>From</label>
<select id="frommonth" name="frommonth">
<option value="">Select Month</option>
</select>
<select id="fromdate" name="fromdate">
<option value="">Select Date</option>
</select>
<label>To</label>
<select id="tomonth" name="tomonth">
<option value="">Select Month</option>
</select>
<select id="todate" name="todate">
<option value="">Select Date</option>
</select>
<br>
<label>Query</label>
<select name="query" id="query">
<option value="">Select</option>
<option value="time">Time</option>
<option value="ip">Server IP</option>
<option value="username">Username</option>
<option value="nasip">Nas IP</option>
<option value="groupname">Group name</option>
<option value="cmd">CMD</option>
<option value="callerid">Caller ID</option>
<option value="realname">Real Name</option>
<option value="network_device_group">Network Device Group</option>
</select>
<select name="filter" id="filter">
<option value="">filter</option>
<option value="like">%</option>
<option value="equal">=</option>
</select>
<input type="text" placeholder="Search Text" name="search_text" id="search_text">
<label>AND</label>
<label>Sub-Query</label>
<select name="subquery" id="subquery">
<option value="">Select</option>
<option value="time">Time</option>
<option value="ip">Server IP</option>
<option value="username">Username</option>
<option value="nasip">Nas IP</option>
<option value="groupname">Group name</option>
<option value="cmd">CMD</option>
<option value="callerid">Caller ID</option>
<option value="realname">Real Name</option>
<option value="network_device_group">Network Device Group</option>
</select>
<select name="subfilter" id="subfilter">
<option value="">filter</option>
<option value="like">%</option>
<option value="equal">=</option>
</select>
<input type="text" placeholder="Search Text" name="sub_search_text" id="sub_search_text">
<button type="submit" class="search">Search</button>
</form>
function submit_query_form_check() {
var year = $("#year").val();
var frommonth = $('#frommonth').val();
var fromdate = $('#fromdate').val();
var tomonth = $('#tomonth').val();
var todate = $('#todate').val();
var query = $('#query').val();
var subquery = $('#subquery').val();
if (year == "") {
alert("Year Not Selected");
$("#year").focus();
return false;
}
if (frommonth == "") {
alert("From Month Not Selected");
$("#frommonth").focus();
return false;
}
if (fromdate == "") {
alert("From date Not Selected");
$("#fromdate").focus();
return false;
}
if (tomonth == "") {
alert("To Month Not Selected");
$("#tomonth").focus();
return false;
}
if (todate == "") {
alert("To date Not Selected");
$("#todate").focus();
return false;
}
if (query != "") {
var filter = $('#filter').val();
var search_text = $('#search_text').val();
if (filter == "") {
alert("You have not selected any filter for query");
$('#filter').focus();
return false;
} else if (search_text == "") {
alert("You have not input any search text for query");
$('#search_text').focus();
return false;
} else if (query == "groupname") {
if (filter != "like") {
alert("With Group Name Query You Can Only Use Like Filter");
$('#filter').focus();
return false;
}
}
}
if (subquery != "") {
var subfilter = $('#subfilter').val();
var sub_search_text = $('#sub_search_text').val();
if (query == "") {
alert("You have not selected any for query before using sub query");
$('#query').focus();
return false;
}
if (subfilter == "") {
alert("You have not selected any sub filter for query");
$('#subfilter').focus();
return false;
} else if (search_text == "") {
alert("You have not input any sub search text for query");
$('#sub_search_text').focus();
return false;
} else if (subquery == "groupname") {
if (subfilter != "like") {
alert("With Group Name Query You Can Only Use Like Filter");
$('#subfilter').focus();
return false;
}
}
}
return true;
}

Right before you actually pass in the string to be called to the endpoint, just strip the '+' out of the URL using the str_replace method.
<?
$badUrl = "http://10.1.18.155/log_table_view.php?year=2017&frommonth=3&fromdate=3&tomonth=3&todate=3&query=ip&filter=like&search_text+=10.1.17.20&subquery=&subfilter=&sub_search_text=";
$goodUrl = str_replace('?/', '?', $badUrl);
then you simply pass the goodUrl to make the GET request

Pass multiple select values to a function to update an image

I want to change an image depending on what two select values have been chosen. How would this be done dynamically with two separate select? Here's my code so far.
Html
<img class="prime" src="images/image_small.jpg">
<form>
Select image size:
<select onchange="twoselects(this)">
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
<option value="opt3">opt3</option>
</select>
</form>
Select image size:
<select onchange="twoselects(that)">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
<p id="optimus"></p>
Javascript
function twoselects(val, val2) {
// Not sure why you used this line
var image = document.querySelector(".prime").value;
var getValue = val.value;
var getValue2 = val2.value;
if (getValue == "opt1" && "option1") {
document.getElementById('optimus').style.backgroundImage= "url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')";
}
else if (getValue == "opt2" && getValue2 == "option2") {
document.getElementById('optimus').style.backgroundImage= "url('http://freebigpictures.com/wp-content/uploads/2009/09/coniferous-forest.jpg')";
}
}

You are sending one argument but accepting 2..i would suggest you not to send and accept any. Select elements using getElementById or querySelector
that in provided example is undefined.
function twoselects() {
var size1 = document.querySelector("#size1");
var size2 = document.querySelector("#size2");
var getValue = size1.value;
var getValue2 = size2.value;
if (getValue == "opt1" && getValue2 == "option1") {
document.getElementById('optimus').style.backgroundImage = "url('http://www.orderofinterbeing.org/wp-content/uploads/2014/04/light-forest.jpg')";
} else if (getValue == "opt2" && getValue2 == "option2") {
document.getElementById('optimus').style.backgroundImage = "url('http://freebigpictures.com/wp-content/uploads/2009/09/coniferous-forest.jpg')";
}
}
twoselects();
p {
width: 100%;
height: 200px;
}
<img class="prime" src="images/image_small.jpg">
<form>
Select image size:
<select id='size1' onchange="twoselects()">
<option value="opt1">opt1</option>
<option value="opt2">opt2</option>
<option value="opt3">opt3</option>
</select>
</form>
Select image size:
<select id='size2' onchange="twoselects()">
<option value="option1">option1</option>
<option value="option2">option2</option>
<option value="option3">option3</option>
</select>
<p id="optimus"></p>

dropdown option and action

I have a drop down and inside that i have options. On clicking the option it must display fields respectively.
Like for
option1 == one text box
option2 == two text box and so on...
<select id="dropdown">
<option value="A">option1</option>
<option value="B">option2</option>
<option value="C">option3</option>
<option value="D">option4</option>
</select>
on clicking option1 one field must be shown. on option2 two fields.. am new to javascript and html. Please help friends..

If you can use jquery it can be done like below. On change select a data attribute containing the number of textboxes to display. Then for loop through them and append.
Demo
Html:
<select id="dropdown">
<option value="A" data-number="1">option1</option>
<option value="B" data-number="2">option2</option>
<option value="C" data-number="3">option3</option>
<option value="D" data-number="4">option4</option>
</select>
<div id="textBoxContainer">
</div>
Javascript:
$('#dropdown').change(function(){
$('#textBoxContainer').empty();
var number = $(this).find('option:selected').attr('data-number');
for (var i = 0; i < number; i++){
$('#textBoxContainer').append('<input type="text"/>');
}
});

<select id="dropdown" onChange="showHide()">
<option value="A">option1</option>
<option value="B">option2</option>
<option value="C">option3</option>
<option value="D">option4</option>
</select>
function showHide()
{
hideAll();
var val = document.getElementById("dropdown").value;
if(val == "A")
document.getElementById("firstTextBoxId").style.display = 'block';
else if(val == "B")
document.getElementById("secondTextBoxId").style.display = 'block';
else if(val == "C")
document.getElementById("ThirdTextBoxId").style.display = 'block';
else if(val == "D")
document.getElementById("FourthTextBoxId").style.display = 'block';
}
function hideAll()
{
document.getElementById("firstTextBoxId").style.display = 'none';
document.getElementById("secondTextBoxId").style.display = 'none';
document.getElementById("thirdTextBoxId").style.display = 'none';
document.getElementById("fourthTextBoxId").style.display = 'none';
}