Unable to get a javascript/html searchbar to work - javascript

I am unable to get my searchbar to return results, I am trying to get the search bar to take in keywords, upon submit it should search for the keywords in all the <div> in my site rather than a single page and display the matches in my searchresults.html page.
<script type="text/javascript">
document.getElementById('button-submit').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:webflicks.co ' + document.getElementById('button-submit').value;
return false;
}
</script>
<div class="parent">
<div class = "search">
<form id="searchbox" method="get" action="/search" autocomplete="off">
<input name="q" type="text" size="15" placeholder="Enter keywords here..." />
<input id="button-submit" type="submit" value=""/>
</form>
</div>
</div>
</div>

You need to bind your submit event handler to the form, it won't fire on the button.
You'll also want to grab the value of the textbox and not the button.

Replace:
<script type="text/javascript">
document.getElementById('button-submit').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:webflicks.co ' + document.getElementById('button-submit').value;
return false;
}
</script>
with:
<script type="text/javascript">
document.getElementById('button-submit').onsubmit = function() {
window.location = "https://www.google.co.in/search?as_q="+ document.getElementById('button-submit').value +"&as_sitesearch=webflicks.co"; return false;
}
</script>
Hope this will help you..!!

Related

html button redirect to page specified in <input>

I need to redirect the user to a page specificed in an input tag.
<div id="center">
<input type="text" id="username" placeholder="Username">
<button onclick="location.href='rooms/VALUE'" id="connect">EnterRoom</button>
</div>
So where it says "VALUE" inside of the button tag, it would redirect to mysite.com/rooms/VALUE
the "VALUE" input would be inputted by the user inside the input tag.
Any simple way I can do this?
You can get the value of the input using
document.getElementById('username').value
<div id="center">
<input type="text" id="username" placeholder="Username">
<button onclick="location.href='rooms/' + document.getElementById('username').value" id="connect">EnterRoom</button>
</div>
If you are using jQuery then;
<button onclick="location.href='rooms/' + $('#username').val() " id="connect">EnterRoom</button>
and with the javascript
<button onclick="location.href='rooms/' + document.getElementById('username').value " id="connect">EnterRoom</button>
Here is a version with script separated from HTML of what you want.
<div id="center">
<input type="text" id="username" placeholder="Username">
<button id="connect">EnterRoom</button>
</div>
<script type="text/javascript">
var value = ""
var username = document.getElementById("username")
username.addEventListener('change', function (e) {
value = e.target.value
console.log(value)
})
var connect = document.getElementById("connect")
connect.addEventListener('click', function (e) {
location.href='rooms/'+value
})
</script>
You can use document.getElementById() in button tag.
onclick="location.href='rooms/' + document.getElementById('username').value"
Its good to have a separate javascript function to do redirect task.
In your HTML add onclick event for the button and in javascript function write code to validate and redirect.
HTML
<button onclick="toRedirect()" id="connect">EnterRoom</button>
Javascript
<script type="text/javascript">
function toRedirect(){
// get the user input
var user_value = document.getElementById('username').value ;
// check the validation
if(user_value!=''){
// redirect
location.href='rooms/' + user_value;
}else{
// alert error message
alert("validation error");
}
}
</script>

How do I manually test JavaScript?

I'm trying to learn javascript by making a simple price checking website using the Best Buy products API.
How do I "run" the javascript? My form takes in a product ID number (the SKU) and sends it to validateSKU() on submit. The function processData(data) searches for the product using the SKU.
Nothing is happening when I test the site, and any help would be great; thanks!
<!DOCTYPE html>
<html>
<head>
<title>Learn JavaScript</title>
</head>
<body>
<form id="bestBuyForm" name="bestBuyForm" onsubmit="validateSKU()">
<input id="SKU" name="SKU" required="" type="text">
<label for="SKU">SKU</label>
<input id="email" name="email" type="email">
<label for="email">Email</label>
<input class="button" id="submit" name="submit" type="submit">
</form>
<script>
function validateSKU() {
var SKU = document.forms["bestBuyForm"]["SKU"].value;
var bby = require('bestbuy')('process.env.BBY_API_KEY');
var search = bby.products('sku=' + SKU);
search.then(processData);
}
function processData(data) {
if (!data.total) {
console.log('No products found');
} else {
var product = data.products[0];
console.log('Name:', product.name);
console.log('Price:', product.salePrice);
}
}
</script>
</body>
</html>
Use web console to see what does happen and read about the console API.
Try to bind validateSKU with HTML element addEventListener method. Also you should prevent default form behaviour which cause page reloading on submit. Call event.preventDefault().
Working example code:
<html>
<form id="someForm">
...
<button type="submit">Submit</submit>
</form>
<script>
function validateSKU(event) {
console.log('IT works');
event.preventDefault();
// ...here your code
}
var form = document.getElementById('someForm');
form.addEventListener('submit', validateSKU, false);
</script>
</html>

JavaScript is not redirecting

