custom search bar on my custom homepage - javascript

I need to constantly search files such as smss.exe at http://www.winpatrol.com/db/pluscloud/.
Is there a way I can make a customized searchbar on my custom homepage that will do this for me?
So if I type smss into the search bar it will take me to http://www.winpatrol.com/db/pluscloud/smss.html
I tried in pure HTML with GET requests and can't find a way to do it. I was thinking maybe there is a Javascript way or something.

Something like this is pure Javascript and will work, but if the user enters a non-existent page on that site, it will just lead to their not found page.
You could use server side PHP or something similar to achieve this in a better way.
Here is the JS solution with little error checking:
<form onsubmit="return redirect()">
<input id="search_form_input" type="text" name="query" />
<input type="submit" value="Search" />
</form>
<script type="text/javascript">
function redirect()
{
var query = document.getElementById('search_form_input').value;
if (query != '') {
window.location = 'http://www.winpatrol.com/db/pluscloud/' + query + '.html';
}
return false;
}
</script>

Google custom search is what you're probably looking for.

Related

How to make my search bar complete its search

So, I'm trying to write this restaurant Finder app (just a fun project for myself), and I want there to be a search bar to connect what the user has typed (say chicken) into Yelp and be able to search for chicken restaurants.
Yelp's url for that is this: https://www.yelp.com/search?find_desc=chicken&find_loc=Richfield%2C%20MN. I want to be able to take "https://www.yelp.com/search?find_desc=", add x (what the user inputs), and then have the program piece it all together: "https://www.yelp.com/search?find_desc=" + "user search query". Doing it like this just brings me to "https://www.yelp.com/search?find_desc=&find_loc=Richfield%2C+MN". Any ideas?
<div id='content'>
<div id='content-app'>
<input type='text' id='field1' readonly value=''/>
<button onclick='search(<a href="https://www.yelp.com/search?cflt=)' id='search' style='width:80px'><a href="https://www.yelp.com/search?find_desc=" + "field1 readonly value text">Search</button>
There are a number of mistakes in the code that you've posted.
I've created an example below based on what I think you're trying to accomplish. This example demonstrates how to take the input from a text field, build a request URL, and redirect the browser to that URL.
function search() {
// Get value from search text field
var search = document.getElementById('search').value;
// Build Yelp request URL
var yelpUrl = 'https://www.yelp.com/search?find_desc=' + search;
// Redirect browser to Yelp request URL
window.location = yelpUrl;
}
<input id="search" type="text" />
<button onclick="search()">Search</button>
The example can be improved further by not using onclick(), and to instead use the addEventListener() function. But I think you can work up to using that.

How to get a DIV element from an external webpage in HTML file?

