How can I transfer form data between 2 html pages? - html

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);

Related

thymeleaf <div th:each....> disappears after refreshing page

This is my code:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="EUC-KR">
<title>Taco cloud</title>
</head>
<body>
<h1>Designate your taco!</h1>
<img th:src="#{/images/TacoCloud.png}">
<form method="POST" th:object="${taco}">
<div class="grid">
<div class="ingredient-group" id="wraps">
<h3>Designate your taco!</h3>
<div th:each="ingredient:${wrap}">
<input type="checkbox" value="${ingredient.id}"/>
<span th:text="${ingredient.name}">INGREDIENT</span>
</div>
</div>
</div>
<button>Submit your taco</button>
</form>
</body>
</html>
When I press the Submit your taco button, my controller returns this html file back with
return "design";
But the problem is after the controller runs return "design",
the following part disappears:
<div th:each="ingredient:${wrap}">
<input type="checkbox" value="${ingredient.id}"/>
<span th:text="${ingredient.name}">INGREDIENT</span>
</div>
How can I fix it?

HTML - Buttons and Input

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>

Removing an Element from a repository with Spring and 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>

HTML calculator , + doesnt works

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>

How to Display error message when record not found in database

How to search records in table . i want to search data using id. if that id is available in database then open edit.jsp if not exist then display any error message. i want to use jsp technology.
Search.jsp
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Upload Page</title>
<link rel="stylesheet" type="text/css" href="hicourt.css"/>
<script language="javascript" type="text/javascript">
</script>
<body onLoad="randomString()">
<form name="f1" method="post" action="edit.jsp">
<div id="wrapper">
<div id="banner">
</div>
<div id="navigation" align="center">
Search Registration Number
</div>
<div id="content_area">
<p class="contact"><label for="name"><span style="font-weight:bold">EDIT</span></label>
<input id="id" name="id" placeholder="Advocate Reg Number" required="" type="text">
</p>
<div style="text-align:center">
<input name="submit" id="submit" tabindex="10" value="EDIT" align="middle"type="submit">
</div> </div>
<div id="footer">
</div>
</div>
</form>
</body>
</html>