My Javascript is not redirecting. Here is what I tried:
<html>
<head>
<title>Hello world</title>
</head>
<body>
<form method="POST">
Search: <input id="searchterm" type="text" name="searchterm">
<input type="submit" value="Submit" onclick="processFormData()">
</form>
<script>
function processFormData()
{
var term = document.getElementById("searchterm").value;
window.location = window.location.href + term;
}
</script>
</body>
</html>
I want user to be redirected to a specified url no matter of the url in browser. This should be universal on different machines. I am new to JS, please advise.
First, move the onclick event handler declaration to the <form> tag. Next, change it into an onsubmit event handler declaration. Finally add a return in front of it (to prevent default event handling, i.e. actually submitting the form):
<form method="POST" onsubmit="return processFormData();">
Search: <input id="searchterm" type="text" name="searchterm" />
<input type="submit" value="Submit" />
</form>
Then also add a return false; at the end of processFormData:
function processFormData()
{
var term = document.getElementById("searchterm").value;
window.location = window.location.href + term;
return false;
}
Fiddle here: http://jsfiddle.net/xwcvq7bf/
Use location.host. Try this:
function processFormData()
{
var term = document.getElementById("searchterm").value;
window.location = "http://"+location.host+"/"+term;
return false;
}
And,
<form method="POST">
Search: <input id="searchterm" type="text" name="searchterm">
<input type="submit" value="Submit" onclick="return processFormData()">
</form>
So, now your url will be like this: http://www.example.com/searchTerm
You can specify the url itself,
window.location = "url"+term;
If you wanna get only the hostname(http://www.example.com),
window.location = location.hostname +"/"+term;
or If you wanna get the href(http://www.example.com/home/about.htm),
window.location = location.href +"/"+term;

Enter key does not work in search box

Tried to search for this guys sorry. Input in the search box doesnt work (or search) when you hit enter only when the user clicks the search button. What am I doing wrong? Here is my code. Thanks.
<script type="text/javascript">
$(document).ready(function() {
$("#submit").click(function() {
var url = "http://asla.org/awardssearch.html";
url += "?s=" + $('#GoogleCSE').val();
window.location = url;
});
$('#GoogleCSE').keydown(function(event) {
if (event.keyCode == '13') {
$("#submit").click();
}
else {
//do nothing :)
}
});
});
</script>
<form class="navbar-form navbar-right" role="search">
<div class="search">
<input id="GoogleCSE" type="text" onblur="if(this.value=='')this.value=this.defaultValue;" onfocus="if(this.value==this.defaultValue)this.value='';" value="Search All Awards" name="Search All Awards" />
<input id="submit" type="button" value="Search" />
</div>
</form>
If you changed your #submit element's type to "submit", you wouldn't need to manually handle this yourself anyway as this is default browser behaviour:
<input id="submit" type="submit" value="Search" />
Now rather than handling the #submit button's click event, we can instead handle the form element's submit event:
$('form[role="search"]').submit(function() {
var url = "http://asla.org/awardssearch.html";
url += "?s=" + $('#GoogleCSE').val();
window.location = url;
});
JSFiddle demo.
Through $("#submit").click() you're just triggering the click handlers added by yourself, not the controls default behavior when you click on it.
Use yourForm.submit() instead and change the url in its callback:
$("#yourForm").submit(function() {
var url = "http://asla.org/awardssearch.html";
url += "?s=" + $('#GoogleCSE').val();
window.location = url;
});

validate multiple URL input fields

I have following Javascript validation function that should check that the URL posted to my php are OK - if not display a message to correct the entry.
I must have done a mistake somewhere because it is not working and my console.log says: ReferenceError: Can't find variable: $
validateFormbasic.html:12
onsubmitbasic.html:24:95
Could you tell me how to fix it please? Thanks a lot!
<form method="POST" name="inputLinks" onsubmit="return validateForm();">
<input type="text" name="web1" id="url1" placeholder="domain.com">
<input type="text" name="web2" id="url2" placeholder="domain.com">
<input type="text" name="web3" id="url3" placeholder="domain.com">
<input type="submit" name="Submit" value="Done" />
</form>
<script type="text/javascript">
function validateURL(web1, web2, web3) {
var reurl = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
return reurl.test(url);
}
function validateForm()
{
// Validate URL
var url = $("#url1", "#url2", "#url3").val();
if (validateURL(url)) { } else {
alert("Please enter a valid URL, remember including http://");
}
return false;
}
</script>
As Alberto's comment mentions, it looks like jQuery isn't loaded at the point of calling the function. It also looks to me as if you're syntax for selecting the URL values isn't quite right.
I would use something along the lines of:
<form method="POST" name="inputLinks">
<input type="text" name="web1" id="url1" class="url" placeholder="domain.com" />
<input type="text" name="web2" id="url2" class="url" placeholder="domain.com" />
<input type="text" name="web3" id="url3" class="url" placeholder="domain.com" />
<input type="submit" name="Submit" value="Done" />
</form>
<script type="text/javascript">
$(function(){
function validateURL(url) {
var reurl = /^(http[s]?:\/\/){0,1}(www\.){0,1}[a-zA-Z0-9\.\-]+\.[a-zA-Z]{2,5}[\.]{0,1}/;
return reurl.test(url);
}
$('form').submit(function(e){
var isValid = true;
$('.url').each(function(){
isValid = validateURL($(this).val());
return isValid;
});
if (!isValid){
e.preventDefault();
alert("Please enter a valid URL, remember including http://");
}
});
});
</script>
Update
Demo JS Fiddle

Categories

Resources