How to get the value of input field entered in navigation
I'm trying to get the value of an input field.
Code:
<input id="examples" class="input" name="examples" placeholder=" " />
<div class="cut example-cut"></div>
<label for="examples" class="placeholder">
Examples
<span id="example1" class="example" onclick="setExampleValue('example1')"> #1</span>
<span id="example2" class="example" onclick="setExampleValue('example2')"> #2</span>
</label>
</div>
I tried to get the value, the value will be used for loading a file from the path.
const fid = document.getElementById("examples").value;
console.log(fid)
const fpath = `/path/${fid}.json`;
fetch(fpath)
.then(response => response.json())
.then( data => {
var x = data.x
})
console.log(fid) is not printing the value example2 I need this value to load a file with this name.
Complete code:
<html>
<head>
<nav class="nav">
<ul class="nav__links">
<li class="nav__item">
<a class="nav__link" href="{% url 'home' %}">Home</a>
</li>
<li class="nav__item">
<a class="nav__link" href="{% url 'about' %}">About</a>
</li>
<li class="nav__item">
<a class="nav__link" href="{% url 'login' %}">Login</a>
</li>
</ul>
</nav>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>
Visualization
</title>
<link rel="stylesheet" href="style.css">
<script src="https://cdn.plot.ly/plotly-1.58.5.min.js"></script>
<style>
.graph-container {
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
}
.main-panel {
width: 100%;
height: 800px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.side-panel {
position: absolute;
top: 0px;
bottom: 0;
right: -300px;
width: 300px;
background-color: red;
transition: right 0.5s;
overflow-y: auto;
padding: 20px;
}
.side-panel.open {
right: 0;
}
.arrow {
position: absolute;
top: 20px;
left: 20px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #2196F3;
cursor: pointer;
}
.arrow.open {
transform: rotate(180deg);
}
.left-arrow {
position: absolute;
top: 20px;
right: 20px;
width: 0;
height: 0;
border-top: 20px solid transparent;
border-bottom: 20px solid transparent;
border-right: 20px solid #2196F3;
cursor: pointer;
}
.open .left-arrow {
transform: rotate(180deg);
}
{# Added Code for side bar #}
.sidenav {
height: 100%;
width: 250px;
position: fixed;
z-index: 3;
top: 80px;
left: 0px;
background-color: #111;
overflow-x: hidden;
transition: 0.5s;
padding-top: 60px;
}
.open .sidenav {
left: -20px;
}
.sidenav a {
padding: 8px 8px 8px 32px;
text-decoration: none;
font-size: 25px;
color: #818181;
display: block;
transition: 0.3s;
}
.sidenav a:hover {
color: #f1f1f1;
}
.sidenav .closebtn {
position: absolute;
top: 0;
right: 25px;
font-size: 36px;
margin-left: 50px;
}
#main {
transition: margin-left .5s;
padding: 16px;
margin-left: 250px;
}
.form {
border-radius: 20px;
box-sizing: border-box;
height: 500px;
padding: 20px;
width: inherit;
font-size: 1.8rem;
}
.title{
color: #eee;
font-family: "Bitstream Vera Sans Mono", Monaco, "Courier New", Courier, monospace;
font-size: 25px;
font-weight: 400;
padding-left: 15px;
}
.input-container {
height: 50px;
position: relative;
width: 100%;
}
.soura {
margin-top: 40px;
}
.ic2 {
margin-top: 30px;
}
.input {
background-color: #303245;
border-radius: 12px;
border: 0;
box-sizing: border-box;
color: #eee;
font-size: 18px;
height: 100%;
outline: 0;
padding: 4px 20px 0;
width: 100%;
}
.cut {
background-color: black;
border-radius: 10px;
height: 20px;
left: 20px;
position: absolute;
top: -20px;
transform: translateY(0);
transition: transform 200ms;
}
.arrowsize-cut{
width: 80px;
}
.concentration-cut{
width: 105px;
}
.example-cut{
width: 140px;
}
.labelsize-cut{
width: 80px;
}
.input:focus ~ .cut,
.input:not(:placeholder-shown) ~ .cut {
transform: translateY(8px);
}
.placeholder {
color: #65657b;
font-family: sans-serif;
left: 20px;
line-height: 14px;
position: absolute;
transform-origin: 0 50%;
transition: transform 200ms, color 200ms;
top: 20px;
}
.input:focus ~ .placeholder,
.input:not(:placeholder-shown) ~ .placeholder {
transform: translateY(-30px) translateX(10px) scale(0.75);
}
.input:not(:placeholder-shown) ~ .placeholder {
color: #808097;
}
.input:focus ~ .placeholder {
color: #dc2f55;
}
.submit {
background-color: #08d;
border-radius: 12px;
border: 0;
box-sizing: border-box;
color: #eee;
cursor: pointer;
font-size: 18px;
height: 30px;
margin-top: 38px;
outline: 0;
text-align: center;
width: 100%;
}
.submit:active {
background-color: #06b;
}
/* Adding the button */
@media screen and (max-height: 450px) {
.sidenav {padding-top: 15px;}
.sidenav a {font-size: 18px;}
}
/* Code for download button */
.hide {
max-height: 0 !important;
}
.dropdown{
border: 0.1em solid white;
width: 18em;
margin-bottom: 1em;
margin-top: 2rem;
position: relative;
}
.dropdown .title{
margin: .3em .3em .3em .3em;
width: 100%;
}
.dropdown .title .fa-angle-right{
float: right;
margin-right: .7em;
transition: transform .3s;
}
.dropdown .menu{
transition: bottom .5s ease-out;
background-color: black;
min-width: 18rem;
/* bottom: 7.9em; */
border: solid white;
overflow: hidden;
position: absolute;
font-size: 10px;
}
.dropdown .menu .option{
margin: .1em .1em .1em .1em;
margin-top: 0.3em;
color: white;
font-size: 10px;
}
.dropdown .menu .option:hover{
background: rgba(0,0,0,0.2);
}
.pointerCursor:hover{
cursor: pointer;
}
.rotate-90{
transform: rotate(-90deg);
}
.clickable {
cursor: pointer;
text-decoration: underline;
color: blue;
}
.dropdown .download-button {
position: absolute;
top: 0;
right: -60px; /* Adjust the position as needed */
width: 50px;
height: 100%;
background-color: #333;
border: none;
border-radius: 0 4px 4px 0;
color: white;
font-size: 16px;
cursor: pointer;
}
.dropdown .download-button i {
margin-top: 6px;
}
</style>
</head>
<body>
<div id = "main" style="margin-left: 7rem;">
<div id="mySidenav" class="sidenav">
<div class="left-arrow" onclick="toggleNav()"></div>
<a href="javascript:void(0)" class="closebtn" onclick="closeNav()">×</a>
<form class="form" id="myForm" target="_blank" method="post">
<div class = "title">settings</div>
<div class="input-container soura">
<input id="examples" class="input" name="examples" placeholder=" " />
<div class="cut example-cut"></div>
<label for="examples" class="placeholder">
Examples
<span id="example1" class="example" onclick="setExampleValue('example1')"> #1</span>
<span id="example2" class="example" onclick="setExampleValue('example2')"> #2</span>
</label>
</div>
<div class="input-container ic2">
<input id="arrowsize" class="input" type="text" placeholder=" " />
<div class="cut arrowsize-cut"></div>
<label for="arrowsize" class="placeholder">arrow size</label>
</div>
<div class="input-container ic2">
<input id="labelsize" class="input" type="text" placeholder=" " />
<div class="cut arrowsize-cut"></div>
<label for="labelsize" class="placeholder">label font-size</label>
</div>
<button type="submit" class="submit">Submit</button>
</form>
<div class='dropdown'>
<a class='title pointerCursor'>Download <i class="fa fa-angle-down"></i></a>
<div class='menu pointerCursor hide'>
<div class='option' id='option1'><a href="#">PNG</a></div>
<div class='option' id='option2'><a href="#">SVG</a></div>
<div class='option' id='option3'><a href="#">JPEG</a></div>
</div>
<button class="download-button"><i class="fa fa-download"></i></button>
</div>
</div>
<div class="graph-container">
<div id="network" class="main-panel"></div>
<div id="graph" class="side-panel">
<div class="arrow"></div>
</div>
</div>
<script src="https://kit.fontawesome.com/adf1f3a283.js" crossorigin="anonymous"></script>
<script>
function openNav() {
document.getElementById("mySidenav").style.width = "250px";
document.getElementById("main").style.marginLeft = "250px";
}
function closeNav() {
document.getElementById("mySidenav").style.width = "0";
document.getElementById("main").style.marginLeft = "0";
}
// examples
function setExampleValue(value) {
document.getElementById("examples").value = value;
}
// download options
const dropdownTitle = document.querySelector('.dropdown .title');
const dropdownMenu = document.querySelector('.dropdown .menu');
dropdownTitle.addEventListener('click', function () {
dropdownMenu.classList.toggle('hide');
});
document.querySelectorAll('.dropdown .option').forEach(function (option) {
option.addEventListener('click', function () {
// Handle the selected download option here
const selectedOption = this.textContent;
console.log('Selected option:', selectedOption);
// Display the selected option in the dropdown title
dropdownTitle.textContent = `Download ${selectedOption}`;
// Close the dropdown menu
dropdownMenu.classList.add('hide');
});
});
/*function toggleNav() {
const sideNav = document.getElementById("mySidenav");
sideNav.classList.toggle("open");
}
const leftArrow = document.querySelectorAll(".left-arrow");
leftArrow.addEventListener("click", function() {
toggleNav();
document.querySelector(".sidenav").classList.toggle("open");
});*/
const fid = document.getElementById("examples").value;
console.log(fid)
const fpath = `/path/${fid}.json`;
fetch(fpath)
.then(response => response.json())
.then( data => {
var x = data.x
})
</script>
</div>
</body>
</html>
Suggestions on how to get the value of the placeholder in examples to load a file with this name using fetch will be really helpful.
Solution
Let's just try to get that value... Replace this:
<input id="examples" class="input" name="examples" placeholder=" " />
With this:
<input id="examples" class="input" name="examples" placeholder=" " onfocusout=getExampleValue() />
Now for getting that value:
function getExampleValue() {
const fid = document.getElementById("examples").value;
console.log(fid)
const fpath = `/path/${fid}.json`;
fetch(fpath)
.then(response => response.json())
.then( data => {
var x = data.x
})}
- HTML text input allow only numeric input
- XPath Selector in Puppeteer 22.x
- How to fix Error: Not implemented: navigation (except hash changes)
- PayPal: Handling and Testing Declined Cards with Javascript SDK+REST
- Returning HTML With fetch()
- extract plain text from react object
- ASP.NET MVC5: Change Upload Limit for Specific URL
- Modal slideshow for multiple images on page
- Merge neighbouring HTML table cells with same value using JS
- How can I use Axios with Server-sent events (SSE) in the browser?
- Interact with locator that has dynamic value in playwright
- Javascript: Special character in a javascript object property string.
- Send Mail Youtrack Workflow Helpdesk
- mongodb connection timeout error with mongoose and nodejs
- Display elements of an array one by one in order on event click
- JavaScript: How to add x to an array x times?
- error An unexpected error occurred: "EPERM: operation not permitted, unlink 'path_to_project\\node_modules\\prisma\\query_engine-windows.dll.node'
- .js Scroll left and right of page
- CSV separator auto-detection in Javascript
- How to show only hours and minutes from javascript date.toLocaleTimeString()?
- Detect loss of focus in JavaScript
- User doesnt get PWA Notifications on iOS using FCM after a couple attempts
- Generate random number between two numbers in JavaScript
- Disable all buttons on page
- Vue 3 & Vite built application shows blank page
- Vite preview is working but I can not see it running when opening index.html
- Convert blob to base64
- Web audio echoCancellation with multiple sources does not work
- Select2 search input not working on bootstrap5
- How to generate an MD5 hash from a string in JavaScript/Node.js?