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?
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'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>
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>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>The Magic Genie</title>
<link href="java-game.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="java-game.js"></script>
</head>
<body class="oneColFixCtr">
<div id="container">
<div id="mainContent">
<h1>Ask Your Magic Genie </h1>
<form>
Your question: <input type="text" name="question" size="40">
<input type="button" name="ask" value="Ask the Genie" onClick="if (this.form.question.value!='') this.form.answer.value = genie();">
<br />
<br />
Your magic genie says: <input type="text" name="answer" size="50">
</form></p>
</div>
</body>
</html>
Well your problem is you have no doctype, html, head or body tag.
Your page will not validate, simply because you are incorrectly nesting/closing tags, and some tags do not have correct attributes to them.
First of ALL things you are talking about xhtml and added xhtml-1.0-strict tag, but your heading states: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">.
I've never in my life seen <body class="oneColFixCtr"> class, being added to <body>. You can manipulate <body> in CSS by: body {background: red;}.
There were 1x <div> tags missing! There was 1x extra </p>. Lots of tags were not ended with /. <form> was missing method and action parameter!
Also, if you want 100% perfect validation, you cant use onclick="". I added jQuery to your script.
Live example: http://kopli.pri.ee/stackoverflow/5653786.php (click here to validate)
Full version of the code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>I am trying to validate this form page xhtml and it will not validate - Kalle H. Väravas</title>
<link href="java-game.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript" src="java-game.js"></script>
</head>
<body>
<div id="container">
<div id="mainContent">
<h1>Ask Your Magic Genie </h1>
<form method="post" action="">
Your question: <input type="text" name="question" size="40" />
<input type="button" name="ask" value="Ask the Genie" /><br />
<br />
Your magic genie says: <input type="text" name="answer" size="50" />
</form>
</div>
</div>
<script type="text/javascript">
$('input[name=ask]').click(function () {
if ($(this).form.question.value!='') {
$(this).form.answer.value = genie();
}
});
</script>
</body>
</html>