Dynamic Heading Update - HTML and Javascript using query string [duplicate] - javascript

This question already has answers here:
How can I get query string values in JavaScript?
(73 answers)
Closed 3 months ago.
You need to show the user's name in the heading. The heading should say Hello, (user) when the user enters their name into the text box which is a simple form input and presses the button.
To display the user's name, you'll need to read the user's name from the query string. You need to read the query string when the page is loaded, not when the button is pressed.
I need to implement this using javascript and query string but I haven't got a clue how.
<form>
<input type="text" name="user_name" placeholder="Enter your name!" />
<button type="submit">Apply!</button>
</form>

<input type="text" placeholder="Enter name." id="txtname">
<button onclick="Submit()">Apply!</button>
After clicking on apply button displayUser.html page will open containing
<script>
function Submit() {
let name = document.getElementById("txtname").value;
window.location.href = "displayUser.html?user=" + name;
}
</script>
displayUser.html
<html>
<head>
<title>About</title>
<script>
function sayHellow() {
//to read query string
let params = new URLSearchParams(window.location.search);
let values = [];
for (const value of params.values()) {
//putting values in array
values.push(value);
}
console.log(values);
document.write("<h2>Hellow! "+values[0]+"</h2>")
}
</script>
</head>
<body onload="sayHellow()">
</body>
</html>

firstpage.html
<input type="text" id="titletxt">
<button onclick="Submit()">Submit</button>
<script>
function Submit() {
let name = document.getElementById("txtname").value;
window.location.href = "secondpage.html?" + name;
}
</script>
secondpage.html
<html>
<head>
<title>Test</title>
<script>
function loadTitle() {
let queryString = window.location.search.split('?')[1];
document.write("<h2>Hello "+queryString+"</h2>")
document.title = "hello "+queryString;
}
</script>
</head>
<body onload="loadTitle()">
</body>
</html>

Related

h1 innerHTML value doesn't display form submission value correctly [duplicate]

This question already has answers here:
JavaScript code to stop form submission
(14 answers)
Closed 21 days ago.
I am new to JavaScript. I am trying to change my h1 tag value in HTML to a value based on form submitted. However, it displays only for a split second before disappearing. I would like to display the value permanently. Your advice is appreciated. Thank you.
The greeting was displayed only for a split second. I would like it to be displayed permanently. I suspect the issue is in the triggering of the event listener in JS code.
>! HTML code
<!DOCTYPE html>
<html lang="en">
<head>
<title>Count</title>
<script src="counter.js"></script>
</head>
<body>
<h1>Cold</h1>
<form>
<input autofocus id="name" placeholder="Name" type="text">
<input type="submit">
</form>
</body>
</html>
>! JS code
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('form').onsubmit = function() {
const name = document.querySelector('#name').value;
document.querySelector('h1').innerHTML = `Hello ${name}`;
};
});
You have to add the preventDefault property to the event, so it does not refresh the page onSubmit:
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('form').onsubmit = function(event) {
const name = document.querySelector('#name').value;
event.preventDefault();
document.querySelector('h1').innerHTML = `Hello ${name}`;
};
});

How to change the value when I type ?variable=value at url?

Situation:
The input value is empty and the type is hidden.
I type ?hiddenname=007 at url
I click the button"submit" and cause function call()..
Expect:
The system fills in the value into the input according to ?hiddenname=007 at url using function call()
after that, the system send the form with value 007 to the server.
Current result:
the system still send the form with empty value.
url
localhost/index.html?hiddenname=007
index.html
<!DOCTYPE html>
<html>
<head>
<script>
function call(){
document.forms["form1"].hiddenname.value=hiddenname;
console.log("function run");
}
</script>
</head>
<body>
<form name="form1" action="end.php">
<input type="hidden" id="hiddenid" name="hiddenname" value="" />
<input type="submit" id="send" onclick="call()"/>
</form>
</body>
end.php
<?php
echo $_GET['hiddenname'];
?>
This will obtain on window load the value of hiddenname from the URL query string, then set the value of the hiddenid input:
window.onload = function () {
// get the search params from the window's URL
const urlParams = new URLSearchParams(window.location.search);
// get the value of 'hiddenname'
const myParam = urlParams.get('hiddenname');
// store this value in the input with id="hiddenid"
document.getElementById('hiddenid').value = myParam;
};
Add return true; to the call() function.
Add onsubmit="return call();" to the form attributes.
And remove onclick function from the submit button.

Changing URL output of User Input with JavaScript