Apologies in advance if this question has been asked earlier. I did find some similar questions on web but I couldn't figure out the answer still. You can say I have never dealt with anything beyond basic HTML. So any help would be appreciated.
I have a HTML file (Say text.html) only for personal use. In the file, there will be an input box for entering text and a submit button. I want that if I clicks on submit, it opens a particular hyperlink from an external webpage based on the input text. I guess it's like "I am feeling Lucky" of Google.
Example: If the user enters "Test" and clicks on Submit, it should open the second result from the page "https://www.google.com/search?q=test"
Here is my HTML:
<!DOCTYPE html>
<html>
<body style="background-color:beige">
<h1 style="text-align:center"><font size="14">Test</font></h1>
<style type="text/css">
</style>
<form id="form">
<div align="center" style="vertical-align:bottom">
<input type="text"
value="Test"
id="input"
style="height:50px;width:200px;font-size:14pt;">
</div>
</form>
<TABLE BORDER="0">
<TD><button class="button" id="button01">SUBMIT</button></TD>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('#button01').click(function(e) {
var inputvalue = $("#input").val();
window.open("https://www.google.com/search?q="+inputvalue);
});
</script>
Also, here is the example of the div element from the page on which the hyperlink I want to open is on:
<div id="XYZ" class="contentEditValue" style="float:left;width:180px;">
2nd Result
</div>
I have read that it can be achieved with PHP or Jquery and all but they are not something I have ever worked on. Thank you very much in advance for any help!
Appreciate any other alternatives as well.
You shouldn't be able to do that because of security. If that (reading content from iframes, other browser windows...) would be possible, an attacker could add JS keylogger to your internet banking login or read your messages on Facebook. CORS (https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS) is used to block these requests and if the website doesn't say explicitly that you are allowed to do something with its content, most browsers won't allow you that.
You have are missing a }); to close the ready() function
<script type="text/javascript">
$(document).ready(function(){
$('#button01').click(function(e) {
var inputvalue = $("#input").val();
window.open("https://www.google.com/search?q="+inputvalue);
});
});
</script>
Here's a basic example of how to do this in PHP.
Taking JavaScript/JQuery out of the picture, let's just say you have a basic form:
<form>
<input type="text" value="Test" name="input">
<input type="submit">
</form>
Without specifying action or method attributes on the <form> tag, the form will make an HTTP GET request to the URL of the page it is on, so for this example the PHP code will be on the same page as the form. Here's a more detailed description of sending form data if you're interested.
Now that you have a way to pass the input to the PHP script*, there are three basic parts to this problem.
Make a request to the page you want with a query string including your input
http_build_query is an easy way to construct a properly encoded query string to use with your request. For this example we'll use file_get_contents to make the request. There are other ways to do it, including cURL, but let's keep it simple.
$query = http_build_query(['q' => $_GET['input']]);
$page = file_get_contents('http://www.example.com/?' . $query);
I'm not using Google for this example because it's a bit more complicated to find the right links in the response and follow them. (Partially because they don't really want you to do it that way.)
Find the link you want in the response
Don't try to find the link in the response with regex. You'll have problems with it, come back to Stack Overflow to try to solve them, and people will tell you that you shouldn't be using regex, so just skip that part and use a DOM parser.
$doc = new DomDocument;
$doc->loadHTML($page);
$links = $doc->getElementsByTagName('a');
$url = $links[0]->getAttribute('href');
I used getElementsByTagName() to find links, but if the page is more complex an xpath query will work better. Also, I used the first link ($links[0]) because example.com only has one link. $links[1] would get you the second link if it existed.
Follow the link
header("Location: $url");
exit;
If everything goes well, you'll end up where you want to be. But there are a lot of things that can go wrong. If you're requesting a resource that you have no control over, it can change at any time without any advance warning to you, so your code that finds the link may stop working. You may get blocked from making requests. Scraping links from sites like this violates the terms of service on many sites, so check that out beforehand. You may find that the site offers a web API, which should be a much better way to access its content than this.
*You don't really need a form for this; you can just pass the input parameter in the URL to your page.

Document.write on a different html page

Hmm is it possible to document.write on other html page?
For example I create a two html page, the first page have a textfield and submit button. I enter a text in a textfield and after I click the submit button the value of the textfield will be transfer to the second html page and load the html page and write the value on it.
Just a beginner to javascript so bear with me please :D
You can do this by using Query String.
window.location = "Pass.aspx?variabletopass=test";
Use this line of where you are trying to redirect your page,and value of your textfield in query string.
Since you're using pure javascript and HTML, I assume server-side things are out of the picture. So Felix Kling's comment is actually, I think, a good way to go. Here's one way you could use localStorage to make this work:
/* index.html */
<form action="result.html" onsubmit="submit()">
<input type="text" id="input">
<input type="submit" value="Submit">
</form>
<script>
function submit() {
var input = document.getElementById("input").value;
localStorage.input = input;
}
</script>
/* result.html */
<div id="result"></div>
<script>
document.getElementById("result").innerHTML = localStorage.input;
</script>
Without using php you can document.write() submitted text on other html file as follows.
<html>
<script>
var a = document.location.toString();
var b = a.slice(a.indexOf("?")+1,a.length);
var c = b.split("&");
for(i=0;i<c.length;i++){
document.write(c[i]);
}
</script>
</html>
If you are working on Single page Application you can quite easily achieve this, by just storing the value in correct scope.
If you are on multiple page application you can achieve this by any of the following ways:
sending parameter in url
storing value in localStorage/sessionStorage
storing it in cookie(Not recommended)
sending it to server in forms param(Not recommended)

adding the 'custom' hidden field to simplecart (paypal)

I would like to send over some custom data to the Paypal Checkout using the 'custom' hidden form field. When not using SimpleCart.js, this is as easy as appending this to the html form:
<input type="hidden" name="custom" value="My Custom data">
Any idea how I can achieve the same thing with simplecart?
Looking through the source I can see where the form is created/submitted.
generateAndSendForm: function (opts)
{
var form = simpleCart.$create("form");
form.attr('style', 'display:none;');
form.attr('action', opts.action);
form.attr('method', opts.method);
simpleCart.each(opts.data, function (val, x, name)
{
form.append(
simpleCart.$create("input").attr("type","hidden").attr("name",name).val(val)
);
});
simpleCart.$("body").append(form);
form.el.submit();
form.remove();
}
So, I could just modify this code to make it work, but I'm sure there there must be a better way. Anyone have any ideas?
Adding anything extra in simple cart requires adding a simple class...
For example,
<input type="hidden" name="custom" value="My Custom data" class="item_customdataname">
Notice my class and nomenclature. "item_customdataname".
However, due to the nature of simplecart, I'd reccomend the following;
<span style="display: none;" class="item_customdataname">My Custom data</span>
Not to say using a hidden input wouldn't work...
E
old thread, but may be interesting for somebody else.
you are looking at the wrong method:
generateAndSendForm:
is used to generate a form that will (most likely) POST data to your backend
what you want to be looking at is:
simpleCart.extendCheckout({
PayPal: function (opts) {
[...]
and you may want to add:
if (opts.custom) {
data.custom = opts.custom;
}
somewhere after the equivalent for notifications:
if (opts.notify) {
data.notify_url = opts.notify;
}
I have not tested it personally but it should do exactly what you need

Ajax, how to get data from an HTML form

I'm driving myself crazy with Ajax at the moment, there is something that im not getting.
I want a user to input their password, then their new password twice, but i want to use Ajax to send that data to a PHP script to check it and to store the new password in the database if needed.
I just don't understand how to get the data from the HTML form to the Ajax script. Everywhere i look on the internet the information just seems to confuse me that little but more, this always seems to be the case when trying to find help with Java related product i feel.
So heres teh Ajax:
ajaxRequest.onreadystatechange = function()
{
if(ajaxRequest.readyState == 4){
//document.myForm.time.value = ajaxRequest.responseText;
document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
}
}
var queryString = "?oldpass=" + oldpass + "&newpass=" + newpass + "&newpassretype=" + newpassretype;
ajaxRequest.open("post", "serverTime.php", true);
ajaxRequest.send(queryString); //Would use this to send post data (passwords) to the script
I have missed out all the broswer specific stuff because im sure you've seen it all before.
<form>
<input type="password" name="oldpass" id="oldpass" />
<input type="password" name="newpass" id="newpass" />
<input type="password" name="newpassretype" id="newpassretype" />
<input type="submit" onclick="ajaxFunction('oldpass', 'newpass', 'newpassretype')" name="button2" id="button2" value="Change Password" />
<div id="txtHint"></div></form>
I think i miss something here, but i haven't got a clue what it is! ANy ideas?
thanks for your time and i hope this isn't something silly.
Just change this one line and it will work...
var queryString = "?oldpass=" + document.forms[0]["oldpass"].value +
"&newpass=" + document.forms[0]["newpass"].value +
"&newpassretype=" + document.forms[0]["newpassretype"].value;
2 things though...
You're passing the password and the confirmation in the URL. That's not needed as you should check that they're the same at client side, rather than send them to be checked at server side.
You shouldn't send password information in a URL as it's the easiest thing in the world to capture.
You have hard coded strings that you are passing to ajaxFunction, you need to use DOM to access the form fields and get their values. You also need to run encodeURIComponent over them to make them safe to drop into the query string.

Categories