I have a piece of code that I have been getting help on and I have come across something that I find inconvenient. When I click the "Go" button it browses away from the current tab. I want to have the resulting URL from the form to open in a new tab. in addition I cannot hit the enter key because it will just load the whole form up in a new window. How do I correct the "enter" key usage problem and get my form to open the URL in a new tab. The forms function is to open a new URL that contains information I am searching for. Here is my code:
<script type="text/javascript">
function setSearchTermSN(n){
var SN_VALUE = encodeURIComponent(document.getElementById("sn").value);
location.href = "http://URL to site.com/perl/search?searchtype=sn&type=2&uid=" + SN_VALUE + "&visualtype=html%2Fen&tabset=person";
}
</script>
<form target="_blank">
Last Name: <input id="sn" type="text" value="" />
<input type="button" value="Go" onclick="setSearchTermSN()" />
</form>
the idea is to enter a last name such as Jones into the input box. Click go and the form would substitute " + SN_VALUE + " with Jones and the load the URL like this:
http://URL to site.com/perl/search?searchtype=sn&type=2&uid=Jones&visualtype=html%2Fen&tabset=person
the form currently does the substitution but it browses away from the search box which defeats the purpose of having it. I have tried the <form target="_blank"> but it still opens the URL in the same page.
credit for the above code goes to https://stackoverflow.com/users/904428/david
window.location only deals with the current document. You need to use window.open
Missed the other part about the enter key. You need a onkeyup event listener and check the event keycode for the return key and then run the same function as the click.
function setSearchTermSN(n){
var SN_VALUE = encodeURIComponent(document.getElementById("sn").value);
var newwindow = window.open("http://URL to site.com/perl/search?searchtype=sn&type=2&uid=" + SN_VALUE + "&visualtype=html%2Fen&tabset=person",'name');
return false;
}
Related
I would like to create a sort of login page. Which links to a href depending on the input of the user.
So i have a text input part and a login button.
Then it should go to the website depending on the text input.
Example: users fills in 1234 and clicks on the login button, then the website:
example.com/1234 opens up.
I tried but i cant get it worked.
<input type=text id='token' name="token"/>
<input type=button name=login value="login" onClick=changeQuery()/>
changeQuery(){
var input_query=document.getElementById('sq').value;
window.location="http://www.google.com/"+input_query+"myString";
}
There are many issues with your code...
HTML attribute should be in quotes (so change things like onclick=changeQuery() to onclick="changeQuery()")
Your function does not start with the keyword function
Your textbox control has an id of token... so in the example you have, there is no sq for the getElementById to find
And I'm not sure why you're adding "MyString" at the end of the URL, but that might be part of your intended code
The result should be something like this...
function changeQuery(){
var input_query = document.getElementById('token').value;
//window.location = "http://www.google.com/" + input_query + "myString";
console.log("http://www.google.com/" + input_query + "myString");
}
<input type="text" id="token" name="token"/>
<input type="button" name="login" value="login" onClick="changeQuery()"/>
(Please note, I've commented out the window.location and instead put a console.log so you can see what is produced without it actually navigating to another page)
function changeQuery() {
var input_query =
document.getElementById('token').value;
window.location = "https://www.google.com/search?
q=" + input_query;
}
Above is the correct code for what you want, but google doesn't allow some different origin to make search request.
Refused to display 'https://www.google.com/search?q=somequery' in a frame because it set 'X-Frame-Options' to 'sameorigin'.If you try to redirect some other origin it will work.
I'm stuck on this problem for now a couple of days and I have no idea what to do. I want to navigate directly to another page from my own website only by writing the page name(without the ".html" or ".php" in the input.
Example: you write "index" in the textbox and once you click on the submit button it sends you to "http://www.website.com/index.html". Instead of doing that, it sends me to "http://www.website.com/?2016=index&.=html"
I got it totally wrong because it sends the input names and some symbols around them.
This is my HTML code:
<form id="newsearch" method="get" action="http://www.website.com/">
<p>Enter your confirmation number:</p>
<input type="text" id="searchvalue" class="textbox1" name="2016" size="50" maxlength="120"><input type="submit" class="button1" value=">">
<input type="hidden" id="hiddenvalue1" name="." value="html">
</form>
Your current code simply submits a form, so it is quite correctly adding the entered value as part of the query string ?2016=index&.=html".
To navigate to the location, add a submit handler to the form that cancels the default form navigation and instead sets window.location to the relevant value, perhaps something like this:
document.getElementById("newsearch").addEventListener("submit", function(e) {
e.preventDefault();
var searchText = document.getElementById("searchvalue").value;
var extension = document.getElementById("hiddenvalue1").value;
window.location = this.action + searchText + "." + extension;
// or if you don't want to use the form's action attribute to specify
// the domain you could hardcode it in the function:
// window.location = "http://www.website.com/" + searchText + "." + extension;
});
(Update: the above code would need to be in a script element that is after the form element, and/or in a DOMContentLoaded or window.onload handler.)
I have a form link on multiple pages. All I need when I click on a form link for page A it should display as www.form.com?referrer=Page A on URL and when I submit the form, I have created a hidden field referrer, when I received it on my email on the referrer field it should show "page A".
I have this HTML code which was working fine however, I do not want to do it manually on every page, as soon as a user clicks on the form link or received the form it should automatically updated:
<a target="_blank" title="Click Here" href="https://myform.com/forms/land_discount?referrer= Beach Club">
Here is the JavaScript for my Form:
Discount Form
See if this is what you are trying to do:
// I'm going to use jQuery, it's easier for me
$(document).ready(function(){
// I used a class so it doesn't do it to every <a> tag
$('a.use_refer').click(function(e){
// Stop the button from submitting normally
e.preventDefault();
// Create a new url
// You may or may not want to use encodeURIComponent() on the path value
var newUrl = $(this).attr('href')+'?referrer='+document.location.pathname;
// Go to the new page
window.location = newUrl;
});
});
</script>
Click Here
Assuming you Page A is the last directory of the path. And wrap this for when the DOM is ready.
Note the changes to the HTML with the addition of the id= tag.
On "Page A"
HTML:
<script type="text/javascript" src="https://myform.com/forms/js.php/test"></script>
<noscript>
Game Form
</noscript>
Javascript:
var url = document.getElementById('formRef').getAttribute("href");
document.getElementById('formRef')
.setAttribute('href', encodeURI(url + '?referrer=' + window.location.href.slice(window.location.href.lastIndexOf('/') + 1)));
On "Landing Page"
HTML:
<a id="landingPage" target="_blank" title="Click Here" href="https://myform.com/forms/land_discount">
Javascript:
var href = document.getElementById('landingPage').getAttribute('href');
if(window.location.href.indexOf('referrer=') > -1){
document.getElementById('landingPage').setAttribute('href', encodeURI(href + window.location.href.slice(window.location.href.indexOf('?referrer='))));
}
I have a scripting function in my html code.I have a input type "submit" which is like this.
<input type="submit" value="View PO" onclick="generate()"/>
When i click on submit it is going to the "generate()" function and it is opening the page in the same tab. But i need to open the page in a new tab.
I know that "target_blank" will resolve this.But when i am putting "target_blank" in input type it is not properly responding.So any help will be appreciated
Use window.open
var generate = function(){
// your stuff here...
var url = "you url here";
window.open(url);
}
i am a newbie to js.
i am trying to grab the value of the textbox and display in new page.
but somehow when i click the button it shows the value for a second then redirects to the same form page.
Please tell me where am i doing it wrong? Thanks.
Here is my code
HTML
<div id="myDiv">
<strong>Enter your name in the box below, then click
the button to see a personalized page!</strong>
<br>
<form id="newp" onsubmit="newpage();">
Name: <input type="text" id="yourname" size="25">
<br><br>
<input type="submit" onclick="pressedbutton()" value="Submit">
</form>
<script type="text/javascript" src="main.js"></script>
</div>
JS
function pressedbutton()
{
var thename = document.getElementById("yourname").value;
document.open();
document.write("<h1>Welcome!</h1>");
document.write("Hello, " + thename + ", and welcome to my page!");
document.close();
}
Thanks.
When you call document.open() and then document.write() on an already loaded document, it will clear the current document and replace it with a new empty document.
If you just want to add some content to the current document, then you should use DOM manipulation. Create new elements and add them to the current document.
For example, you could do this:
function pressedbutton() {
var thename = document.getElementById("yourname").value;
var div = document.createElement("div");
div.innerHTML = "<h1>Welcome!</h1>Hello, " + thename + ", and welcome to my page!";
document.body.appendChild(div);
// prevent form submission
return false;
}
In addition, your form is being submitted back to your server which is causing a page reload. You can prevent that by either changing your button to a regular button, not a submit button or by preventing the default behavior of the submit button.
If you don't intend to submit your form, then just change the button from this:
<input type="submit" onclick="pressedbutton()" value="Submit">
to this:
<input type="button" onclick="pressedbutton()" value="Submit">
Please tell me where am i doing it wrong?
You are not preventing the default action of the submit event. When a form is submitted, the browser will load the URL defined in action, or reload the page if none is provided.
If you don't want the browser to do this, you have to prevent it. There are a couple of ways to do this.
You could return false; from the event handler:
onsubmit="return pressedbutton()"
and
function pressedbutton() {
// ...
return false;
}
Or you could call the preventDefault method of the event object:
onsubmit="pressedbutton(event)"
and
function pressedbutton(event) {
event.preventDefault();
// ...
}
Have a look at the excellent articles at quirksmode.org to learn more about event handling. It also describes the differences between browsers.
There's a few issues I see with your code. The one that stuck out to me the most was:
document.open();
document.write("<h1>Welcome!</h1>");
document.write("Hello, " + thename + ", and welcome to my page!");
document.close();
I personally think that anything involving document. is terrible because it overwrites much of the preset code you already had in place in the HTML file.
Instead, you can use:
location.replace(url)
This keeps everything in place, but instead TRULY loads a new page.
On the page that has url, you could either have the same document.write() script (which I do not recomment), OR you can have preset HTML on that page that would have what you're trying to accomplish, which I think is the better method.
Also, this was kind of bugging me:
Change
</form>
<script type="text/javascript" src="main.js"></script>
</div>
to
</form>
</div>
<script type="text/javascript" src="main.js"></script>
It is good practice to keep your scripts at the end of the document, not inside elements.
Regarding storing the value, I would use the following code:
On the first page:
function pressedbutton(){
var thename = document.getElementById("yourname").value;
localStorage.setItem("Name", thename);
location.replace("Page2.html");
}
In Page2.html (same folder), place similar code to what you had (in the javascript):
<script>
var div = document.createElement("div");
div.innerHTML = "`<h1>`Welcome!`</h1>`Hello, " +
localStorage.getItem("Name") +
", and welcome to my page!";
document.body.appendChild(div);
</script>