I have a radio button with specific values that I want to include in my URL parameters for the following pages (more than one). I have the parameters set up in the JS as var params.
in my, if-statement I have a console.log and location.href set to the next page desired based on the result.
my issue is when I press the button it takes me to the page but not with the desired parameters.
I also have 5 pages for each result following this page. how can I append the parameters to the following pages?
EPP1.HTML:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>Create Custom Evaluation Portal</title>
</head>
<body>
<div id="bodyText"></div>
<form id="myForm" action="EPV3.html" method="get">
<div id="pBFContainer">
<div id="bodyFOption1">
<label for="email">Enter email address:<p></label>
<input type='text' id='inputEmail' name='email' size="70"></input></div>
<div id="bodyFTitle2"></div>
<div id="bodyFOption2">
<label for="testType">Choose the test theme for your evaluation:<p></label>
<input id='rb1' class="optionT" type='radio' name='testType' value='voip' checked>VoIP<p>
<input id='rb2' class="optionT" type='radio' name='testType' value='bandwidth'>Bandwidth<br><br>
</div>
<div id="bodyFTitle3"></div>
<div id="bodyFOption3"></div>
</div>
<input type="submit" id="subButton" value="Next..." />
</form>
</body>
<script type="text/javascript" src="EPP1.js"></script>
</html>
EPP1.js:
window.addEventListener("load", () => {
let qs = decodeURIComponent(location.search.substring(1));
let params = new Map();
let parts = qs.split("&");
parts.forEach((part) => {// i got this from a tutorial and liked it
let key = part.split("=")[0];
let val = part.split("=")[1];
params.set(key, val);
});
if (params.get("testType") == "voip") {
console.log("testtype is voip");
window.location.href = "EvalPortalV3.html";
} else if (params.get("testType") == "bandwidth") {
console.log("testtype is bandwidth");
window.location.href = "EvalPortalB3.html";
}
});
Related
I'm trying to create a bookmarking html file for personal use. It uses the javascript "string.link()" method. The problem is it only outputs once. I'd like it to loop and collect all the links I enter.
Here's the html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bookmarks</title>
<script>
function toURL() {
debugger
var strText = document.getElementById("url_descrip").value;
var strText1 = document.getElementById("url").value;
var result = strText.link(strText1); // url address
document.getElementById("itemlist").innerHTML = result;
}
</script>
</head>
<body>
<form>
<input type="text" name="Descrip" id="url_descrip" placeholder="Descrip">
<input type="text" name="URL" id="url" placeholder="URL">
<input type="button" value="Submit" id="btnSubmit" onclick="toURL()">
</form>
<div>
<ol id="itemlist"></ol>
</div>
</body>
</html>
As far as I understand you want to add this links to the #itemlist.
Just use
document.getElementById("itemlist").innerHTML += result + '<br />';
This will add the result to the already existing content of #itemlist and adds a line break after it to get every link in a new line.
You need to save your file somewhere and you need to be able to read it again.
For now, to just be able to show a list, you can do this
document.getElementById("itemlist").innerHTML += '<li>' + result + '</li>'
or something more savable:
const links = [];
document.getElementById("urlForm").addEventListener("submit", function(e) {
e.preventDefault();
var strText = document.getElementById("url_descrip").value;
var strText1 = document.getElementById("url").value;
links.push(strText.link(strText1)); // url address
document.getElementById("itemlist").innerHTML = `<li>${links.join("</li><li>")}</li>`
})
<form id="urlForm">
<input type="text" name="Descrip" id="url_descrip" placeholder="Descrip">
<input type="text" name="URL" id="url" placeholder="URL">
<input type="submit" value="Submit">
</form>
<div>
<ol id="itemlist"></ol>
</div>
Change
document.getElementById("itemlist").innerHTML = result;
to
document.getElementById("itemlist").append(Object.assign(document.createElement('li'), {innerHTML: result}));
I'm trying to make a food bank finder for food banks in California. The API data can be found here. So far, the data opens up on a separate tab (due to the target being "_blank") But I would want the data to output on the screen once the user presses the button, and only specific parts of the data (the name and address of the food bank). How would I show the output on the website and only specific parts of the data? Thank you for your time
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<script src="https://controllerdata.lacity.org/resource/v2mg-qsxf.json"></script>
<title>Sample Page</title>
<div class="w3-row w3-padding-64 spacing" id="location">
<div class="w3-col l6 w3-padding-large, spacing">
<h1 class="w3-center">Find a location</h1><br>
<h5>Enter you zip code below</h5>
</div >
<div class = "relative">
<form action="https://controllerdata.lacity.org/resource/v2mg-qsxf.json" target="_blank" method="get" >
<label for="zip_code">Zip Code:</label>
<input type="number" id="zip_code" name="zip_code"><br><br>
<input type="submit" value="Submit">
</form>
</div>
</html>
This is my suggestion:
var form = document.getElementById('form');
var output = document.getElementById('output');
form.onsubmit = () => {
var zip_code = document.getElementById('zip_code').value;
fetch('https://controllerdata.lacity.org/resource/v2mg-qsxf.json?zip_code=' + zip_code)
.then(res => res.json())
.then(res => {
output.innerHTML = res[0].name + ' - ' + res[0].street_address;
});
return false;
};
<form id="form">
<label for="zip_code">Zip Code:</label>
<input type="number" id="zip_code" name="zip_code"><br><br>
<input type="submit" value="Submit">
</form>
<br>
<div id="output"></div>
It shows desired results (name and address) on the same page (try, for example, zip code 94501).
Your current solution seems fully HTML based. I think that you can best do this in JavaScript however, doing an asynchronous request for the data using the API like this:
fetch('https://controllerdata.lacity.org/resource/v2mg-qsxf.json')
.then((res) => res.json())
.then((data) => {
// do something with data here
console.log(data)
});
You can add a button that triggers a JS function to search in the retrieved data.
I am trying to create a calculator that solves the Pythagoras theorem. I have created a function inside a tag in my code which takes two arguments (one for each leg length of the right-angled triangle) The function works if I just do a console.log with two numbers as arguments and the function executes properly if it is inside the script tag. But I just want to know how to take the two arguments in the text boxes and then when I press the button make the result appear on the screen.
<html>
<main>
<head>
<!--Textboxes to input lengths of legs-->
<input type = "text" required placeholder= "1st legnth">
<br> <br>
<input type = "text" required placeholder= "2nd legnth">
<br> <br>
<button type = "submit">Give me the answer.
</head>
</main>
</html>
<script>
function solveforHyp (a, b)
{
var c = a*a + b*b;
return Math.sqrt(c);
}
var final = (solveforHyp(3, 4));
console.log(final);
</script>
add a span after the button to contain the final result:
<span id="final-result"></span>
add an onclick event to your button, it might look like this:
<button type="button" onclick="onButtonSubmit()"></button>
you might also give some relevant ID's to the input like this:
<input type = "text" id="first-length" required placeholder= "1st legnth">
<input type = "text" id="second-length" required placeholder= "2nd legnth">
and finally, write the onButtonSubmit function to access the inputs and call the solveforHyp function :
function onButtonSubmit(){
const firstValue = document.getElementById('first-length').value;
const secondValue = document.getElementById('second-length').value;
document.getElementById('final-result').innerText = solveforHyp(firstValue,secondValue); // finally, put the returned value in the created span.
}
First of all your document structure is entirely wrong, a lot of tags are not closed script is after the HTML tag, and content is written inside head tag and head is inside main, NO doctype declaration is done, and most importantly if you wanna submit something you should have a form at least with preventing its default behavior. Learn HTML before JavaScript Brother, and also its a good practice to use input type Number when you already know the input will be always a Number.
and here is the code what you are trying to make
<!DOCTYPE html>
<html>
<head>
<title>Example</title>
</head>
<body>
<form id="formOne">
<input type="number" required placeholder="1st legnth" id="first">
<br> <br>
<input type="number" required placeholder="2nd legnth" id="second">
<br> <br>
<button type="submit">Give me the answer</button>
</form>
</body>
<script>
let form = document.querySelector("#formOne");
let inputOne = document.querySelector("#first");
let inputTwo = document.querySelector("#second");
form.addEventListener("submit", function(e){
e.preventDefault();
console.log(Math.sqrt(Math.pow(inputOne.value,2) + Math.pow(inputTwo.value,2)));
})
</script>
</html>
Js file function to be called
function tryMe(arg) {
document.write(arg);
}
HTML FILE
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src='object.js'> </script>
<title>abc</title><meta charset="utf-8"/>
</head>
<body>
<script>
tryMe('This is me vishal bhasin signing in');
</script>
</body>
</html>
You can try like this:
<!DOCTYPE html>
<html>
<head>
<title>Parcel Sandbox</title>
<meta charset="UTF-8" />
</head>
<body>
<form id="form">
<input type="text" id="first_length" name="first_length" />
<input type="text" id="second_length" name="second_length" />
<input type="submit" value="Submit" />
</form>
<script>
function logSubmit(event) {
event.preventDefault();
var first_length = document.getElementById("first_length").value;
var second_length = document.getElementById("second_length").value;
var final = solveforHyp(first_length, second_length);
console.log(final);
}
const form = document.getElementById("form");
form.addEventListener("submit", logSubmit);
function solveforHyp(a, b) {
var c = a * a + b * b;
return Math.sqrt(c);
}
</script>
</body>
</html>
I am doing a registry of users using a form and javascript, saving the data that I want to take in variables and through the validate function adding that array of elements that I have defined to a previously created user array (users), but not work
The code is this:
var user = document.getElementById("user");
var pass = document.getElementById("pass");
var enviar = document.getElementById("enviar");
var users = [// user password rol
["admin","admin", "1"],
];
var prueba;
enviar.addEventListener("click", validar, false);
function validar (e) {
prueba = [users.value, pass.value, "0"];
users.push(prueba);
return users;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form action="" method="post">
<h2>Registro de Usuario: </h2>
<input type="text" name="user" id="user" placeholder="Usuario"><br>
<input type="password" name="pass" id="pass" placeholder="Contraseña"><br>
<input type="submit" name="enviar" id="enviar" value="enviar" >
</form>
<script type="text/javascript" src="js/functionss.js">
</script>
</body>
</html>
I’m not sure what your problem is but I noticed two things that may break your logic.
On this line you are referring to the list of users but not user input element:
prueba = [users.value, pass.value, "0"];
When the submit button is clicked your page is refreshed and so your users list is recreated.
I have the following code below:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="OrderUp.css">
<title>OrderUp</title>
</head>
<body>
<form onsubmit="return results();" method="post" action="results.html" >
Name : <input name = "name" type= "text" id="name">
<br>
<input value = "Submit" type = "submit" >
</form>
</body>
</html>
Another HTML page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="OrderUp.css">
<title>Results</title>
</head>
<body>
<h2> Your Form Has Been Submitted </h2>
<script type="text/javascript">
function results() {
var name = document.getElementbyId('name').value;
document.write(name);
}
</script>
</body>
</html>
I am trying to pass on the value 'name' and retrieve it on a different html page (results.html). How do I accomplish this? I am not sure what I am doing wrong. Please help. Thank you!
pass the variable in the url using GET like :
<form method="get" action="result.html" >
Name : <input name = "name" type= "text" id="name">
<br>
<input value = "Submit" type = "submit" >
</form>
and retrieve it in the other page like :
<h2> Your Form Has Been Submitted </h2>
<script>
let params = (new URL(document.location)).searchParams;
let name = params.get("name");
console.log(name) // this is your variable
document.querySelector('h2').innerText += name;
</script>
One way is: you could use the 'get' method on the form, and not 'post':
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>OrderUp</title>
</head>
<body>
<!-- Use method 'GET', not 'POST', to pass the form values via the url in the address bar -->
<form method="GET" action="results.html">
Name :
<input name="name" type="text">
<br>
<input value="Submit" type="submit">
</form>
</body>
</html>
Then, in result.html, use javascript to extract the name value from the page url.
result.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Results</title>
</head>
<body>
<h2> Your Form Has Been Submitted </h2>
<span>Name Submitted: </span>
<span id="name-label"></span>
<script type="text/javascript">
// Get the value passed in the url by the form
var querystring = location.search;
// => ?name=Roger
// Remove the '?' at the beginning
var nameValuePair = querystring.replace(/^\?/, '');
// => name=Roger
// Split into parts
var parts = nameValuePair.split('=');
// The name is the second value
var name = parts[1];
// Set the name in the HTML element.
document.getElementById('name-label').innerHTML = name;
</script>
</body>
</html>
You cannot simply take a function from one html and put it into another. Using pure JavaScript and HTML the best way to accomplish this would be to make a JavaScript file, put the function there and load it on both pages. That way if you edit the function in one place, it will change in both.
The code would look like this:
Page 1:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="OrderUp.css">
<title>OrderUp</title>
</head>
<body>
<form onsubmit="return results();" method="post" action="results.html" >
Name : <input name = "name" type= "text" id="name">
<br>
<input value = "Submit" type = "submit" >
</form>
<script type="text/javascript" src="results.js"></script>
</body>
</html>
Page 2:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" type="text/css" href="OrderUp.css">
<title>Results</title>
</head>
<body>
<h2> Your Form Has Been Submitted </h2>
<script type="text/javascript" src="results.js"></script>
</body>
</html>
results.js
function results() {
var name = document.getElementbyId('name').value;
document.write(name);
}
Probably the simplest would be to append it to the url:
<script>
function goToResults() {
window.location = "results.html#" + document.getElementbyId('name').value;
}
document.getElementById("submit").onclick = goToResults;
</script>
<input id = "name" />
<button id = "submit" > Submit </ button>
And on results.html just get it from the location:
document.body.innerHTML += document.location.href.split("#")[1];
You need a way to save the information you want to share between pages. There are many options for javascript each with pros and cons
use the uri hash:
location.hash = myValue / var retrieveValue = location.hash;
use localstorage:
localStorage.setItem("key", "value"); / localStorage.getItem("key");
also document.cookie is an option, (you can look that one up as it's slightly more involved to implement with many good answes already around)