I am trying to obtain the value of an image that is uploaded to an input and after clicking on add product that is shown together with the added product, I have tried a lot and I can not, this is my code.
I've tried a lot and couldn't get any results
const price = document.getElementById("price").value
const img = document.getElementById("file");
My another code
<div class="card">
<div class="card-body">
<div id="file" class="img-product">${product.img}</div>
<h3>${product.name}</h3>
<p id="product-description">${product.description}</p>
<p>Precio: <b>${product.price}</b> RD$ </p>
<button id="buy-product" class="btn btnprimary">Comprar
</button>
<button id="add-product" class="btn btn-warning">Add+</button>
</div>
</div>
My HTML code :
<form id="form-products" class="row">
<div class="col-md-4">
<input type="text" class="form-control" id="product-name"
placeholder="Nombre..">
<input class="form-control my-2" type="file" id="file" accept="image/*"
placeholder="imagen">
</div>
<div class="col-md-4">
<textarea id="description" cols="10" rows="1" class="form-control"
placeholder="Descripcion"></textarea>
<input type="submit" value="Add product" class="btn btn-warning my-2">
</div>
<div class="col-md-4">
<input id="price" type="number" class="form-control"
placeholder="Precio">
</div>
</form>
everything works fine except the image
document.getElementById('file') will only give you the <input> element, not its contents. Have you tried accessing its value like you do with the price?
use this
const img = document.getElementById("file")
img.src = "pathToYourFile"
well I have tried this on my machine and it works fine!!,
My HTML CODE
<html>
<head>
<title> Image </title>
<script src="./index.js" defer></script>
</head>
<body>
<button class="btn"> Add Image </button>
<img id="image">
</body>
</html>
My JS Code
document.querySelector(".btn").addEventListener("click", () => {
const path = "./img/Screenshot (1).png";
const img = document.querySelector("#image");
img.src = path;
});
Related
I'm doing a project and I don't understand the front end well.
I have this html page:
<form class="form-group" action="/create" method="post" enctype="multipart/form-data">
<div class="title">
<h1>Cadastre seu produto</h1>
</div>
<div class="single-input">
<input class="form-control" placeholder="nome do produto" type="text" id="nome_produto" name="nome_produto">
</div>
<div class="single-input">
<input class="form-control" placeholder="quantidade em estoque" type="number" id="quantidade" name="quantidade">
</div>
<div class="single-input">
<input class="form-control" placeholder="preco do produto" type="number" id="preco_produto" name="preco_produto">
</div>
<button onclick="loadPage()" id="button" type="submit" class="btn btn btn-danger">ENVIAR</button>
</form>
I want that when I click on the SUBMIT button, I am redirected to another page, I want to do this using Javascript.
I tried to do this:
<script type="text/javascript">
function loadPage(){
window.location("http://localhost:8080/list")
}
but it's not working, every time I click on the button I'm redirected to a blank page
Any solution ?
Window.location is a property not a function. So it should be
window.location = "http://localhost:8080/list";
More details here: https://developer.mozilla.org/en-US/docs/Web/API/Window/location
I am a beginner on html, CSS & JSS and I am trying to create a simple alert onclick button to test some concepts. I have created simple contact form with bootstrap design and I would just like to create an alert display the message content on click of "send" button. I have written some code down however the alert is not displaying onclick.
Here is my html file code:
<h1 class="animate__animated animate__backInLeft">Contact me</h1>
<div class="barwrapper">
<div class="bar animate__animated animate__backInLeft animate__slow"></div>
</div>
<h2>Email</h2>
<div class="mb-3">
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<h2>Message</h2>
<div class="mb-3">
<input class="form-control" id="message" rows="3">
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button onclick="getInputValue();" class="btn btn-primary me-md-2" type="button" id="send">Send</button>
</div>
And here is my js file code:
function getInputValue()
{
var inputVal = document.getElementById('#message').Value;
alert(inputVal)
}
My js file seems correctly linked to my html file :
<script src="script.js"></script>
Any idea ?
getElementById requires only the document id string, without the #
function getInputValue()
{
var inputVal = document.getElementById('message').value;
alert(inputVal)
}
You're very close, you need to declare your variable like this:
var inputVal = document.getElementById('message');
See the snippet below:
var inputVal = document.getElementById('message');
function getInputValue() {
alert(inputVal.value)
}
<h1 class="animate__animated animate__backInLeft">Contact me</h1>
<div class="barwrapper">
<div class="bar animate__animated animate__backInLeft animate__slow"></div>
</div>
<h2>Email</h2>
<div class="mb-3">
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<h2>Message</h2>
<div class="mb-3">
<input class="form-control" id="message" rows="3"></input>
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button onclick="getInputValue();" class="btn btn-primary me-md-2" type="button" id="send">Send</button>
</div>
Index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<h1 class="animate__animated animate__backInLeft">Contact me</h1>
<div class="barwrapper">
<div class="bar animate__animated animate__backInLeft animate__slow"></div>
</div>
<h2>Email</h2>
<div class="mb-3">
<input type="email" class="form-control" id="email" placeholder="name#example.com">
</div>
<h2>Message</h2>
<div class="mb-3">
<input class="form-control" id="message" rows="3">
</div>
<div class="d-grid gap-2 d-md-flex justify-content-md-end">
<button onclick="getInputValue();" class="btn btn-primary me-md-2" type="button" id="send">Send</button>
</div>
</body>
<script src="index.js"></script>
</html>
Index.js:
function getInputValue()
{
var inputVal = document.getElementById('message').value;
alert(inputVal)
}
first post here, i'm trying to write a code following a tutrial, its a to do list and i wrote a function that takes the content of a text type input and adds it to a list, im testing the code using an alert inside the function but it doenst work and no alerts are shown, here's the code. Thanks in advance
let elements = [];
function addElements(){
if (document.querySelector("#task").nodeValue.trim() != ""){
elements.push(document.querySelector("#task").nodeValue.trim())
alert(elements);
}
}
<body>
<div class="container">
<div id="todoList"></div>
<form action="#" id="todoForm">
<label for="task">Task: </label>
<input type="text" name="task" id="task" autofocus>
<button class="addBtn">
<img src="https://upload-icon.s3.us-east-2.amazonaws.com/uploads/icons/png/20340289291547546467-64.png" alt="">
</button>
<!--<input type="submit" id="submit" value="Add To-Do">-->
</form>
</div>
<script src="../todo_list/apps.js"></script>
</body>
So your problem was you didn't call addElements() on your button.
and instead of using nodeValue just use value instead.
this is working code
let elements = [];
function addElements(){
console.log(document.querySelector("#task").value)
if (document.querySelector("#task").value.trim() != ""){
elements.push(document.querySelector("#task").value.trim())
alert(elements);
}
}
<body>
<div class="container">
<div id="todoList"></div>
<form action="#" id="todoForm">
<label for="task">Task: </label>
<input type="text" name="task" id="task" autofocus>
<button class="addBtn" onclick="addElements()">
<img src="https://upload-icon.s3.us-east-2.amazonaws.com/uploads/icons/png/20340289291547546467-64.png" alt="">
</button>
<!--<input type="submit" id="submit" value="Add To-Do">-->
</form>
</div>
</body>
First you need to stop the html form submit with
<form action="#" id="todoForm" onsubmit="return false;">
Then you need to bind click function to your button, so that when button clicked your addElements function will be triggered
<button class="addBtn" onclick="addElements()">
Finally you need to get the input value with
document.getElementById('task').value;
Complete Code Sample
let elements = [];
function addElements() {
var task = document.getElementById('task').value;
if (task.trim() != "") {
elements.push(task);
alert(elements)
}
}
<body>
<div class="container">
<div id="todoList"></div>
<form action="#" id="todoForm" onsubmit="return false;">
<label for="task">Task: </label>
<input type="text" name="task" id="task" autofocus>
<button class="addBtn" onclick="addElements()">
<img src="https://upload-icon.s3.us-east-2.amazonaws.com/uploads/icons/png/20340289291547546467-64.png" alt="">
</button>
</form>
</div>
</body>
How to send user'name from a HTML file to another HTML file and show it on the site?
this is inside the HomePage
<div class="enterUserName" data-validate = "Enter username">
<input class="input1" type="text" name="username" placeholder="Player Name">
<span class="hi" data-placeholder=""></span>
</div>
<div class="container-login102">
<button type="button"class="login" onclick="location.href='Index.html'">
Start Playing
</button>
</div>
Here is how you could implement it with localStorage:
<div class="enterUserName" data-validate="Enter username">
<input id="input1" type="text" name="username" placeholder="Player Name">
<button onclick="saveUserName()">Save</button>
<button onclick="getUserName()">display</button>
<span class="hi" data-placeholder=""></span>
</div>
<div class="container-login102">
<button type="button" class="login" onclick="location.href='Index.html'">
Start Playing
</button>
</div>
<p id="display"></p>
<script>
function saveUserName() {
localStorage.setItem('userName', document.getElementById('input1').value)
}
function getUserName() {
if (localStorage.userName) { // userName exists
document.getElementById('display').innerHTML = localStorage.userName;
}
}
</script>
However, when using localStorage, the value is accessible only on the same origin, see here, otherwise you'll need a server-side proxy.
I am trying to create a form such that the user can enter HTML code in the textarea which can be rendered when the Preview button is clicked and submitted to the database when the Submit button is clicked. But the data is being submitted when the preview button is clicked.
HTML Code:
function parse() {
var html = document.getElementById("ta").value;
document.getElementById("result").innerHTML = html;
}
<form action="/admin/pages/add-page" method="post">
<div class="form-group">
<label for="">Content</label>
<textarea name="content" class="form-control" id="ta" cols="30" rows="10" placeholder="content"><%= content %></textarea>
</div>
<button class="btn" onclick="parse()">Preview</button>
<button class="btn btn-default">Submit</button>
</form>
<br><br>
<h2>HTML output:</h2>
<div class="float:right" id="result">
The preview button is a submit button!
If you want it to be Just For JavaScript, add type="button".
You need to specify the button's type type="button". If you do not specify the type attribute of a button, it will default to submit, as such it is submitting your form.
MDN docs on button
In your preview button add a type="button" if you don't added by default the form will treat it as a submit button..
function parse() {
var html = document.getElementById("ta").value;
document.getElementById("result").innerHTML = html;
}
<form action="/admin/pages/add-page" method="post">
<div class="form-group">
<label for="">Content</label>
<textarea name="content" class="form-control" id="ta" cols="30" rows="10" placeholder="content"><%= content %></textarea>
</div>
<button type="button" class="btn" onclick="parse()">Preview</button>
<button class="btn btn-default">Submit</button>
</form>
<br><br>
<h2>HTML output:</h2>
<div class="float:right" id="result">
There is something you're missing, you haven't included your type which should be type="button", i.e
<button class="btn" type="button" onclick="parse()">Preview</button>.
You will need to include it between the preview button tag.
Which should make you new code look like the one below.
function parse() {
var html = document.getElementById("ta").value;
document.getElementById("result").innerHTML = html;
}
<form action="/admin/pages/add-page" method="post">
<div class="form-group">
<label for="">Content</label>
<textarea name="content" class="form-control" id="ta" cols="30" rows="10" placeholder="content"><%= content %></textarea>
</div>
<button class="btn" type="button" onclick="parse()">Preview</button>
<button class="btn btn-default">Submit</button>
</form>
<br><br>
<h2>HTML output:</h2>
<div class="float:right" id="result">
This should help you.
Change Button type in your code like:
<form action="/admin/pages/add-page" method="post">
<div class="form-group">
<label for="">Content</label>
<textarea name="content" class="form-control" id="ta" cols="30" rows="10" placeholder="content"><%= content %></textarea>
</div>
<button type="button" class="btn" onclick="parse()">Preview</button>
<button class="btn btn-default">Submit</button>
</form>
<br><br>
<h2>HTML output:</h2>
<div class="float:right" id="result">
<script>
function parse() {
var html = document.getElementById("ta").value;
document.getElementById("result").innerHTML = html;
}
</script>