getting value from input field and open a new link - javascript

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/

Related

Redirect to user defined location

I'm trying to write a form in which user writes a location and the page redirects there after submit. How can I accomplish that? I have problem to find out how to put something to action="" when I do not know the value yet. Something with this logic:
<form action="how-to-get-this-value">
<input name="location" type="text">
<input name="submit" type="submit">
</form>
I can use whatever I want to do this (javascript, css, php...).
You don't need to make a <form> to do this. Forms are used more often for processing data. Instead, you can use Javascript. There are many ways to do this, but if you want to use a <form>, the easiest way is to redirect the user when they submit the form as follows:
function red() {
var url=document.getElementById('url').value;
window.location.href=url;
}
<form id="form">
<input id="url" type="text">
<input type="submit" onClick="red(); return false" value="Submit">
</form>
Of course, you would probably want to add verification methods to make sure the user gets to where they want to get (ie typing "google.com" would take them to "https://www.google.com/" instead of "yourdomain.com/google.com/").
Alternatively, you can simply remove the <form> tags, and it will work the same.
function red() {
var url=document.getElementById('url').value;
window.location.href=url;
}
<input id="url" type="text">
<input type="submit" onClick="red()" value="Submit">
There are a lot of good answers for this question. But I advise you to do the following...
Create a HTML form like this:
Them submit it to the php page with this. This can also be the same page.

Unable to open javascript search engine results on a new window

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/

Input button value is used to append a URL

I'm looking for a boilerplate smart way to take the input value, append it to a fixed url like /search/inputboxvalue and send the user there. Is there anyway smart robust way to do it? I could use an onlick handler and a form but I wondered if there is a more elegant way to do it, pref just using javascript.
My code:
<input name="search" id="search" value="" type="text" width="650px"></input>
Try this:
var my_value = document.getElementById('search').value;
window.location.href = window.location.href + my_value
Use following statment to get value from text box and append to current url.After append it will redirect user to that url.
input_box_value = jQuery('#search').attr('value');
window.location.href = window.location.href + input_box_value
Above 2 statement can be insert on particular event.like click
This is not really correct way to form requests. This symbol "/" should tell us, that we go to subdirectory, or its analog. So, to form this type of url, you will need to use javascript.
But, there is more easy way to create this type of request. Native:
<form id="search" method="get" action="search">
<input type="text" name="q" value="" />
<button type="submit">Search</button>
</form>
This small HTML snippet will allow you to visit an url: site.com/search?q=inputboxvalue without any JS. You may even hide submit button and just use Enter to search.

Using Javascript to get iframe code to open in new window

I have an html iframe code for a search box. What I want is to ensure that users can type a question into the search box on the original page but have the results open into a new tab. This is where I am having some trouble. I am trying to use javascript. What is the appropriate var window code that I should use that won't turn my results into a popup?
You do not need any javascript
<form target="_blank" method="get" action="https://www.google.com">
<input type="text" name="q" />
<input type="submit">
</form>
If you want to use JavaScript, you need to use window.open()

Page Redirection

I'm working on a script where all I want it to do (right now) is redirect the user based on which button they press. Eventually it will take form input and incorporate that into the redirect, but right now I'm just trying to get the buttons to send the user off to the appropriate site. However, My redirects aren't working.
<html>
<head>
<title>
Home
</title>
</head>
<body>
<script type="text/javascript">
<!--
var textstring;
var btnWhichButton;
//Gets the text from the form
function getQ() {
textstring = document.forms['Search'].elements[0].value;
}
//Does a Google Search
function googleSearch() {
window.location ="http://www.google.com";
}
//Does a YouTube Search
function youtubeSearch() {
window.location = "http://youtube.com";
}
//Figure out which button was pressed
function whichButton() {
if (btnWhichButton.value == 'Google Search' ) {
googleSearch();
} else if (btnWhichButton.value == 'YouTube Search' ){
youtubeSearch();
}
}
//main function to run everything
function main() {
getQ();
whichButton();
}
// -->
</script>
<form name="Search" >
<input type="text" name="q" size="31" maxlength="255" value="" />
<input type="submit" value="Google Search" onclick="btnWhichButton=this; main();" />
<input type="submit" value="YouTube Search" onclick="btnWhichButton=this; main();" />
</form>
</body>
</html>
When either button is clicked, the page just reloads with ?q= appended to the url, it doesn't redirect. Any help?
You want to use a button not an input type='submit'. Your current buttons are submitting the form, not performing their onclick actions.
Or block the submit action in some way. Or you could use your functions to set the form action to the url and just let it submit.
Your scripts seem highly overcomplicated. Why not have three functions: getQ, googleSearch, and youTubeSearch? Then inside the onClick event you can call the exact function, including this.value inside the input parameters and calling getQ from inside that function? Your method seems highly inefficient. If you're going to have separate functions for each of them anyways, there's no use in going through two other functions in order to get to them.
A submit button will always submit the form without a return false at the end of the onClick event, and since the default posting method is GET, its attaching ?q= to the end of your URL because that field is blank and it's the only input field in the form.
For redirecting to new page you no need to use the big javascript function.
<html> <body>
<input type="button" value="Google Search" onclick="javascript:window.location.href='http://www.google.com'" />
<input type="button" value="You tube Search" onclick="javascript:window.location.href='http://youtube.com'" />
</body></html>
Please check whether it helps you.
Well as jasonbar says, change your input to be of type 'button' and not 'submit'. Plus, I'd rather use window.location.href instead of window.location only. I don't know possible this is good practice...happy programming.

Categories