I'm trying to build something simple here:
a user types into an input field a url eg. http://sharepoint.com/human-resources/usa/Lists/testList/EditForm.aspx?ID=666&Source=http%3A%2F%sharepoint.com
.. hits "submit", when the URL gets spit out as a link, changing into: https://sharepointusa.com/en-us/human-resources/usa/Lists/testList/EditForm.aspx?ID=666&Source=http%3A%2F%sharepoint.com
I've been trying unsuccessfully to just spit out the whole URL, losing parameters, so I need a new approach, what is an easy vanilla javascript to just replace http://sharepoint.com/ with https://sharepointusa.com/en-us/ and leave the rest of the URL?
thanks
EDIT: 2 great answers, thank you, I adapted the first answer to my original code, while I play around with the second answer to see how it compares!:
<br>
<input type="text" id="userInput" value="Enter your text here"><br>
<input type="button" onclick="changeText2()" value="change text">
<script>
function changeText2()
{
var input=document.getElementById('userInput').value;//gets the value entered by user
const updatedUrl = input.replace('http://sharepoint.com/', 'https://sharepointusa.com/en-us/');
document.getElementById("link").href = updatedUrl;
document.getElementById("link").innerHTML = updatedUrl;
}
</script>
if you have a variable containing the full original url
const url = 'http://sharepoint.com/human-resources/usa/Lists/testList/EditForm.aspx?ID=666&Source=http%3A%2F%sharepoint.com';
then you can just do
const updatedUrl = url.replace('http://sharepoint.com/', 'https://sharepointusa.com/en-us/');
and updatedUrl will have what you're asking for.
It1 got it right before me! anyways, this is a more advanced representation of how to change it directly from the input fields.
<!DOCTYPE html>
<html>
<body>
<input id="demo" value="http://sharepoint.com/human-resources/usa/Lists/testList/EditForm.aspx?ID=666&Source=http%3A%2F%sharepoint.com">
<button onclick="myFunction()">Try it</button>
<script>
function myFunction() {
var str = document.getElementById("demo").value;
var changed = str.replace("sharepoint", "sharepointusa");
document.getElementById("demo").value = changed;
}
</script>
</body>
</html>

How to add the current query string value in my page's hyperlinks?

My code goal is to search various websites at once.
I would like to do this while generating a query string with the search terms.(Mainly for analytics reasons). I use a form to do so.
With java-script I add the search term name to the array of links linkList.
Written from bits of code I found online, worked "fine" before adding the form part to generate my query string. Now it doesn't even display the links.
HTML
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="css/styles.css?v=1.0">
</head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script src="/scripts"></script>
<body>
<form id="test-form">
<div>
<input type="text" name="search" placeholder="Search"id="id"/>
<button type="submit" id="go">get links</button> </div> </form>
<div id="linkText"></div>
<div id="a">test</div>
</body>
</html>
Javascript
$(document).ready(function(){
//READ URL
let params = (new URL(document.location)).searchParams;
let name = params.get("search");
console.log(name)
//IF QUERY IN URL
if(name !== null && name !== '') {
// do something
}
else {
//ARRAY LIST 1
var linkList = {
"https://google.net":"Click",
"https://google.org=":"Click2",
};
//LINK GENERATION FROM ARRAY
for (link in linkList) {
if (linkList.hasOwnProperty(link)) {
var a = document.createElement('a'),
linkText = document.createTextNode(linkList[link]);
//ADD THE QUERY AT THE END OF THE LINK
a.href = link + name;
a.appendChild(linkText);
document.body.appendChild(a);
}
}
}
});
Found an easier solution that solved my problem :
I search the URL for the query parameters and call them name
let params = (new URL(document.location)).searchParams;
let name = params.get("search");
But I create the links in a less complicated manner
document.write('Link Name');
var foo = "http:example.com/search="+name;

Saving var using JavaScript and redirecting to URL

I have a very simple web form containing two input fields and a submit button.
What I would like to do is save the two strings inserted and redirect to my other HTML file (which is in the same folder).
HTML:
<!DOCTYPE html>
<html>
<title>Players enter</title>
<head>
<script type="text/javascript" src="ticTac.js"></script>
<link rel="stylesheet" type="text/css" href=styleSheet.css></link>
</head>
<body>
<form >
player one name: <input type="text" id="firstname"><br>
player two name: <input type="text" id="secondname"><br>
<input type="submit" onclick="checkNames();"/>
</form>
</body>
</html>
JavaScript:
function checkNames(){
var nameOne = document.getElementById("firstname").value;
var nameTwo = document.getElementById("secondname").value;
//window.location.href = 'C:\Users\x\Desktop\hw3\tic\Game.html';
//window.location.replace("C:\Users\x\Desktop\hw3\tic\Game.html");
window.location.assign("C:\Users\x\Desktop\hw3\tic\Game.html");
}
I have commented the two other options I tried which also do not work.
You are using an HTML form... this means that your submit button will fire and try to submit your form.
In order to prevent this, you need to prevent that event from triggering. A simple modification to your JavaScript function should do the trick.
function checkNames() {
event.preventDefault();
var nameOne = document.getElementById("firstname").value;
var nameTwo = document.getElementById("secondname").value;
window.location.href = 'SOME-PATH/Game.html';
}
To redirect to a page in your computer you can use:
window.location.href = 'file:///C:/Users/x/Desktop/hw3/tic/Game.html';
There are more than one way of passing the values to another page. Here is an example using query string.
In the page that has the values.
var q = '?nameOne=' + encodeURI(nameOne) + '&nameTwo=' + encodeURI(nameTwo)
window.location.href = 'file:///C:/Users/x/Desktop/hw3/tic/Game.html' + q;
In the page receiving the values.
var nameOne = location.search.slice(1).split("&")[0].split("=")[1];
var nameTwo = location.search.slice(1).split("&")[1].split("=")[1];
Use
window.location="url";

Categories

Resources