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.)
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 have a simple search form of Google Images that open in a new window. When I want to change the form parameters to Unsplash (that don't use query strings on their URL search) the form continue sending query string ;(
HTML
<input type="radio" id="google" name="image" onclick="googleImages();" checked/>
<label for="google">Google Images</label>
<input type="radio" id="unsplash" name="image" onclick="unsplash();"/>
<label for="unsplash">Unsplash</label>
<form id="form" method="GET" action="https://www.google.com/search?q=">
<input id="input" type="text" name="q" value="" required>
<input type="submit" value="Search" onclick="this.form.target='_blank';">
<input id="helper" type="hidden" name="tbm" value="isch">
</form>
JS
var
form = document.getElementById("form"),
input = document.getElementById("input"),
helper = document.getElementById("helper");
function googleImages() {
form.action="https://www.google.com/search?q=";
input.name="q";
helper.name="tbm";
helper.value="isch";
}
function unsplash() {
form.action="https://unsplash.com/search/photos/";
input.name="";
helper.name="";
helper.value="";
}
How create a function that remove query string from output URL? (and set again parameters when a radio option need them)
See code working here: http://jsbin.com/qitadepoxu/1/edit?html,js,output
So if you are not sending any parameters to unsplash.com don't use form submit. Instead use javascript redirect inside unsplash() function.
window.location.href = "https://unsplash.com/search/photos/";
You've clarified in a comment that when calling Unsplash, you need to pass the search string as part of the URL rather than as a query string parameter, like this: https://unsplash.com/search/photos/lion
To do that with your current setup, you'll need to do two things:
Add the string to the URL, and
Disable the form fields. Disabled form fields aren't sent with the form at all; link to spec. (Alternately, of course, you could remove them, but if you change your form at some point so that it has target="_blank" or similar, removing them would complicate allowing an Unsplash search followed by a Google Images search.)
So something like this:
function unsplash() {
// #1
form.action="https://unsplash.com/search/photos/" + encodeURIComponent(input.value);
// #2
input.disabled = true;
helper.disabled = true;
helper.disabled = true;
}
Note the use of encodeURIComponent.
And of course, if you did update the page so that it opened a new window instead of replacing the current window, you'd update your googleImages function to set disabled to false on those inputs (since it will be left true by the unsplash function). You don't have to do that if you're replacing the page, though.
I am trying to create a web control panel on windows. The file is running as an HTA (HTML Application) so it has access to the filesystem. I want it to create a file that's name is the value of pagename and its content is the value of content.
My code so far:
<form id="cpage">
Enter Name of Page to Create: <input type="text" id="pagename"/><br>
Enter Page Contents: <input type="text" id="content"/><br>
<input type="submit" value="Submit" onclick="formdata()"/>
<script>
function formdata()
{
var filname= document.getElementById("pagename").value;
var content= document.getElementById("content").value;
}
</script>
There are several issues here. One is that this is not valid HTML markup. The script tag must be closed. Second of all, your function wasn't closed with a closing brace. Third, you are only declaring one variable. You need two of them.
It should look like this.
<script>
function formdata() {
var pagename = document.getElementById("pagename").value;
var content = document.getElementById("content").value;
}
</script>
Also the onclick event is fired when the form is submitted, but it doesn't look like it does anything, just creates variables. You could add something like this at the end of your function
var string = "Page Name: " + pagename + "\n" + Content: " + content;
alert(string);
Is this what you're looking for?
I have made a system that when you enter a specific value, it'll fade in values based on the selection.
I have this code here which is the main form where you can input the specific model numbers into the form and then press enter.
<form>
<input type="text" name="ModNum" id="ModelNumber" pattern="^PIV13RT[23]?$"
title="Your Model Number." placeholder="Please Input a Model number" size="35" maxlength="8">
<center><span class="egsmall"><strong>Eg: PIV13RT, PIV13RT2, Ect.</strong></span></center>
<center><div class="btnwrap"><input name="proceed" type="submit" class="submitsup" id="forward" /></div></center>
</form>
The problem is that when you press enter, because it's inside of a form, it reloads the page, which means that the fade in won't load because it's reloading the page.
$("#forward").click(function(){
$.ajax({
}).done(function() {
$('.optionbk').fadeIn('slow');
});
});
I realise that this can also be done with Javascript, but that wouldn't allow me to use a Form.
$("#forward").click(function(){
var text = $("#ModelNumber").val();
var comparingText = "PIV13RT";
var comparingText2 = "PIV13RT2";
var comparingText3 = "PIV13RT3";
if (text == comparingText) {
$('.optionbk').fadeIn('slow');
}
if (text == comparingText2) {
$('.optionbk').fadeIn('slow');
}
if (text == comparingText3) {
$('.optionbk').fadeIn('slow');
}
});
Is there anyway that I can do it inside of a form, but make it so that the page doesn't reload itself so that the fade works instead of reloading. The form is needed because it is following that specific pattern. Please note that the form isn't linking to an external PHP file.
The quickest solution is to add onsubmit="return false" into your opening <form> tag.
You should bind your callback function to the submit event that the form dispatches and make it return false to cancel the actual submission.
$('form').bind('submit', function(){
$.ajax();
return false;
});
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;
}