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');
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>
My site has a page where I can parse specific logs by filling out form fields and pressing a submit button.Sometimes I have to parse 100 different logs(which are automatically downloaded by my site from another FTP location) so I'm trying to make it as automated as possible. I have created a file on my local PC named log.html with this content
<form action="MYSITEURL" method="POST" target="_blank" >
<input type="password" name="password" value="MYPASSWORD"/>
<input type="text" name="LogCommand" value="NAME-OF-THE-LOG-AND-LOCATION"/>
<input type="submit" value="Submit1stLog" />
</form>
When I open the log.html file on my local PC, it opens with Firefox and I can see 2 fields which are automatically filled with password and some other info that I need about the log file names and commands, and I have a Submit button. When I manually press Submit, the local file connects to my website and sends those values and submits it.Basically I fill out the form locally instead of going to my website. This way I can have 100 lines like the above one within one local HTML file and press 100 submit buttons manually, instead of going to my site 100 times.
My goal is to have some sort of JavaScript or something similar that will automatically click the Submit button for me as soon as I open the log.html local file.Is this possible? What if I have 100 Submit buttons?
I tried to put the following in log.html but it didn't work
<form action="MYSITEURL" method="POST" target="_blank" > <input type="password" name="password" value="MYPASSWORD"/> <input type="text" name="LogCommand" value="NAME-OF-THE-LOG-AND-LOCATION"/> <input type="submit" id="Submit1stLog" value="Submit1" /> </form>
<script>
function clickButton()
{
document.getElementById('Submit1stLog').click();
}
</script>
If you noticed,I added the id="Submit1stLog" part and then tried to get element ID. This didn't work and I'm terrible at this if you noticed so any help is appreciated !
Thank you.
Try to submit on page load :
window.onload = function(){
document.forms['FORM_NAME'].submit()
}
or you can also click button on page load , but submiting form might be better idea
Here is the Code :
<form name="SITEURL" action="MYSITEURL" method="post" target="_blank" >
<input type="password" name="password" value="MYPASSWORD"/>
<input type="text" name="LogCommand" value="NAME-OF-THE-LOG-AND-LOCATION"/>
<input type="submit" id="Submit1stLog" value="Submit1" />
</form>
<script>
window.onload = function(){
document.forms('SITEURL').submit();
}
</script>
free traffic exchange website
Check Out Post
I'm using Twitter's typeahead frontend library for autocompletion. My configs use remote calls to the server. The autocompletion itself works fine, however the form tag refuses to actually input the content (after pressing enter) in the input tag now. I suspect it's because typeahead forces a tag around the . Here is my code:
<form class="navbar-search form-search pull-left" action="javascript:query_main()" method="get">
<div class="main_dropdown navbar-search">
<input class="typeahead" id="query_main" type="text">
</div>
</form>
Below is when the code worked (without typeahead)
<form class="navbar-search form-search pull-left" action="javascript:query_main()" method="get">
<input type="text" id="query_main" class="main_dropdown typeahead">
</form>
Any ideas? Thanks.
You should provide at least one <input type="submit" /> in the form to expect the form to submit on pressing enter.
If you don't want the button to be shown, use CSS to hide it then.
Try putting a data-provide="typeahead" attribute in the input, like in the official doc example: http://getbootstrap.com/2.3.2/javascript.html#typeahead
If you want to do something more complicated with the selected item, you could use the updater option in bootstrap's typeahead.
For instance, in your case, you would put something like this (in jQuery):
$('#query_main').typeahead({
// Some options
updater: function(item) {
// Do something with item
return item;
},
// Other options
});
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
Demo link:
http://elevation-inc.com/dev/test/ieform/
In IE 6/7/8 - if you enter a term into a simple input field, submit the form and then hit the back button - the input field retains the previously submitted term. If you then refresh the page, the value is also retained.
How, via HTML, can this pre-population be disabled? We want no value to be in the input box on page load/domready.
We've already tried autocomplete='off' on both the form and input element, but the pre-population is still persisting.
Thanks in advance.
<input type="text" name="userid" autocomplete="off" /> works fine for me (the same goes with your form). Make sure you reload the page in between testing (CTRL + F5 for full refresh).
This is how IE works, but you can change the value with JavaScript
<body onload="document.getElementById('q').value = '';">
<form action="http://www.google.com/search" name="f" autocomplete="off">
<input type="text" name="q" autocomplete="off" id="q"><input type="submit">
</form>
Well I guess it's a browser behaviour you can't bypass by html. You can do it in javascript however:
<script>
window.onload = function() { document.forms.f.q.value = ""; };
</script>
or if you don't want to wait for images to load (because window.onload will wait for that),
you can use the document ready event, as described here. (it needs more tweaking to make it work across all browsers)