Can't go to a url in javascript - javascript

I am a total noob to web programming (Started just now). I know C, C++ and x86-assenbly (a little bit). I wanna create my own home page for my browser. It's very basic html for the most part but I want a search bar on the top that redirects to duckduckgo with relevant results and that's where the problem arises. The code I'm trying:
<form>
<input type="text" id="query"/>
<button id="button" class="button" onclick="openInDuck()">Search</button>
</form>
<script>
function openInDuck(){
var x= "https://duckduckgo.com/?q=";
x += document.getElementById("query").value;
window.location = x;
}
</script>
And yeah, I forgot, I am using qutebrowser on archlinux if that matters. Thanks in advance.

You are missing .href on your redirect. Also you should change the button type to button instead of the default;
function openInDuck() {
var x = "https://duckduckgo.com/?q=";
x += document.getElementById("query").value;
window.location.href = x;
}
<form>
<input type="text" id="query" />
<button id="button" class="button" onclick="openInDuck()" type="button">Search</button>
</form>
Do note that it wouldn't be ideal to redirect the user if you just need to do a search through a different api.

You can use the below
function openInDuck() {
var x="https://duckduckgo.com/?q=";
x += document.getElementById("query").value;
window.open(x);
}

Problem is that your form is submitted when clicking the button, like this it works :)
<input type="text" id="query" />
<button id="button" class="button" onclick="openInDuck()">Search</button>
<script>
function openInDuck() {
var x = "https://duckduckgo.com/?q=";
x += document.getElementById("query").value;
window.location = x;
}
</script>

You are close to the solution. In the JS code, you must add .href after window.location to set the new href (URL) for the current window. In the HTML code, I suggest you use the onsubmit attribute to send the form with an input type="submit" :
function openInDuck()
{
var x = "https://duckduckgo.com/?q=";
x += document.getElementById('query').value;
window.location.href = x;
return false; // Prevent the form submission
}
<form onsubmit="return openInDuck()">
<input type="text" id="query">
<input type="submit" id="button" class="button" value="Search">
</form>

Related

HTML Form Text onChange event refreshes page?

"use strict";
var SEED = "";
function seedSubmit() {
var input_box = document.getElementById("seed-form");
SEED = input_box.elements[0].value;
}
<form id="seed-form">
<p>Seed:</p>
<input type="text" onchange="seedSubmit(); return false;">
<input type="button" onclick="seedSubmit()" value="Submit">
</form>
Here's the HTML:
<form id="seed-form">
<p>Seed:</p>
<input type="text" onchange="seedSubmit(); return false;">
<input type="button" onclick="seedSubmit()" value="Submit">
</form>
Here's the JavaScript:
"use strict";
var SEED = "";
function seedSubmit() {
var input_box = document.getElementById("seed-form");
SEED = input_box.elements[0].value;
}
I then use the SEED variable for some other stuff. Basically you type into the box and press submit. If the submit button is type="submit", it refreshes the page so it has to be a type="button" then it works fine. But I don't want a button at all I wanna type in the text and press enter. But doing so refreshes the page. How do I prevent this? I did some googling and searching on this site and found a few posts but none of those solutions seemed to work, what am I doing wrong? People say try return false; but that doesn't work for me.
You can add eventListener to "submit" and use the preventDefault method, for example:
var SEED ="";
var form = document.getElementById("seed-form");
form.addEventListener("submit", function(event){
event.preventDefault();
var input_box = document.getElementById("seed-form");
SEED = input_box.elements[0].value;
console.log(SEED);
});
<form id="seed-form">
<p>Seed:</p>
<input type="text" >
<input type="submit" value="Submit">
</form>

Passing HTML value into JavaScript function

