html javascript search not working - javascript

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
}

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);
}

Reference error document is not defined in javascript

I am using bracket editor when I save the bill.js editor show some
error at every document the desired output is not coming.
HTML code is
<!DOCTYPE html>
<html lang="en">
<head>
<title>split Bill</title>
<link rel="stylesheet" type="text/css" href="normalize.css">
<link rel="stylesheet" type="text/css" href="splitbill.css">
</head>
<body>
<div id="container">
<h1>Bill calculator</h1>
<div id="calculator">
<form>
<label>
How Much your Bill ? <br>
Rupees <input type="text" id="billAmount">
</label>
<label>
How was your Service sir?<br>
<select id="serviceFeedback">
<option disabled selected value="0">
--Choose an option--
</option>
<option value="0.4">
40% -Very Good
</option>
<option value="0.3">
30% - Good
</option>
<option value="0.2">
20% - it was Ok
</option>
<option value="0.1">
10% - Bad
</option>
<option value="0.05">
5% - poor
</option>
</select>
</label>
<label>
How many people sharing the bill?<br>
<input type="text" id="totalpeople">
people
</label>
<button type="button" id="calculate">calculate!</button>
</form>
</div>
<div id="totalTip">
<sup>Rupees</sup><span id="tip">0.00 </span>
<small id="each">each</small>
</div>
</div>
<script type="text/javascript" src="bill.js"></script>
</body>
</html>
javascript is here I didn't get desired output at every document function there is error sign please tell me what I do I am using bracket editor.
why I got this I am using
at the end of HTML code
//create function
function calculateTip() {
var billAmount = document.getElementById("billAmount").value;
var serviceFeedback = document.getElementById("serviceFeedback").value;
var numpeople =document.getElementById("totalpeople").value;
//validation
if (billAmount =="" ||serviceFeedback == 0) {
window.alert("please enter some value Boss!");
return;
}
//if input is empty
if (numpeople =="" ||numpeople <= 1) {
numpeople =1;
document.getElementById("each").style.display ="none";
} else {
document.getElementById("each").style.display ="block";
}
var total = (billAmount * serviceFeedback) / numpeople;
total = Math.round(total * 100) / 100;
total = total.toFixed(2);
//display the tip
document.getElementById("totalTip").style.display = "block";
document.getElementById("tip").innerHTML = total;
}
// hide tip amount
document.getElementById("totalTip").style.display ="none";
document.getElementById("each").style.display ="none";
//clicking the button calls our custom function
document.getElementById("calculate").onclick=function()
{
calculateTip();
}
In the function "calculateTip" I found the line:
if (billAmount =="" || ServiceFeedback == 0) {
Here ServiceFeedback starts with a capital letter instead of a lower case letter.
The selected option of a select-Field you get like that:
let selectElement = document.getElementById("serviceFeedback");
let serviceFeedback = selectElement.option[selectElement.selectedIndex].value;
In the html file I found an other problem:
<input type="text" id="totalpeople ">
There is a blank at the end of the id! Better would be:
<input type="text" id="totalpeople">
In the javascript file there is an other blank:
document.getElementById("each").style.display = " none";
Better would be:
document.getElementById("each").style.display = "none";
I hope that helps.
To ReferenceError: document is not defined I found that:
ReferenceError: document is not defined (in plain JavaScript)
=> My questions are:
What does bill.js contain?
Where is calculateTip() called?
I mean: Is anywhere a call like that document.getElementsBy... before the document is created?

Cannot fetch data from json using select in 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>

Page not updating when clicking submit

I have HTML and JavaScript code, which must, after clicking submit, change the page. The problem is, when I click the submit button, the page remains the same.
Thanks for the help.
HTML:
<html>
<head>
<title>MyApp</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
<form id="cart" action="/page" method="POST">
<div id="navigation">Select ID:
<select id="state" type="text">
<option value>-select-</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</form>
<div>
<input type="submit" value="submit" id="submit">
</div>
<script src="script.js"></script>
</body>
</html>
JavaScript:
function() {
"use strict";
var state = document.getElementById('state');
document.addEventListener('DOMContentLoaded', function() {
document.getElementById('cart').addEventListener('submit', estimateTotal);
var btnEstimate = document.getElementById('submit');
btnEstimate.disabled = true;
state.addEventListener('change', function() {
if (state.value === '') {
btnEstimate.disabled = true;
} else {
btnEstimate.disabled = false;
}
});
});
function estimateTotal(event) {
event.preventDefault();
if (state.value === '') {
alert('Please choose your shipping state.');
state.focus();
}
}
})();

hide the extra spacing taken by visibility:hidden

