<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout/default">
<title>Make Page</title>
<script th:inline="javascript" src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js">
</script>
<body layout:fragment="content">
<div style="text-align: center">
<h1>write page</h1>
<form th:action="#{/createDiary}" th:object="${Diary}" method="post">
<p>writer : <input type="text" th:field="*{writer}"/></p>
<p>title : <input type="text" th:field="*{title}"/></p>
<p>content : <input style="width: 300px; height: 300px;" type="text" th:field="*{content}"/></p>
<p><input type="submit" value="add"/> <input type="reset" value="reset"/></p>
</form>
</div>
</body>
</html>
I did this, but it didn't work. So I tried another way
<script th:inline="javascript" src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js">
</script>
Changed to
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js"></script>
I still can't look at it. What am I doing wrong?
Is it because Javascript is not used in Timeleaf? Then, is it impossible to use ckeditor?
According to the documentation, you need a <script> tag to load the libary and a bit of JavaScript to setup. So your example should be something like this:
<!DOCTYPE html>
<html lang="ko" xmlns:th="http://www.thymeleaf.org"
xmlns:layout="http://www.ultraq.net.nz/thymeleaf/layout"
layout:decorator="layout/default">
<head>
<title>Make Page</title>
<script src="https://cdn.ckeditor.com/ckeditor5/27.1.0/classic/ckeditor.js">
</script>
</head>
<body layout:fragment="content">
<div style="text-align: center">
<h1>write page</h1>
<form th:action="#{/createDiary}" th:object="${Diary}" method="post">
<p>writer : <input type="text" th:field="*{writer}"/></p>
<p>title : <input type="text" th:field="*{title}"/></p>
<p>content : <input style="width: 300px; height: 300px;" type="text" th:field="*{content}"/></p>
<p><input type="submit" value="add"/> <input type="reset" value="reset"/></p>
</form>
</div>
<script>
ClassicEditor
.create( document.querySelector( '#content' ) )
.catch( error => {
console.error( error );
} );
</script>
</body>
</html>
Related
I have been trying to set up two hyperlinks on the same page. For some reasons, regardless of the choice made by clicking on the hyperlinks, it always open the html page associated with the first option. Am I missing something?
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>Spring Security Example</title>
</head>
<body>
<h1>Welcome</h1>
<p>Click <a th:href="#{/login}"> here </a>for login. </p>
<p>Click <a th:href="#{/registration}"> here </a>to register as a new user.</p>
</body>
</html>
Here is login.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org"
xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>Spring Security Example </title>
</head>
<body>
<div th:if="${param.error}">
Invalid username and password.
</div>
<div th:if="${param.logout}">
You have been logged out.
</div>
<form th:action="#{/login}" method="post">
<div><label> User Name : <input type="text" align="center" name="username"/> </label></div>
<div><label> Password: <input type="password" align="center" name="password"/> </label></div>
<div><input type="submit" value="Sign In"/></div>
</form>
</body>
</html>
The below is registration.html
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org"
xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>Spring Security Example </title>
</head>
<body>
<form th:action="#{/registration}" method="post">
<div><label> Preferred User Name : <input type="text" align="center" name="username"/> </label></div>
<div><label> Password: <input type="password" align="center" name="pasisword"/> </label></div>
<div><label> Reentered password: <input type="password" align="center" name="password"/> </label></div>
<div><label> Address: <input type="text" align="center" name="address"/> </label></div>
<div><label> Upload Image : <input type="image" align="center" name="photos"/> </label></div>
<div><input type="submit" value="new user"/></div>
</form>
</body>
</html>
MvcConfig.java is as below.
public class MvcConfig implements WebMvcConfigurer {
public void addViewControllers(ViewControllerRegistry registry) {
registry.addViewController("/home").setViewName("home");
registry.addViewController("/").setViewName("home");
registry.addViewController("/hello").setViewName("hello");
registry.addViewController("/login").setViewName("login");
registry.addViewController("/registration").setViewName("registration");
}
}
This might help.
Split the string in the href
#{'/' + ${login}}
like this:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:th="https://www.thymeleaf.org" xmlns:sec="https://www.thymeleaf.org/thymeleaf-extras-springsecurity3">
<head>
<title>Spring Security Example</title>
</head>
<body>
<h1>Welcome</h1>
<p>Click <a th:href="#{'/' + ${login}}"> here </a>for login. </p>
<p>Click <a th:href="#{'/' + ${registration}}"> here </a>to register as a new user.</p>
</body>
</html>
I have a form and I am trying to save the fields to local storage but the alert comes up as null And the local storage isn't saving
<form method="post">
<input type="text" name="name" id="name" class="stored form-control" value="" />
<button onclick="store()" type="button" id="myButton" class="btn />
</form>
function store(){
var inputName= document.getElementById("name");
window.localStorage.setItem("name", inputName.value);
alert(name);
}
You have to call window.localStorage.getItem("name") to get the name from local storage in alert. Also your button tag is not closed properly. I have just formatted your code:
<!DOCTYPE html>
<html>
<head>
<title>Local Storage Demo</title>
<script>
function store(){
var inputName= document.getElementById("name");
window.localStorage.setItem("name", inputName.value);
alert(window.localStorage.getItem("name"));
}
</script>
</head>
<body>
<form>
<input type="text" name="name" id="name" />
<button onclick="store()" type="button" id="myButton">Save</button>
</form>
</body>
</html>
The required attribute is not working.Even when I am submitting an empty input,its not showing me an error.
<!DOCTYPE HTML>
<html>
<head>
<title>
EminemCircle
</title>
</head>
<body style="background-image:url(e3.jpg)">
<h1 style="color:red">Hey Come On!</h1>
</br> </br>
<h2 style="color:#00ff00">Dr.Dre Fires 10 million missiles!</h2>
</br> </br>
<form align="center" >
<label style="color:red;font-size:35px">Email id:</label> </br>
<input type="text" size="40px" required /> </br>
<input type="button" value="Submit"/>
</form>
</body>
<html>
Editing your code a bit. You've to change input type="button" to input type="submit" That's it.
<html>
<head>
<title>
EminemCircle
</title>
</head>
<body style="background-image:url(e3.jpg)">
<h1 style="color:red">Hey Come On!</h1>
</br> </br>
<h2 style="color:#00ff00">Dr.Dre Fires 10 million missiles!</h2>
</br> </br>
<form align="center" >
<label style="color:red;font-size:35px">Email id:</label> </br>
<input type="text" size="40px" required /> </br>
<input type="submit" value="Submit"/>
</form>
</body>
<html>
The text boxes get red borders when text is removed from them. However, the textarea does not follow this behavior. What is the problem and how do I remedy it?
http://jsfiddle.net/cKYNy/9/
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta charset="ISO-8859-1" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scaleable=no" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css">
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
</head>
<body>
<div data-role="page" id="page_1" data-theme="b">
<div data-role="content" data-theme="b" style="padding:0px;margin:0;">
<p>Content Page 1</p>
<form name="contactForm" id="contactForm" data-ajax="false" method="post">
<div>
<input type="text" id="name" name="name" value="" required="true"></input>
</div>
<div>
<input id="email" name="email" type="email" value="" required="true"></input>
</div>
<div>
<textarea name="message" id="message" required="true"></textarea>
</div>
<div>
<input type="submit" name="submit" id="submit" value="Submit"></input>
</div>
</form>
</div>
</div>
</body>
</html>
If it is not an option of JQuery Mobile you might wanna try the following:
$("#contactForm").submit(function (e) {
e.preventDefault();
if ($('#name')[0].checkValidity() === false) {
$('#name')[0].toggleClass("error");
}
}
Catch the submit event on the form, stop it from submitting and check the validation yourself. If not valid, add an error class.
I'm trying to test a very basic javascript function that will only remove an attribute from an input. In this case, i want the placeholder attribute to be removed, and this is not working:
<!DOCTYPE html>
<html>
<head>
<script type="text/javascript">
function buttonClicked() {
document.getElementById("textBox").removeAttribute('placeholder');
}
</script>
</head>
<body>
<div id="commentBox">
<input type="textarea" rows="4" cols="50">
</div>
<div id="textBox">
<input type="text" placeholder="Write">
</div>
<div id="shoutButton">
<input type="button" value="Shout!" onclick="buttonClicked();">
</div>
</body>
</html>
In the provided code "textBox" is the id of the div element which wraps your input. You need to get the input instead. Try setting the id of the input as well:
<div id="textBox">
<input id="input" type="text" placeholder="Write">
</div>
Then update your buttonClicked function to use the input's id:
function buttonClicked() {
document.getElementById("input").removeAttribute('placeholder');
}