I am trying to make a link, and place a variable in the URL like this:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
Main Page
<input type="color" id="colorPicker" value="#808080">
</body>
<html>
I am trying to send the user to index.html?color=VALUE GOES HERE. Instead of VALUE GOES HERE, I would like the current color input value.
You may use forms ,
The method attribute specifies how to send form-data (the form-data is
sent to the page specified in the action attribute).
The form-data can be sent as URL variables (with method="get")
<form action="index.html" method="get">
<input type="color" name="color" value="#808080">
<input type="submit" value="Submit">
</form>
The only way that I can think to do this is with JavaScript, so sorry if this is not what you are looking for:
function urlUpdate(hex) {
document.getElementById("link").href = "index.html?color=" + hex;
}
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<a id='link' href="index.html?color=">Main Page</a>
<input type="color" id="colorPicker" value="#808080" onchange="urlUpdate(value)">
</body>
<html>
Related
Why won't this code just take the input value and console.log() it?
The updated code reads.
!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title></title>
</head>
<body>
<form class="" action="index.html" method="get">
<h1>thank you</h1>
<a href="index.html">
<button>Home</button>
</a>
<br>
<br>
<a href="https://github.com/shanegibney/link-two-pages">
<button>Back to repositoryy</button>
</a>
<br>
<br>
<form>
<input type="number" id="Idkey" value="5" min="0" max="10">
<button type="submit">submit</button>
</form>
</body>{
<script>
let Idkey = document.getElementById(Idkey).value;
console.log(Idkey);
</script>
</html>
The submit button is not rendering at all.
The error I get is,
settings.html:26 Uncaught TypeError: Cannot read properties of null (reading 'value')
The script will only read the initial value in the input field (it will always log 5).
You need to tell the script to read the input value each time the submit button is clicked by adding the oninput attribute, like this:
<form>
<input type="number" value="5" id="Idkey" oninput="myfunction()" />
</form>
<script>
function myfunction() {
let val = document.getElementById("Idkey").value;
console.log(val);
}
</script>
I am creating a webpage that redirects users to a specific webpage.
Some part of the URL of the specific webpage is constant and the rest is a variable.
If the webpage is www.gotop.com/page1. www.gotop.com/ is constant every time but the page1 part changes. And I want to take the page1 part as an input in my webpage and then a button to go to www.gotop.com/page1
I tried a lot but failed. My final code is
<!DOCTYPE html>
<html>
<label for="name">Name (4 to 8 characters):</label>
<input type="text" id="name" name="name" required
minlength="4" maxlength="8" size="10">
<body>
<h1>The button Element</h1>
<button type="button" onclick="window.location.href='http://152.158.53.1:2222/q/"name"/';">Click Me!</button>
<p>PLEASE WAIT...Redirecting to REALME 1 URL</p>
</body>
</html>
But it doesn't work.
Here I took the value of the variable part of URL from the input and concatenated it at the end of the constant part of the URL.
window.location.href redirects you to the desired URL.
This should help,
document.getElementById('button').addEventListener('click', function(e) {
const page = document.getElementById('val').value
window.location.href = `/constant/url/${page}`
})
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Document</title>
</head>
<body>
<input type="text" id="val">
<button id="button">Click me!</button>
</body>
</html>
I think this would be a better solution
function loadPage(){
location.href = document.querySelector("#page_name").value;
}
<input type="text" id="page_name"/>
<button onclick="loadPage()">Go</button>
When the button is clicked, the loadPage function would be called. There, The value of the input is obtained and the page is redirected to that url.
Something is keeping me from setting a path variable with Thymeleaf and HTML in an HTML Form.
I want to simply enter 33 into a form and get localhost:8080/blog/33 for a url, but I can only get a query string or malformed brackets and etc.
some example attempts and results:
th:action="#{/blog/{id}(id = ${id})}"
localhost:8080/blog/?id=33
th:action="#{/blog/+ ${id}}"
localhost:8080/blog/+%20$%7Bid%7D?id=33
what I want is:
localhost:8080/blog/33
the whole code for this form is below:
<!DOCTYPE HTML>
<html xmlns:th="https://www.thymeleaf.org">
<head>
<title>Form Submission</title>
<style>
button{
margin-top:20px;
width: 250px;
}
</style>
</head>
<body>
<h2>Delete Entry</h2>
<form action="#" th:action="#{/blog/{id}(id = ${id})}" th:object="${blog}" method="get" >
<fieldset>
<p>Delete ID: <input type="text" th:field="*{id}" required /></p>
<p><input type="submit" value="Submit" /> <input type="reset" value="Reset" /></p>
</fieldset>
</form>
<button onclick="window.location.href = '/'">Menu</button>
</body>
</html>
This syntax is correct: #{/blog/{id}(id = ${id})}.
The reason you are getting localhost:8080/blog/?id=33 is probably because ${id} is empty when the form is created, and when you click the submit button, it is adding ?id=33 to the url (because the method is get and you have an input with the same name="id": <input type="text" th:field="*{id}" required />.
There is no html/thymeleaf way (without javascript) to get a form field into the path part of a URL (if that is what you're expecting). You'll have to use a javascript library if you want that to happen.
I'm trying to create a HTML form to upload an image with encoding type - multipart/form-data.
I've been instruted to use an 'Origin' header with the value
'https://some-url.com' and a 'Host' header with the value 'image-upload.amazonaws.com'
But I can figure out where to specify the'Origin' header.
My HTML looks this this:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8"/>
<title>upload image file</title>
</head>
<body>
<form action="image-upload.amazonaws.com" method="post" enctype="multipart/form-data">
<p><input type="text" name="key" value="async_uploads/123456789-987654321">
<p><input type="text" name="success_action_status" value="201">
<p><input type="text" name="policy" value="sdfghjsdfg8sdfgshdfgjksg=">
<p><input type="text" name="x-amz-credential" value="DSFGHJSDFGH?878dfg78">
<p><input type="text" name="x-amz-algorithm" value="AWS4-HMAC-SHA256">
<p><input type="text" name="x-amz-date" value="20180620T022620Z">
<p><input type="text" name="x-amz-signature" value="sdg678sdfg7h34">
<p><input type="file" name="myimage.png">
<p><button type="submit">Submit</button>
</form>
</body>
</html>
Can anyone help me?
Thanks in advance...
Host - the domain name where the request is being sent to.
Origin - shows the domain/Url from where the request was initiated(or originated)
https://www.codeproject.com/Articles/185506/AJAX-Cross-Origin-HTTP-request.
This Wiki page shows the list of all header fields
So, you need to include the Origin in the request header. See this example, https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/Origin.
Hope this helps,
I have created a simple html page to test the localstorage and for the life of me i cant get it to work, even though my firebug shows that the localstorage stored value as the one that i am storing here is my code for the first html page called Testhtml.html
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>TEsthtml.html</title>
</head>
<script >
function save()
{
var passvalue = document.getElementById('entry_1').value;
localStorage.setItem('passingvalue', passvalue);
}
</script>
<body>
<form action="simple.html" method="POST">
<label for="entry_0">Type ur name</label>
<input type="text" name="entry.0.single" value="" id="entry_0">
<br>
<label for="entry_1">ur pets name
</label>
<label for="entry_1">type something</label>
<input type="text" name="entry.1.single" value="" id="entry_1">
<br>
<input type="submit" name="submit" id="submit" onClick="save()" value="Submit">
</form>
</body>
</html>
Second form called the simple.html code is as follows
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Simple HTML</title>
<script >
function load()
{
var storedvalue = localstorage.getItem('passingvalue');
if(storedvalue)
{
document.getElementById('tb1').value=storedValue;
}
}
</script>
</head>
<body onload="load()" >
<input id="tb1" name="tb1" type="text"/>
<input type="submit" name="submit" id="submit" onClick="load()" value="Submit">
</body>
</html>
I try to run this code the simple.html which is the second form in the only textbox that is there it is not displaying anything..tried so many different things!!
It's just typographical errors in Simple.html on lines 8 and 9; 'localstorage' should be 'localStorage' and 'storedvalue' should be 'storedValue'.
You should look into your browsers error reporting and developer tools, they would have helped you solve this problem on your own. I personally prefer to develop on Google Chrome because of the fast, simple, and easy-to-use debug tools (if you use chrome, just press Ctrl+Shift+J).
simple.html's code is the same as testhtml.html . Did you post wrong code?
a simple tutorial for localStorage:
http://www.w3schools.com/html5/html5_webstorage.asp