I know this question has been asked already.
However, when I follow the answer given to that question it doesn't work.
This is my JS function and the relevant HTML
function myFunction() {
document.getElementById("submit").innerHTML = "LOADING...";
}
<input class="textbox" type="number" id="number">
<button onclick="myFunction(document.getElementById("number").value)" class="Button" >Submit</button>
<p id="submit"></p>
<script type ="text/javascript" src="../src/index.js"></script>
Strangely none of the answers recommended separating the HTML and JavaScript, so that's what I'll do. It's considered a best practice to not inline JS in your HTML.
const button = document.querySelector('button');
button.addEventListener('click', myFunction, false);
function myFunction() {
console.log(document.getElementById('number').value);
document.getElementById("submit").innerHTML = "LOADING...";
}
<input class="textbox" type="number" id="number">
<button class="Button">Submit</button>
<p id="submit"></p>
Try this...
Get the value insert the function.... It will display your desire output....
function myFunction() {
var number = document.getElementById("number").value;
document.getElementById("submit").innerHTML = "LOADING...";
}
<input class="textbox" type="number" id="number">
<button onclick="myFunction()" class="Button" >Submit</button>
<p id="submit"></p>
<script type ="text/javascript" src="../src/index.js"></script>
Like the earlier answer, you need to use single quote around 'number'. Another thing, you need to add parameter val in the myFunction(val) in the index.js.
function myFunction(val) {
document.getElementById("submit").innerHTML = "LOADING...";
console.log(val);
}
I thought, You used inside double quote("), using double quote("). So Please change double quote inside single quote(') or single quote inside double quote("). More over button default type is submit...
Change following
<button onclick="myFunction(document.getElementById("number").value)" class="Button" >Submit</button>
Into
<button onclick="myFunction(document.getElementById('number').value)" class="Button" >Submit</button>
or
<button onclick='myFunction(document.getElementById("number").value)' class="Button" >Submit</button>
javascript
function myFunction() {
document.getElementById("submit").innerHTML = "LOADING...";
}
Into
function myFunction(num) {
var n = num;//Get the number into your javascript function
document.getElementById("submit").innerHTML = "LOADING...";
}
<input class="textbox" type="number" id="number">
<button onclick="myFunction(document.getElementById('number').value)" class="Button" type="button" >Submit</button>
<p id="submit"></p>
<script type="text/javascript">
function myFunction(num){
var n = num;
console.log(n);
document.getElementById("submit").innerHTML = "LOADING...";
}
</script>
Default type of the button element is submit (and it is ok; the data will be submitted to the server). If something should be done before submission then it could be processed like this.
function myFunction(element, evn) { //here you can rename parameters
//evn is click event, element is the button clicked
evn.preventDefault(); //don't submit form at this moment
document.getElementById("submit").innerHTML = "LOADING...";
//now it is safe to submit the form
//setTimeout is for demonstration purpose
setTimeout(function() {
element.form.submit();
}, 1000);
}
<!-- form tag supposed to be open -->
<form method="get" action=".">
<input class="textbox" type="number" id="number" name="numData">
<!--name attr is required to send data to the server -->
<!-- note the arguments sent to the function.
Don't change them -->
<button onclick="myFunction(this,event)" class="Button">Submit</button>
<!-- form tag may be closed here or later -->
</form>
<p id="submit"></p>
<script type="text/javascript" src="../src/index.js"></script>

Make a submit form that uses its input to determine a link

I want to make a form that upon submitting, opens a html file that uses the users submission at the end of the url in the same tab.
Ex. Submit=link1, Opens code.html/link1 (same window)
As of now, putting, "_self" after window.open("code.html/" + s... just makes the url have a question mark at the end, which I'm told it is because of the GET method.
(Javascript)
<script>
var s = document.getElementById("submit").value;
function doFunction(){window.open("code.html/" + s);}
</script>
(HTML)
<form onsubmit="doFunction()">
<input id="submit" type="text" />
</form>
Perhaps you can try this:
<form onSubmit="return doFunction();" target="_self">
<input id="text-value" type="text" >
<input type ="submit">
</form>
I also added submit button.
<script type="text/javascript">
function doFunction(){
var s = document.getElementById("text-value").value;
var url = "code.html/" + s;
var win = window.open(url, '_self');
return false;
}
</script>

JavaScript redirect on form submission

I'm trying to do an exercise that will allow users to be redirected to a specific local web page based on their search term. For some reason, window.location.replace will not redirect. I tried a variant of window.location that opened the landing page in a new tab, which worked. Any help is appreciated!
html
<form name="form1" onsubmit="myFunction()">
Street Address:
<input type="text" id="streetaddress" required="true"><br>
Township:
<input type="text" id="township" required="true">
<br>
<input type="submit" onclick="return myFunction()" name="Search" value="Search">
</form>
<p id="demo"></p>
js
<script>
function myFunction() {
document.getElementById("demo").innerHTML = "";
var nameValue1 = document.getElementById("streetaddress").value;
var nameValue2 = document.getElementById("township").value;
if (nameValue1.toUpperCase() === "1 MARJORAM DRIVE" && nameValue2.toUpperCase() === "LUMBERTON") {
window.location.replace("landingpage.html");
}
else {
document.getElementById("demo").innerHTML = "<font color='red'><p>0 results</p></font>";
return false;
}
}
</script>
Update
I have modified my code implementing suggested solutions but am still encountering the same issue where the page won't redirect. Lines I've changed from original code are below...
html
<form name="form1" onSubmit="return myFunction()">
<input type="submit" name="submit" class="submit" value="Search">
js
if (nameValue1.toUpperCase() === "1 MARJORAM DRIVE" && nameValue2.toUpperCase() === "LUMBERTON") {
window.location.href = 'landingpage.html';
}
Just change the window.location variable
window.location = "http://www.newsite.com/path/to/page";
For a page that is locally hosted use the following:
window.location.href = "newlocation.html";

HTML form submits values and stores all of them in a new array(javascript)

I am trying to make a form with one text input and a submit button. What I want the script to do is take the text after I click submit and store it as a value. After that, if I type something else (without refreshing the page) and click submit store the input as another value. This process can be done one hunded times so I will have 100 different values. What I also want to do with this values is put them in a new array.So:
var AllValues = [""+Val1+"",""+Val2+"",""+Val3"",..,""+Val99+"",""+Val100""];.
The code I have managed to write untill now is this but it won't actually help you:
<!DOCTYPE html>
<html>
<body>
<form id="form1">
Type the words here: <input type="text" name="fname"><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<input type="button" onclick="myFunction2()" value="Print all inserted words at array">
<p id="demo"></p>
<script>
function myFunction() {
}
function myFunction2() {
var AllValues = [""+Val1+"",""+Val2+"",""+Val3"",..,""+Val99+"",""+Val100""];
document.getElementById("demo").innerHTML = AllValues;
}
</script>
</body>
</html>
I am asking this question after trying a lot of things which didn't worked and I know that the script will work only if I use HTML local storage but I don't have the knowledge to do it even if I did a lot of research on this topic. I dont want to only store the values but I want to get them inside a new Array. I am making the question a bit more general as always in order to help as many as possible. Could you please help me? Thanks in advance.
You had several issues, the main is that you have to provide the "id" attribute for the input text named "fname".
Next you have to store the AllValues array in context visible by two declared functions (in this case, the global context).
<!DOCTYPE html>
<html>
<body>
<form id="form1">
Type the words here: <input type="text" name="fname" id="fname"><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<input type="button" onclick="myFunction2()" value="Print all inserted words at array">
<p id="demo"></p>
<script>
var AllValues = [];
function myFunction() {
var fname = document.getElementById("fname").value;
AllValues.push(fname);
}
function myFunction2() {
document.getElementById("demo").innerHTML = AllValues;
}
</script>
</body>
</html>
Try also the immediate function to avoid storing variables in global context. The code that I paste is not very clean of course, but working :)
For a very basic way of doing this, try the following:
HTML:
<form id="form1">Type the words here:
<input type="text" name="fname">
<br>
<input type="button" value="Submit" class="submit">
</form>
<input type="button" class="show-button" value="Print all inserted words at array">
<p id="demo"></p>
JS:
var values = new Array();
$(".submit").on("click", function () {
values.push($('input[name="fname"]').val());
});
$(".show-button").on("click", function () {
$("#demo").html(values.join("<br>"));
});
Fiddle here: http://jsfiddle.net/5z4g04js/2/
My answer:
<form id="form1">
Type the words here: <input id="words" type="text" name="fname"><br>
<input type="button" id="submitWords" value="Submit">
</form>
<input type="button" id="printWords" value="Print all inserted words at array">
<p id="demo"></p>
<script>
var arrWords = [];
var btnSubmit = document.getElementById('submitWords');
var btnPrint = document.getElementById('printWords');
var demo = document.getElementById('demo');
btnSubmit.onclick = function() {
var words = document.getElementById('words').value;
arrWords = words.split(' ');
console.log(arrWords);
}
btnPrint.onclick = function() {
for(var i = 0; i < arrWords.length; i++) {
demo.innerHTML += arrWords[i]+"<br>";
}
}
</script>
</body>
</html>
You could use jquery to do that:
var all_values =[];
function myFunction() {
var temp_val = $("#fname").val();
alert(temp_val);
all_values.push(temp_val);
}
function myFunction2() {
alert(all_values);
}
<form id="form1">
Type the words here: <input type="text" name="fname" id="fname"><br>
<input type="button" onclick="myFunction()" value="Submit">
</form>
<input type="button" onclick="myFunction2()" value="Print all inserted words at array">
<p id="demo"></p>
working demo
p.s. edited jquery answer with more changes. working demo
Using this getAllValues(name) function, you can return the values of any element with the name of 'name'.
function getAllValues(name) {
var nameMatches=document.getElementsByName(name);
var AllValues=[];
for (var i=0; i<nameMatches.length; i++) {
AllValues.push(nameMatches[i].name);
AllValues.push(nameMatches[i].value);
}
return AllValues;
}
To call this you would use getAllValues('fname').

Categories

Resources