I'm using a javascript search engine from this script page that allows me to select different providers/search engines to perform a google like search, but I'm trying to make it open in a new window after I press the send button, without success.
I've already tried to use:
target="_blank"
in <input type="button" value="Send" onClick="startSearch()" target="_blank"> and nothing happens, or:
<form name="searchForm" target="_blank">
Nothing!
I've also tried to use _new instead of _blank and didn't work either.
Finally, I've tested what suggested on w3schools.com example but unfortunately again a failure.
Can you please, guys, help? Thanks!
try something this if you want to open a new tab link by your button-
<a href="http://www.stackoverflow.com/" target="_blank">
<input type="button" value="Send" />
</a>
Quick and dirty, you can use the window.open(); method to open the search in a new window, here's some updated HTML:
<form method="GET" action="#" id="search-form">
<p><label>Search for: <input type="text" id="q" /></label></p>
<p><label>Search from: <select id="engine">
<option selected="selected" value="http://www.google.com/search?q=">Google</option>
<option value="http://www.bing.com/search?q=">Bing</option>
<option value="http://search.yahoo.com/search?p=">Yahoo!</option>
<option value="http://search.aol.com/aol/search?q=">AOL</option>
</select></label></p>
<p><input type="button" value="Send" id="send" /></p>
</form>
And the JavaScript:
<script>
var ID = function(str){return(document.getElementById(str));};
ID('send').addEventListener('click', function(){
var search = ID('q').value, select = ID('engine'), engine = select.options[select.selectedIndex].value;
if(!search) {
alert('Please include a search string');
} else {
window.open(engine + search);
}
});
</script>
Just make sure to call that at the end of the page or put it in a DOMContentLoaded event or something.
MDN Docs on window.open()
To open the link in a new window, since you are using a <form> instead o an <a> link, you have to change the javascript shown in the example, first adding an ID to the form so it is easilly accessible via the DOM:
<form id="searchForm" name="searchForm" target="blank">
Then, change the last javascript line so instead of the location.href, it changes the form's action and submits it:
document.getElementById("searchForm").action = finalSearchString;
document.getElementById("searchForm").submit();
Example:
https://jsfiddle.net/vj99ux9e/
Related
I have an html form that is more or less the following
<form action="/results">
<input name="q" type="text">
<div>See results</div>
</form>
If I type something into the form, such as "my search" and press "enter" I'll be taken to the Results page with something like this: mywebsite.com/results?q=my+search. My problem is that I would like to get the same behavior when someone clicks "See results," which currently takes them to the Results page but without the params. I know using <button> instead of <div> would get me the results I need, but in this situation using <button> is not practical due to how all of the templates have been written.
Concatenate ?q=searchstring to the URL when assigning to window.location.
document.querySelector("#results").addEventListener("click", function() {
let param = document.querySelector([name=q]).value;
let url = `/results?q=${encodeURIComponent(param)}`;
window.location = url;
}
<form action="/results">
<input name="q" type="text">
<div id="results">See results</div>
</form>
If you can use input type submit, try wrapping the it in the div as in this way:
<form action="/results">
<input name="q" type="text">
<div><input type="submit" value="See results" /></div>
</form>
If this not works for you, alternatively you can handle it using javascript as #Barmar answered above.
I have an HTML form that I am trying to use to navigate to a different page. I was trying to use window.location.replace to append the value of the input to the end of the form like this:
Before: https://example.com/search
After: https://example.com/search/formvalue
I have tried just about every trick I can find, but have had no luck. I was able to get it working by replacing window.location.replace with window.open, but I don't want to have to open it in a new tab. I also tried window.location.assign but had no more luck with that. I tried running both of these functions in the Chrome console and they worked fine from there. My code is below.
function onenter() {
var term = document.getElementById("searchbox").value;
window.location.replace("/search/" + term);
}
<form method="GET" onsubmit="onenter();">
<input id="searchbox" name="term" type="text" autofocus>
<button id="searchenter" type="submit">Enter</button>
</form>
What am I doing wrong/missing?
Your issue is that the form submission reloads the page. Use eventObject.preventDefault:
function onenter(event) {
event.preventDefault();
var term = document.getElementById("searchbox").value;
window.location.replace("/search/" + term);
console.log(window.location);
}
<form method="GET" onsubmit="onenter(e);">
<input id="searchbox" name="term" type="text" autofocus>
<button id="searchenter" type="submit">Enter</button>
</form>
I'm looking to create a Chrome extension for a new tab page. I've written the page and have it working only I'm having a problem with moving my Javascript from inline to external.
Current index.html is looking like this:
<script>
function process()
{
var url="https://www.google.co.uk/search?q=" + document.getElementById("goog").value;
location.href=url;
return false;
}
</script>
<div class="container">
<form onSubmit="return process();">
<input type="text" class="form-control" id="goog" placeholder="Google Search">
<input type="submit" style="display:none"/>
</form>
I've tried a few different methods of moving this into an external file but I'm not great with Javascript. I'd imagine I would need to use an event listener of some kind. I've tried placing this in search.js:
var form = document.getElementById("search");
form.addEventListener("submit", function() {
var url="https://www.google.co.uk/search?q=" + document.getElementById("goog").value;
location.href=url;
return false;
});
With this amended html:
<form id="search">
<input type="text" class="form-control" id="goog" placeholder="Google Search">
<input type="submit" style="display:none"/>
</form>
But to no avail. Can anyone help?
You are attaching the 'submit' event to the text input element.
You should instead attach it to the form, as it's the form what gets submitted, not only that particular input. (You already do it correctly on your current index.html document).
You can do this adding an id to the form element:
<form id="your-form-id">
and then attaching the event to it like you're already doing:
var form = document.getElementById("your-form-id");
form.addEventListener("submit", function() { ...
Also, note that unless you've changed your html while moving the JS code to an external file, on the 'submit' event callback you're trying to get the search string from an element with id="url" while your text input element has id="goog", so you won't be able to retrieve it.
EDIT:
The issue seems to be that the form submit gets executed and you're redirected to the same page with a new blank input before your code can be run.
You can avoid this calling preventDefault() on the event when receiving it so the form is not submitted and your code is run, instead of returning false at the end.
form.addEventListener("submit", function(event) {
event.preventDefault();
... your code ...
I've noticed that it's possible without any Javascript. I can make a form with a method of GET and pass the contents of the form into the GET request like below:
<form method="GET" action="https://google.co.uk/search">
<input type="text" name="q" class="form-control" placeholder="Google Search">
<input type="Submit" style="display:none">
</form>
The above solution is correct but using this avoids any Javascript whatsoever.
im completely new to html && javascript coding so now im doing my first steps and trying to write a search bar which will pass google your input text
<script src="func.js"></script>
<form name="googleSeach">
<p align="center"><input name="searchTxt" id="searchTxt" type=search placeholder="Google Search">
<input type="submit" value="Find" onclick="test()"></p>
</form>
and javascript
function test(){
window.open("https://www.google.ru/webhp?newwindow=#q="+document.getElementById('searchTxt').value,"_self")
}
well, thought it should work but no, it does not. What's the proble?
Believe you just want to use
<form name="googleSeach" onsubmit="test(event)">
Instead of onclick.
Also your handler should probably cancel the submit action. Also use location.href instead of window.open since you're trying to open the new URL in the same window.
http://jsfiddle.net/bvaughn/fr35mpgf/2/
I need to get the value from the parent form into the child; not the other way around. Found many a howto from child to parent but that doesn't work for me. I have an onclick event in the input button but I'm unsure how to get the value from this calendar into the child window from here.
<form method="post" action="">
<p style="padding:10px;">
<input type="text" id="date" name="date" value="" maxlength="10"> <img src="calendar.gif" class="cp_img" alt="Open Calendar" style="padding-bottom:3px;"><br /><br />
<input type="submit" name="search" value="Submit" onclick="popWindow('search.php')">
</p>
</form>
You can use QueryStrings like this -
<input type="submit" name="search" value="Submit" onclick="popWindow('search.php')">
You can read the QueryString values using utilities like this one.
EDIT
function popWindow(windowUrl) {
var dateVal = document.getElementById("date").value;
window.open(windowUrl + "?dateValue=" + dateVal); //This will open the window with the URL like search.php?dateValue=1/1/09.
}
If you are opening a window using window.open you can pass value to it using
Querystring
like
search.php?ValueToPass=value
and read from the popup using
Request.QueryString["ValueToPass"]
or read value from pop up using
window.opener object.
This returns a reference to the window that opened this current window.
Eg:
window.opener.document.getElementById('<%=text.ClientID%>').value
Edit:
From PHP you can get the querystring variable. Take a look at
PHP $_GET Function