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>
Related
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);
});
});
I have a form that looks like:
<form id="search-form" action="about:blank" target="none">
<input type="text" id="search-text">
<button id="search-submit"> Go! </button>
</form>
<iframe name="none" style="display:none"></iframe>
While I don't want my form to update the page, yet I want autocomplete to work properly so I send a blank page to the iframe every time the form is submitted.
Will this solution work on every browser? (Or should I create a "/blank" blank page response on the server...)
I have a simple Google Chrome extension that produces a popup (HTML) when the icon is click. I want the user to be able to provide an ID number into the text box, and when clicking GO, the a new tab is opened and the user is taken to "http://www.staticURL.com/items/itemID=XXXXX" where the first part of the URL is unchanging, but the XXXXX is replaced with the textbox values.
So far I've been able to enter my function, but nothing happens when I click the button.
popup.html:
<html>
<body>
<form method="post" name="idpopup" action="">
<fieldset>
<legend><b>HelpDesk ID Number</b></legend>
<input type="text" id="idbox" size="25" maxlength="6" autofocus>
<input type="button" value="Go" id="gobutton"/>
</fieldset>
</form>
</body>
<script src="scripts.js"></script>
</html>
scripts.js:
function goHDLink(){
alert("goHDLink");
//window.location = "http://www.staticURL.com/items/itemID="+document.getElementById("idbox").value;
}
document.querySelector('#gobutton').addEventListener('click', goHDLink);
So I get the popup, but no navigation to the URL. Any ideas?
I don't think your problem has anything to do with the extension.
window.location = "..."
Should be
window.location.replace("...");
OR
window.location.href = "...";
If it does have something to do with the extension it may be a permissions issue. Check this question:
Google Chrome Extensions - Open New Tab when clicking a toolbar icon
Got it:
window.open('http://www.staticURL.com/items/itemID='+document.getElementById("idbox").value,'_newtab');
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
I have one html page, with a form on it. When the user posts the form, I want the form receiving the response to automatically open up the URL passed by the post in a new browser window.
Basically the URL is passed to the the other page, which in turn opens the URL in a new window then displays another form.
Thanks in advance.
Cheers
Shane
Add target="_blank" attribute to the <form>.
<form action="http://google.com/search" target="_blank">
<input type="text" name="q" />
<input type="submit" />
</form>
This will show the response in a new (blank) window. Note that this happens before the HTML page is loaded (it wouldn't make much sense otherwise).