I made a calculator, but + doesn't work, why?? -> if you want + something, you have to press button : sečíst .... it doesn't + it, but it writes it in some bad way, take a look : http://jsfiddle.net/p77roqhr/
<pre>
<!DOCTYPE html>
<html lang="cs-CZ">
<head>
<meta charset="UTF-8">
<meta name="generator" content="Prace">
<link rel="stylesheet" href="online_kalkulacka.css">
<title>kalkulačka</title>
</head>
<body>
<h1>Kalkulačka</h1>
<form name="kalkulacka">
<fieldset>
<div id="cislo1">
<label for="vypln_cislo1">zadej zde první číslo</label> <input id="1" type="number" name="prvni" min="0" max="10000">
</div>
<div id="cislo2">
<label for="vypln_cislo2">zadej zde druhé číslo</label> <input id="2" type="number" name="druhe" min="0" max="10000">
</div>
<button id="b1" onclick="document.getElementById('3').innerText = document.getElementById('1').value + document.getElementById('2').value; return false;">sečíst</button>
<button id="b2" onclick="document.getElementById('3').innerText = document.getElementById('1').value - document.getElementById('2').value; return false;">odečíst</button>
<button id="b3" onclick="document.getElementById('3').innerText = document.getElementById('1').value / document.getElementById('2').value; return false;">vydělit</button>
<button id="b4" onclick="document.getElementById('3').innerText = document.getElementById('1').value * document.getElementById('2').value; return false;">vynásobit</button>
<div id="vysledek">
výsledek je :
<br>
<div id="vysledek2">
<span id="3"></span>
</div>
</div>
</fieldset>
</form>
</body>
</html>
</pre>
You have to convert each to a number first so it will add them like a number instead of doing string concatenation. Look for parseInt().
Change your code to
<button id="b1" onclick="document.getElementById('3').innerText = parseInt(document.getElementById('1').value, 10) + parseInt(document.getElementById('2').value, 10); return false;">sečíst</button>
Related
I know the question has been asked a lot here, but I'm very new to programming and very new to HTML in general. Therefore, the questions already asked did not help me, I would rather need a short code fix. I have these two HTML files and all I want to do is to display the input from the input HTML in the text field of the output HTML.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Input</title>
</head>
<body>
<div id="top">
<div id="headline">Input Overlay</div>
<form id="formOverlay">
<div id="numberOption"><label for="numberOption">Enter a number between 1 and 10:</label>
<input type="number" name="numberOption" id="numberBlock" min="1" max="10">
</div>
<div id="dropDownSelect"><label for="dropDownSelect">Select a value:</label>
<select name="dropSelectBlock" id="dropSelectBox">
<option value="Select a value">select a value:</option>
<option value="in progress">a</option>
<option value="in progress">b</option>
</select>
</div>
</form>
</div>
<a href="link_to_testOutput.html">
<button type="button" id="ok-button">OK</button> </a>
<button form="formOverlay" type="reset" id="reset-button">Reset</button>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Output</title>
</head>
<body>
<div id="top">
<div id="headline">Output</div>
<div id="currentInput">Current input:</div>
<textarea id="currentInputBox" name="currentInfoBox" rows="2" cols="50">Number:
Value: </textarea>
</div>
<a href="link_to_testIput.html">
<button type="button" id="back-button">Back</button> </a>
</body>
</html>
Just submit the form to the next page:
<div id="top">
<div id="headline">Input Overlay</div>
<form id="formOverlay" method="get" action="link_to_testOutput.html">
<div id="numberOption"><label for="numberOption">Enter a number between 1 and 10:</label>
<input type="number" name="numberOption" id="numberBlock" min="1" max="10">
</div>
<div id="dropDownSelect"><label for="dropDownSelect">Select a value:</label>
<select name="dropSelectBlock" id="dropSelectBox">
<option value="Select a value">select a value:</option>
<option value="in progress A">a</option>
<option value="in progress B">b</option>
</select>
</div>
<button id="ok-button">OK</button>
<button type="reset" id="reset-button">Reset</button>
</form>
</div>
Page 2
window.addEventListener("load", function() {
const url = new URL("https://yourserver.com/link_to_testOutput.html?dropSelectBlock=in%20progress B&numberOption=9") // new URL(location.href)
document.getElementById("currentInputBox").value = `Number:${url.searchParams.get("numberOption")}\nValue: ${url.searchParams.get("dropSelectBlock")}`
})
<div id="top">
<div id="headline">Output</div>
<div id="currentInput">Current input:</div>
<textarea id="currentInputBox" name="currentInfoBox" rows="2" cols="50"></textarea>
</div>
When tested change
const url = new URL("https://....") // new URL(location.href)
to
const url = new URL(location.href);
I want to send all the input data acquired from a html form and show them (as a preview) in another html form.
My first html form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cafteria details</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Cafeteria registration</h2>
<form id="details" method="POST">
Full name: <input type="text" id="name" size=25 "><br><br>
Organization:<div id="org"><input type="checkbox" id="cb1" onclick="check()">ID no: <input type="number" id="org_number" style="visibility: hidden"><br><br>
<input type="checkbox" id="cb2" onclick="check()">Mobile No: <input type="tel" id="ph_number" style="visibility: hidden" required></div><br><br>
E-mail: <input type="email" id="email" size=25><br><br>
Upload ID Card: <input type="file" accept=".jpeg , .png" id="img"><br><br>
</form>
<button id="button" style="background-color: whitesmoke" onclick="submit()" >Register</button>
<script src="back_end.js" async></script>
</body>
</html>
The javascript (back_end.js)
var btn=document.getElementById("button");
function submit(){
var file = document.getElementById("img").files[0];
const reader = new FileReader();
reader.addEventListener("load", (event) => {
localStorage.setItem("Image", event.target.result);
const dForm = document.getElementById('details');
dForm.addEventListener('submit', function(e) {
e.preventDefault();
fetch("preview.html", {
method: 'post',
mode: 'cors',
headers: {'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*',
'Access-Control-Allow-Methods': 'GET, POST, HEAD, OPTIONS'},
body: JSON.stringify({
full_name: document.getElementById("name").value,
mobile: document.getElementById("ph_number").value,
Email: document.getElementById("email").value,
image: localStorage.getItem('Image'),
id: document.getElementById("org_number").value
})
}).then(function (response){
return response.text();
}).then(function (text){
console.log(text);
}).catch(function (error){
console.error(error);
})
});
window.location.href = "preview.html";
});
reader.readAsDataURL(file);
}
My second html form:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="preview_back_end.js"async></script>
<link rel="stylesheet" href="preview_styles.css">
</head>
<body>
<h2>Please finalize your details</h2>
<form id="details" method="post" class="form">
Full name: <strong name="name_1" value=""></strong><br><br>
ID No:<strong name="org_number_1" value=""></strong><br><br>
Mobile No:<strong name="ph_number_1" value=""></strong><br><br>
E-mail: <strong name="email_1"></strong><br><br>
ID Card: <img src="" alt="preview" name="image" style="width: 100px; height: 100px;" value=""><br><br>
<button id="go" style="background-color: whitesmoke">It's correct</button>
</form>
<button id="back" style="background-color: whitesmoke" onclick="goback()">Something's wrong</button>
<p id="response"></p>
</body>
</html>
Now I want to fetch those values and write them in this new html form, how do I do that? Also, from the second html page I want to post the data into my php script.
Oh, This is the front end.
But you need backend.
You can use "PHP" implement form upload.
Only using javascript can not achieve form upload.
***.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Cafteria details</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<h2>Cafeteria registration</h2>
<form id="details" method="POST" action="demo.php">
Full name: <input type="text" id="name" size=25 " name="fullname"><br><br>
Organization:<div id="org"><input type="checkbox" id="cb1" onclick="check()" name="org">ID no: <input type="number" id="org_number" style="visibility: hidden" name="id"><br><br>
<input type="checkbox" id="cb2" onclick="check()">Mobile No: <input type="tel" id="ph_number" style="visibility: hidden" required name="mobile"></div><br><br>
E-mail: <input type="email" id="email" size=25 name="email"><br><br>
Upload ID Card: <input type="file" accept=".jpeg , .png" id="img" name="idcard"><br><br>
</form>
<button id="button" style="background-color: whitesmoke" onclick="submit()" >Register</button>
<script src="back_end.js" async></script>
</body>
</html>
demo.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Preview</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="preview_back_end.js"async></script>
<link rel="stylesheet" href="preview_styles.css">
</head>
<body>
<h2>Please finalize your details</h2>
<form id="details" method="post" class="form">
Full name: <strong name="name_1" value=""><?php echo $_POST["fullname"]; ?></strong><br><br>
ID No:<strong name="org_number_1" value=""><?php echo $_POST["id"] ?></strong><br><br>
Mobile No:<strong name="ph_number_1" value=""><?php echo $_POST["mobile"] ?></strong><br><br>
E-mail: <strong name="email_1"><?php echo $_POST["email"]; ?></strong><br><br>
ID Card: <img src="<?php echo $_POST["idcard"]; ?>" alt="preview" name="image" style="width: 100px; height: 100px;" value=""><br><br>
<button id="go" style="background-color: whitesmoke">It's correct</button>
</form>
<button id="back" style="background-color: whitesmoke" onclick="goback()">Something's wrong</button>
<p id="response"></p>
</body>
</html>
You also need to specify whether to get or post.
You can ask me any questions.
I'm working on a nodejs project and over the last couple days I put together a dynamic form using Vuejs. However, for the list I am confused as to how I should omit the delete button for the first item of the dynamic portion of the from.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Homemade</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div class="newRecipeContainer">
<form action="/recipes/createRecipe" method="POST">
<div class="recipeNameContainer">
<label class="recipeNameLabel">Title</label>
<input type="text" name="recipeName">
</div>
<div class="directionsContainer">
<button class="addDirectionButton" type="button" #click="addDirectionForm">Add Another Direction</button>
<div class="allDirections" v-for="(direction, index) in directions">
<label class="direction">{{ index + 1 }}.)</label>
<input type="text" name="directions" v-model="direction.direction">
<button class="deleteDirectionButton" type="button" #click="deleteDirectionForm(index)">Delete Direction</button>
</div>
</div>
<div class="recipeImage">
<input type="file" accept="image/*" />
</div>
<button class="createRecipeButton" type="submit">Create Recipe</button>
</form>
</div>
<script src="/controls/newRecipeControl.js"></script>
</body>
</html>
var app = new Vue({
el: '.directionsContainer',
data: {
directions: [
{
direction: ''
}
]
},
methods: {
addDirectionForm: function(){
this.directions.push({
direction: ''
})
},
deleteDirectionForm: function(index){
if(index != 0)
this.directions.splice(index, 1)
}
}
})
Initially, my thought was to use an if statement in the html to check whether index is equal to 0, however, that errors out. I am using ejs to embed javascript into my html. I am unsure how to best approach this, any suggestions?
Thanks for the help.
Use Vue's conditional rendering on your button element to only show it for indexes above zero 1️⃣.
<button
v-if="index > 0" 1️⃣
class="deleteDirectionButton"
type="button"
#click="deleteDirectionForm(index)"
>Delete Direction</button>
I'm creating a web-page out of HTML and whenever I hit one of the buttons, it clears all the text in my inputs. When I hit one of the buttons, I only want it to clear the text in its div. How do I do this? This is my html code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SmartMail</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1><b>Welcome to SmartMail!!</b></h1>
<form>
<div class="recipients">
<input type="text" class="typer">
<br><br>
<button class="ar">Add User</button>
<button class="ur">Remove User</button>
<br><br><br>
<select name="users" class="userlist" size="24">
<option class="listhead"> __________*Recipents*__________
</option>
<option class="listhead">-------------------------------
</option>
</select>
</div>
<div class="content">
<button class="send">Send</button>
<br><br>
<textarea name="content" class="typec" cols="113" rows="12">
</textarea>
</div>
</form>
</div>
</body>
</html>
Any help is useful! Thanks!
Your page is always refreshing when your click on any of the buttons because a button tag inside a form tag is interpreted as a submit button (<button type="submit">). You need to explicitly give the buttons a type of button. You will also need to prevent the default action when enter is pressed in an input with event.preventDefault().
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>SmartMail</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="container">
<h1><b>Welcome to SmartMail!!</b></h1>
<form>
<div class="recipients">
<input type="text" class="typer" id="typer">
<br><br>
<button type="button" class="ar">Add User</button>
<button type="button" class="ur">Remove User</button>
<br><br><br>
<select name="users" class="userlist" size="24">
<option class="listhead"> __________*Recipents*__________
</option>
<option class="listhead">-------------------------------
</option>
</select>
</div>
<div class="content">
<button type="button" class="send">Send</button>
<br><br>
<textarea name="content" class="typec" cols="113" rows="12">
</textarea>
</div>
</form>
</div>
<script>
document.getElementById('typer').addEventListener("keypress", (e)=>{
if(e.keyCode==13){
e.preventDefault();
}
});
</script>
</body>
</html>
I am trying to Remove a topic from CrudRepository, but the checkboxes I am trying to create don't show up.
I have an Add Method which works just fine, but the remove doesn't.
HTML: hello.html
for the navigation and head fragments
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org/"
xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head th:fragment="head">
<title> Lunch Planner Beta </title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" type="text/css"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"> </script>
</head>
<body>
<h1 th:inline="text">Hello [[${#httpServletRequest.remoteUser}]]!</h1>
<nav th:fragment="navigation">
List |
Add |
<a th:href="/removeTopic">Remove</a>
</nav>
<form th:action="#{/home}" method="get">
<input type="submit" value="Home"/>
</form>
<br/>
<form th:action="#{/logout}" method="post">
<input type="submit" value="Sign OUT"/>
</form>
</body>
</html>
The part of TopicController.java
#RequestMapping(method = RequestMethod.POST, value = "/remove", consumes = {MediaType.APPLICATION_FORM_URLENCODED_VALUE})
#Transactional
public ModelAndView deleteTopic(Long id, HttpServletResponse response, Errors errors){
response.setStatus(HttpServletResponse.SC_NO_CONTENT);
model.addObject("topic",topicService.getTopic(id));
topicService.deleteTopic(id);
return new ModelAndView("home");
}
HTML: removeTopic.html
<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org/">
<head th:replace="hello :: head">
</head>
<body class="container">
<nav th:replace="hello :: navigation"></nav>
<form th:action="#{/api/remove}" th:object="${topic}" method="post">
<div th:each="topic: ${topic}" class="checkbox">
<input type="radio" name="id" th:value="${topics.id}" th:id="${topics.id}"/>
<label th:for="${topics.id}" th:text="${topics.category}"></label>
<br/>
</div>
<input type="submit" value="Remove Topic"/>
</form>
</body>
</html>
And here is what is happeneing:
Your problem is in the loop, you are using the same object to iterate itself
th:each="topic: ${topic}"
You should have something similar to this
<div th:each="item: ${topics}" class="checkbox">
<input type="radio" name="id" th:value="${item.id}" th:id="${item.id}"/>
<label th:for="${item.id}" th:text="${item.category}"></label>
<br/> <!-- Do not use this tag to add vertical space, use css classes-->
</div>
Thanks to https://stackoverflow.com/users/2757561/cralfaro we were able to fix the connection between the controller and the removeTopic.html
The problem was is the hello.html at the
<a th:href="/removeTopic">Remove</a>
and this is how it should be:
<a th:href="#{/api/removeTopic}">Remove</a>