I want to create an HTML form that uses data in the dialog boxes to modify a destination URL in specific spots in the destination URL.
I'm just trying to centralize the location where I enter what I am searching for but it will pass a URL and load the page with the results without me having to first load each separate tools search page, then enter data and wait for results. I looking to remove the middle man of each separate tools search page.
something eg like this;
UPDATE:
HTML form
<form>
Search: <input id="search" type="text" value="" />
<input type="button" value="Go" onclick="setSearchTerm()" />
</form>
javascript
<script>
function setSearchTerm(n){
var UID_VALUE = encodeURIComponent(document.getElementById("search").value);
location.href = "http://xx.xxxx.something.com/perl/search?searchtype=loginid&type=4&uid=" + UID_VALUE + "&visualtype=html%2Fen&tabset=person";
}
</script>
you need to change http://xx.xxxx.something.com to your the address the search page is running from
Related
I'm building a guessing game that works with user input. When the user inputs a word and submits, it should be taken to a new webpage with an iframe that contains a google page with the search for the element inputed.
For example, if I submit 'cats', i should be taken to a new webpage with an iframe that contains a google page with the search results for 'cats'
This is what I have now. It goes to said new page, but the iframe is empty. My question is: how do you submit the input to the google page in the iframe and redirect the user to the page at the same time?
<p>Choose search for <em>Player 2</em> to guess.</p>
<form action='https://www.google.com/search' method='get'>
<input name='q' type='text' autofocus autocomplete='off' placeholder='Search'>
<button class='btn btn-primary' type='search'>Search</button>
</form>
Google probably doesn't like this sort of usage. Here is how Chrome's javascript console complains when clicking through from Bing to Google inside an iframe:
"(index):1 Refused to display 'https://www.google.com/' in a frame because it set 'X-Frame-Options' to 'sameorigin'."
Other than that, here is something that gets some content into an iframe based on user text input from the outer page:
<html>
<body>
Clue: <input id="userInput" placeholder="Try entering: google" type="text">
<hr>
<iframe id="innerSpace" width="90%" height="90%"></iframe>
<script>
let is = document.getElementById('innerSpace');
let ui = document.getElementById('userInput');
ui.addEventListener('change', searchFor);
function searchFor() {
// generates an error page:
// `https://www.google.com/search/?q=${query}`;
// this seems to generate some content:
let query = encodeURIComponent(ui.value);
is.src = `https://www.bing.com/search/?q=${query}`;
}
</script>
</body>
</html>
I put a search bar into my website but I don't know how to make it actually search pages within my site. I don't want a google search bar where you can search anything. I already have the search bar in my site, but nothing happens when you press search. Help is much appreciated.
here is the html to my search bar:
<div class="search">
<form class="form-wrapper-2 cf">
<input type="text" placeholder="Search Yacht..." required>
<button type="submit">Search</button>
</form>
</div>
A somewhat straight forward suggestion if you don't want some type of Google Searchbar would be to run a script on submission of the form that searches the text in each of the web pages in your working directory to find a match, then display a page with links to the found matches.
I will use PHP for my description of how this is done.
With this in mind, first learn how to read entire pages (i.e. webpages) into a string:
http://php.net/manual/en/function.file-get-contents.php
//YOU WILL HAVE TO LINE THIS UP WITH YOUR WORKING FILE NAMES
$home = file_get_contents('./home.php', FILE_USE_INCLUDE_PATH);
or I suppose you could just search for the actual webpage/URL like so:
$home = file_get_contents('http://www.example.com/');//IMAGINE THIS IS REALLY HOME.PHP
$homePageName = "home.php";//JUST HERE TO SHOW AN EXAMPLE
Example:
///YOUR FORM/INPUT BOX
<form action="search.php" method="post">
<input type="text" name="findMe" placeholder="Search Yacht">
</form>
Now search.php
$search = $_POST['findMe'];
//$search = "example";//THIS WOULD WORK, BUT I WAS SHOWING HOW TO USE FORM
//IF WORD FOUND IN HOME PAGE
if (stripos($home, $search) !== false) {//USING EXAMPLE.COM TO SHOW IT WORKS
echo ''.$homePageName.'';
}
Then if you want to be simplistic and not use an array to store the found pages, take the same code above and use it for every page you want searched (i.e. home, about, products, etc..).
Now a user can search your site (or the pages you want indexed), to find all pages that have matching text. If you want specific keywords to be searched, just add them to the page metadata and the process I have described will still work as it searches everything that makes up the page.
<meta name="keywords" content="keyword1, keyword2, keyword3 " />
Here's the sample HTML form code for search bar:
<form id="sarchform" class="search2" method="get" action="source.html" />
<input class="search2" id="test" type="text" name="search" size="10" maxlength="255"/>
Here's the JS code:
<script type="text/javascript">
document.getElementById('searchform').onsubmit = function() {
window.location = 'http://www.google.com/search?q=site:yourdomainname ' + document.getElementById('test').value;
return false;
}
</script>
Mention your domain name in the code above and try implementing this.
I am only starting to learn to code with HTML, so if this question seems trivial or simple, I apologise in advance.
Suppose I have a form, like
<form><input type="url" name="url"><input type="submit" value="Go"></form>
How do I make the submit button go to the url that the user types in?
You cannot do that using pure HTML. The form will always post/get to the URL which the action attribute of the form points to.
However, with some javascript you can do this.
This should work:
<form id="form" method="get">
<input type="url" name="url" onchange="document.getElementById('form').action = this.value;">
<input type="submit" value="Go">
</form>
What this does is it uses the onchange event of the url input box so everytime that changes, the action of the form is updated.
In addition to the sending the user to the url when they hit submit, are you trying to save the url that is typed in?
If so you will need more than HTML to accomplish this, probably php + sql would be the easiest route to save it.
However, if all you're trying to do is let a user go to the url they are typing in, you could accomplish this through javascript or jquery.
For example in your html:
<form>
<input id="url" type="url" name="url">
<input type="button" value="Go" />
</form>
Then add this jquery:
$('input[type=button]').click( function() {
var url = $('#url').text();
$(location).attr('href', url)
});
Try this: http://jsfiddle.net/p6zxg25v/2/
I have a form within an html page that has the action set to another html page. Within Chrome, FF, and Safari, when I click on the first html page's Go button, I am taken to the second page with the URL containing the query string.
All browsers, with the exception of IE, show the query string in the URL when I submit the form.
How can I make the form submission show the query string in IE when working with local html files? Any help would be appreciated.
HTML Form
<form method="Get" action="destination.html">
<input type="hidden" value="test" name="name" />
<input type="submit" value="Go"/>
</form>
This answer uses jQuery/JavaScript, which may or may not be a little much for the simplicity of what you're trying to do, but if you already have jQuery on the page it's not too hard to try this methodology:
In your HTML <input>, add an Id.
<input type="hidden" id="field" name="field" value="showthis" />
In your script tags, try this:
$(document).ready(function() {
$('#submit-text').click(function () {
var field = $('#myField').val();
window.location.replace('destination.html?field=' + field);
});
});
It looks like I can create a date-range selection tool using the instructions here:http://answers.oreilly.com/topic/136-how-to-create-a-calendar-date-picker-with-javascript/
But I want to then take those two dates, insert them into the URL and reload the page when a user selects 'submit' after choosing two dates... which will then limit the data displayed to only that date range. That functionality is already available but right now I have to manually type in the beginning and end date. I want to code it into the page so that there are two calendar pickers that I submit, then the url is updated with those and the data is reloaded on the page.
Can someone point me in the right direction about how to do this?
Many thanks from a coding noob!
Could you do something like this?
<?php
if( isset($_GET['method']) && $_GET['method'] == 'set-date-range' ) {
// Do stuff with the dates
// $_GET['date-one']
// $_GET['date-two']
}
?>
<form action="mygraph.php" method="get">
<input type="hidden" name="method" value="set-date-range">
<input type="text" name="date-one" />
<input type="text" name="date-two" />
<input type="submit" value="Submit" />
</form>
Edit:
When you submit the form, it will "refresh" the page (since it is pointing back to itself) and you'll have easy access to those dates up in the URL. So anywhere in that page, you can $_GET['whatever-date-you-want'] and echo it out or whatever you wish.
Note: The extension of your page needs to be .php instead of .html so that you have the option to write some PHP code.
Edit 2:
So, when you submit the form, the URL will look like:
...mygraph.php?method=set-date-range&date-one=1-1-2012&date-two=10-2-2012
You can then access those dates like this:
$_GET['date-one'] or $_GET['date-two']