hello i want to hide the extra spacing taken by visibility:hidden. In the code when i select sort by date then it is replaced by default content, but when select sort by topic it comes under sort by date output. But i don't want this. I want to replace o/p of sort of topic to sort by date. I think it comes because of using visibility:hidden. Can anyone suggest me how i remove that space. I used display:none too, but no use.
<html>
<head>
<script>
function onloadfun()
{
document.getElementById("hideall").style.visibility="hidden";
}
function optionCheck()
{
if( document.getElementById("sorting").value=="bydate")
{
document.getElementById("topic1").style.visibility ="visible";
document.getElementById("topic").style.visibility ="hidden";
document.getElementById("showByDefault").style.display ="none";
}
if( document.getElementById("sorting").value =="bytopic")
{
document.getElementById("topic1").style.visibility ="hidden";
document.getElementById("topic").style.visibility ="visible";
document.getElementById("showByDefault").style.display ="none";
}
// validation of dropdownlist
var x = document.getElementById("sorting");
var option = x.options[x.selectedIndex].value;
var strUser1 = x.options[x.selectedIndex].text;
if(option=="s")
{
document.form.options.focus();
return false;
}
return true;
}
</script>
</head>
<body onLoad="onloadfun()">
<form name="form">
<select id="sorting" style="width:140px" onChange="optionCheck()">
<option id="s">---Sort By----</option>
<option value="bydate">Sort By Date</option>
<option value="bytopic">Sort By Topic</option>
</select>
</form>
<br /><br /><hr /><br /><br />
<?php include 'connection.php'; ?>
<div id="showByDefault">
<?php
echo "default content";
?>
</div>
<div id="hideall">
<div id="topic1">
<?php echo "hideing 1"; ?>
</div>
<div id="topic">
<?php echo "hideing 2"; ?>
</div>
</div>
</body>
</html>
Some reading:
visibility
The visibility CSS property has two purposes:
The hidden value hides an element but leaves space where it would
have been. The collapse value hides rows or columns of a table. It
also collapses XUL elements
display
In addition to the many different display box types, the value none
lets you turn off the display of an element; when you use none, all
descendant elements also have their display turned off. The document
is rendered as though the element doesn't exist in the document tre
An example based on your code but using display and setting it by a class using Element.classList.
var sorting = document.getElementById('sorting'),
showByDefault = document.getElementById('showByDefault'),
topic = document.getElementById('topic'),
topic1 = document.getElementById('topic1');
sorting.addEventListener('change', function optionCheck(e) {
var target = e.target;
if (target.value === 's') {
console.log('Do something here.');
} else if (target.value === 'bydate') {
topic1.classList.remove('hide');
topic.classList.add('hide');
showByDefault.classList.add('hide');
} else if (target.value === 'bytopic') {
topic1.classList.add('hide');
topic.classList.remove('hide');
showByDefault.classList.add('hide');
}
}, false);
#sorting {
width: 140px;
}
hr {
margin-top: 2em;
margin-bottom: 2em;
}
.hide {
display: none;
}
<form name="form">
<select id="sorting">
<option value="s">---Sort By----</option>
<option value="bydate">Sort By Date</option>
<option value="bytopic">Sort By Topic</option>
</select>
</form>
<hr>
<div id="showByDefault">"default content";</div>
<div id="topic1" class="hide">"hiding 1";</div>
<div id="topic" class="hide">"hiding 2";</div>
The example is using unobtrusive JavaScript and unobtrusive CSS.
The principles of unobtrusive JavaScript
Change your code as follows.
I preferred to use display:block and display:none instead set visiblity
and also recommend jquery $(selector).show() and $(selector).hide() method.
<html>
<head>
<script>
function onloadfun() {
document.getElementById("hideall").style.display = "none";
}
function optionCheck() {
if (document.getElementById("sorting").value == "bydate") {
document.getElementById("hideall").style.display = "block";
document.getElementById("topic1").style.display = "block";
document.getElementById("topic").style.display = "none";
document.getElementById("showByDefault").style.display = "none";
}
if (document.getElementById("sorting").value == "bytopic") {
document.getElementById("hideall").style.display = "block";
document.getElementById("topic1").style.display = "none";
document.getElementById("topic").style.display = "block";
document.getElementById("showByDefault").style.display = "none";
}
// validation of dropdownlist
var x = document.getElementById("sorting");
var option = x.options[x.selectedIndex].value;
var strUser1 = x.options[x.selectedIndex].text;
if (option == "s") {
document.form.options.focus();
return false;
}
return true;
}
</script>
</head>
<body onLoad="onloadfun()">
<form name="form">
<select id="sorting" style="width:140px" onChange="optionCheck()">
<option id="s">---Sort By----</option>
<option value="bydate">Sort By Date</option>
<option value="bytopic">Sort By Topic</option>
</select>
</form>
<br />
<br />
<hr />
<br />
<br />
<?php //include 'connection.php'; ?>
<div id="showByDefault">
<?php echo "default content"; ?>
</div>
<div id="hideall">
<div id="topic1">
<?php echo "hideing 1"; ?>
</div>
<div id="topic">
<?php echo "hideing 2"; ?>
</div>
</div>
</body>
Try changing above three function in your code.
Use display:none instead of visibility hidden.
See example: http://www.w3schools.com/css/css_display_visibility.asp

Categories