I'm develop simple Spring boot app using Thymeleaf and want to display selected "user" from Combobox1 at the "userName" text field. How i can made it?
<!DOCTYPE HTML>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="utf-8">
<title>Добавить цитату</title>
</head>
<body>
<form th:action="#{/addQuote}"
th:object="${personForm}" method="POST">
<p><b>Имя</b><br>
<div>
<input name = "userName" type="text" size="38" th:field="*{name}" >
<a style="position:fixed;left:0px;top:0px;margin: 0;border-width:0;z-
index:255"></a>
</div>
<textarea name="comment" cols="40" rows="6" th:field="*{text}" >
</textarea>
<p><input type="reset" value="Отменить">
<input type="submit" value="+"></p>
<select name="Combobox1" size="1" id="Combobox1"
style="position:absolute;left:17%;top:4%;width:199px;height:20px;z-
index:3;" >
<option th:each="user : ${users}"
th:value="${user}"
th:utext="${user}"/>
</select>
</form>
<div th:if="${errorMessage}" th:utext="${errorMessage}"
style="color:red;font-style:italic;">
</div>
</body>
</html>
Option 1:
Add Id in your userName input tag
<input id="userName" name = "userName" type="text" size="38" th:field="*{name}" />
Add script
<script>
function check() {
document.getElementById("userName").value=document.getElementById("Combobox1").value;
}
</script>
Call script function
<select id="Combobox1" onChange="check();">
Option2:
Another option with Jquery
$(function() {
$("#Combobox1").on("change",function() {
alert();
$("#userName").val($(this).val());
});
});
Related
I started to work with thymeleaf in a basic project. When I want to display a message in the sign up page the th:text does not work. I used already th:text in other .html files and it works there but in the signUp.html doesn't.
Here is my controller where I set the message:
package com.teszt.thymeleaftest.controller;
#Controller
#RequestMapping("/login")
#AllArgsConstructor
public class MemberController {
MembersService membersService;
#GetMapping("/login")
public String showLoginPage(){
return "/login/login";
}
#GetMapping("/signUp")
public String showSignUpPage(Model theModel){
Members theMember = new Members();
theModel.addAttribute("member", theMember);
return "/login/signUp";
}
#PostMapping("/save")
public String saveMember(#ModelAttribute("member") Members theMember, ModelMap modelMap){
Members tempMember = membersService.findByEmail(theMember.getEmail());
if(tempMember != null){
modelMap.addAttribute("error", "Email is already exist!");
return "redirect:/login/signUp";
}else{
membersService.save(theMember);
//prevent duplication
return "redirect:/login/login";
}
}
}
Here is my signUp.html
<!DOCTYPE HTML>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<!-- Required meta tags -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-+0n0xVW2eSR5OomGNYDnhzAbDsOXxcvSN1TPprVMTNDbiYZCxYbOOl7+AMvyTG2x" crossorigin="anonymous">
<title>Signup</title>
</head>
<body>
<div class="container">
<h3>Signup</h3>
<hr>
<p class="h4 mb-4">Signup</p>
<form action="#" th:action="#{/login/save}" th:object="${member}" method="POST">
<input type="text" th:field="*{firstName}" class="form-control mb-4 col-4" placeholder="First name">
<input type="text" th:field="*{lastName}" class="form-control mb-4 col-4" placeholder="Last name">
<input type="text" th:field="*{email}" class="form-control mb-4 col-4" placeholder="Email">
<input type="password" th:field="*{password}" class="form-control mb-4 col-4" placeholder="Password">
<button type="submit" class="btn btn-info col-2">Save</button>
<p th:text="${error}" />
</form>
<br>
Do you have an account? <a th:href="#{/login/login}">Click here</a>
</div>
</body>
</html>
As I mentioned above this is the only html where the th:text does not works, everywhere else is good.
I hope somebody can help me!
When you use a redirect:, you lose all your model attributes (because it's loading a new page). You need to use a FlashAttribute instead. Like this:
#PostMapping("/save")
public String saveMember(#ModelAttribute("member") Members theMember, ModelMap modelMap, RedirectAttributes redirAttrs){
Members tempMember = membersService.findByEmail(theMember.getEmail());
if(tempMember != null){
redirAttrs.addFlashAttribute("error", "Email is already exist!");
return "redirect:/login/signUp";
}else{
membersService.save(theMember);
//prevent duplication
return "redirect:/login/login";
}
}
Im working in an assignment and I want to make a "add to cart button" I tried the post and get methods but it does nothing, the code consist of 4 files explore.html, explore.js, cart.html and cart.js and the users should be allowed to click on a link while exploring products and it will appear in the cart.html
explore.html
<html>
<head>
<title>Digital Waves::Explore</title>
<link rel="stylesheet" href="../css/explore.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="../js/explore.js"></script>
</head>
<body>
<div class="form-group">
<form action="/html/cart" method="POST">
<input name="quantity" type="hidden" value="1" />
<input name="product_id" type="hidden" value="91801160" />
<input name="product_name" type="hidden" value="Red Hat" />
<button class="add-button" type="submit">Add to Cart!</button>
</form>
</div>
</body>
</html>
explore.js
$(document).ready(function(){
$(".add-button").click(function(){
//alert("explore is clicked");
var productId = $("#productId").val();
var productName = $("#productName").val();
var productQuantity = $("#productQuantity").val();
var data = {
'product_id': productId,
'product_name': productName,
'quantity': productQuantity
};
$.post("html/cart", data, showDone);
var showDone = function() {
alert("I sent the data");
};
});
});
cart.html
<!DOCTYPE HTML>
<html>
<head>
<title>Digital Waves::Cart</title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script>
<script src="../js/cart.js"></script>
</head>
<body>
<button id="buttonx">I get info</button>
<p id="x"></p>
</body>
</html>
cart.js
$(document).ready(function(){
$("#buttonx").click(function(){
//alert("cart is clicked");
$.get("../html/explore.html",function(data , status){
$("x").html(data);
alert("done");
})
});
});
As per your HTML code, you have not assigned id attribute to your input fields. You need to use id field as below:
<div class="form-group">
<form action="/html/cart" method="POST">
<input id="quantity" name="quantity" type="hidden" value="1" />
<input id="product_id" name="product_id" type="hidden" value="91801160" />
<input id="product_name" name="product_name" type="hidden" value="Red Hat" />
<button class="add-button" type="submit">Add to Cart!</button>
</form>
</div>
After this, your jQuery code should work fine. And if you have multiple add cart form, then you should use class instead of id. Hope it helps you.
This is my code:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>Select Payment Method<BR><BR>
<font size=""><marquee behavior="alternate">PAYMENT GATEWAY</marquee></font>
<form action="S2ShowPay.jsp" method="post">
<input type="radio" value="NET BANKING" name="payment" >NET BANKING<br><br>
<input type="radio" value="DEBIT CARD PAYMENT" name="payment">DEBIT CARD<BR><br>
<input type="radio" value="CASH ON DELIVERY" name="payment" >CASH ON DELIVERY<br><br>
<input type="submit" value="NEXT"/>
</form>
</body>
</html>
I want to navigate to netbanking.jsp when I click on Net Banking radio button and Debit.jsp repectively, using only jsp and some javascript.
Please help.
Im not sure what's your expected result, Perhaps you can try this. Correct me if im wrong.
Using location.href
function fnPayment()
{
if(document.getElementById("a").checked ==true || document.getElementById("b").checked ==true)
{
location.href = "http://www.google.com"; //your jsp file
}
}
</script>
<input type="radio" value="NET BANKING" name="payment" id="a">NET BANKING<br><br>
<input type="radio" value="DEBIT CARD PAYMENT" name="payment" id="b">DEBIT CARD<BR><br>
<input type="radio" value="CASH ON DELIVERY" name="payment" id="c">CASH ON DELIVERY<br><br>
Using response redirect
Since you have created S2ShowPay.jsp, you can pass parameter to it once you clicked next button and put response redirect based on the parameter.
<input type="radio" value="NET" name="payment" >NET BANKING<br><br>
<input type="radio" value="DEBIT" name="payment">DEBIT CARD<BR><br>
<input type="radio" value="CASH" name="payment" >CASH ON DELIVERY<br><br>
S2ShowPay.jsp
String payment_ind = request.getParameter("payment");
if(payment_ind.equals("NET") || payment_ind.equals("DEBIT") )
{
response.sendRedirect("netbanking.jsp");
}
Add this code within head tag:
<script type="text/javascript">
function redirectPage(use,rname){
for (var val = 0, r1=use.elements; val < r1.length; val++)
if(r1[val].name==rname&&r1[val].checked)
use.action=r1[val].value;
}
</script>
Change your form tag like this:
<div>
<form action="#" method="post" onsubmit="redirectPage(this, 'r1');">
<input type="radio" name="r1" value="netbanking.jsp">NET BANKING<br><br>
<input type="radio" name="r1" value="Debit.jsp">DEBIT CARD<BR><br>
<input type="radio" name="r1" value="cashondelivery.jsp">CASH ON DELIVERY<br><br>
<input type="submit" value="Next"/>
</form>
</div>
Select the desired radio button and then clicking Next button will redirect to respective page.
This is the 1st page. I'm facing problem with the radio button value being NULL on the submission handling page.
<html>
<head>
<title>LoginForm</title>
</head>
<body >
<font size="20"><marquee behavior="alternate">Spice Digital</marquee></font>
<h1>Login Page</h1>
<h2>Signup Details</h2>
<form action="LoginCheck.jsp" method="post">
<br/>Username:<input type="text" name="username">
<br/>Password:<input type="password" name="password">
<br/>select your gender:
<select name=dropdown>
<option name=one value=one> Male </option>
<option name=two value=two> Female </option>
</select>
<br/>select your department:
<input type="radio" name=myradio value="1"/>MCA
<input type="radio" name=myradio value="2"/>B.Tech
<input type="radio" name=myradio value="3"/>Other
<br/> select your choices:
<input type="checkbox" name=mybox value="1"/>java
<input type="checkbox" name=mybox value="2"/>c++
<input type="checkbox" name=mybox value="3"/>c
<input type="checkbox" name=mybox value="4"/>sql
<br/>enter you comments here:
<textarea name=mytextarea cols=20 rows=5>
</textarea>
<br/><input type="submit" value="Login">
</form>
</body>
</html>
This is the 2nd page. I'm unable to get the selected value here. Am I using request.getParameter() wrong?.
<html>
<head>
<title>JSP Page</title>
</head>
<body BACKGROUND="C:\Documents and Settings\temp- 00940\workspace\login\WebContent\background.jpg">
<br/><br/><br/><br/><br/>
<form action="LoginForm.jsp" method="get">
<font size="20"><marquee>Spice Digital </marquee></font>
<h2>
<%
String a=session.getAttribute("username").toString();
out.println("Welcome "+a+"..!!");
%>
<br>
<%
String b=request.getParameter("myradio");
out.println("Your department is "+b);
%>
<br/>
<%
String c=request.getParameter("mybox");
out.println("Your choice is "+c);
%>
</h2>
<br/>
Click here to google search
<br/>
<br/><br/>
<br/><br/><br/>
LogOut
</form>
</body>
</html>
It is working fine with me on eclipse.
Modified the code a little for simplicity.
If not routing data to some other page then In in this you should have the name of your JSP file which your data should get displayed.
Here is the modified code.
index.jsp
<html>
<head>
<title>LoginForm</title>
</head>
<body >
<font size="20"><marquee behavior="alternate">Spice Digital</marquee></font>
<h1>Login Page</h1>
<h2>Signup Details</h2>
<form action="new.jsp" method="post">
<br/>Username:<input type="text" name="username">
<br/>Password:<input type="password" name="password">
<br/>select your gender:
<select name=dropdown>
<option name=one value=one> Male </option>
<option name=two value=two> Female </option>
</select>
<br/>select your department:
<input type="radio" name=myradio value="1"/>MCA
<input type="radio" name=myradio value="2"/>B.Tech
<input type="radio" name=myradio value="3"/>Other
<br/> select your choices:
<input type="checkbox" name=mybox value="1"/>java
<input type="checkbox" name=mybox value="2"/>c++
<input type="checkbox" name=mybox value="3"/>c
<input type="checkbox" name=mybox value="4"/>sql
<br/>enter you comments here:
<textarea name=mytextarea cols=20 rows=5>
</textarea>
<br/><input type="submit" value="Login">
</form>
</body>
</html>
new.jsp
<html>
<head>
<title>JSP Page</title>
</head>
<body BACKGROUND="C:\Documents and Settings\temp-00940\workspace\login\WebContent\background.jpg">
<br/><br/><br/><br/><br/>
<form action="LoginForm.jsp" method="get">
<font size="20"><marquee>Spice Digital </marquee></font>
<h2>
<%
// String a=session.getAttribute("username").toString();
// out.println("Welcome "+a+"..!!");
%>
<br>
<%
String b=request.getParameter("myradio");
out.println("Your department is "+b);
%>
<br/>
<%
String c=request.getParameter("mybox");
out.println("Your choice is "+c);
%>
</h2>
<br/>
Click here to google search
<br/>
<br/><br/>
<br/><br/><br/>
LogOut
</form>
</body>
</html>
problem could be with you routing as you are sending your form first to logincheck.jsp then to your desired jsp.
<html>
<head>
<title>Example</title>
</head>
<body>
<form name="form-name" action="LoginCheck.jsp" method="post">
<input type="radio" name="myradio" value="1" checked="checked"/>MCA
<input type="radio" name="myradio" value="2"/>B.Tech
<input type="radio" name="myradio" value="3"/>Other
<input name="goto" type="submit" value="Login">
</form>
</body>
</html
Fetching request values:
<%# page contentType="text/html; charset=iso-8859-1" language="java" %>
<%
String myRadio= request.getParameter("myradio");
%>
To determine which button is selected, use request.getParameter("myradio")
For values processing:
if ("1".equals(myRadio)) {
// processing here
}
i guess its because you have not specified the value for name attribute within quotes ,
Name is getting displayed because you have it inside quotes,
<br/>Username:<input type="text" name="username">
So try this,
select your gender:
<select name="dropdown">
<option name="one" value="one> Male </option>
<option name="two" value="two"> Female </option>
</select>
<br/>select your department:
<input type="radio" name="myradio" value="1"/>MCA
<input type="radio" name="myradio" value="2"/>B.Tech
<input type="radio" name="myradio" value="3"/>Other
<br/> select your choices:
<input type="checkbox" name="mybox" value="1"/>java
<input type="checkbox" name="mybox"value="2"/>c++
<input type="checkbox" name="mybox"value="3"/>c
<input type="checkbox" name="mybox"value="4"/>sql
<br/>enter you comments here:
<textarea name="mytextarea" cols=20 rows=5>
</textarea>
Hope it helps !!
My answer may be of use for others:
I will show it with an example for both radio and drop-down buttons as both are used to select a singular response from a list:
File: index.jsp
<form action="./StudentServlet" method="post">
<div class="form-label-group">
<label for="studentCourses">Student Course Group</label>
<select id="studentCourses" name="studentCourses">
<%for (int i = 1; i <= 6; i++) {%>
<option value= "1ITF<%=i%>">1ITF<%=i%></option>
<%}%>
</select>
</div>
<div class="form-label-group">
<label for="studentPreference">Preference at the moment:</label>
<%String[] chosenArray = {"APP", "BIT", "EMDEV", "INFRA", "ANDR"};
for (int j = 0; j < chosenArray.length; j++) {%>
<p><input type="radio" name="studentPreference" value="<%=chosenArray[j]%>" id="<%=chosenArray[j]%>"/>
<label for="<%=chosenArray[j]%>"><%=chosenArray[j]%></label>
</p>
<%}%>
<input type="submit" name="studentFormSubmit" id="studentFormSubmit">
</div>
</form>
File: StudentServlet.java
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
String studentCourse = request.getParameter("studentCourses");
String studentPreference = request.getParameter("studentPreference");
Student coursePreference= new Student(studentCourse, studentPreference);
if (request.getParameter("studentFormSubmit") != null) {
request.setAttribute("coursePreference", coursePreference);
request.getRequestDispatcher("DisplayResult.jsp").forward(request, response);
}
}
And in file DisplayResult.jsp
<h1>Course Details</h1>
<div>
<%
Student coursePreference= = (Student) request.getAttribute("coursePreference");
%>
<p>Student Course: <%=coursePreference.getStudentCourse()%></p>
<p>Student Preference: <%=coursePreference.getStudentPreference()%></p>
</div>
I would like to determine which link is being click, and set a request attribute accordingly; to be processed in the controller. The controller is generic. It will dispatch to another page according to the attribute set in the JSP. How can I achieve this?
EDIT:
I have followed the BalusC's advice where
Register
Login
RandomController :
#WebServlet(name = "RandomController", urlPatterns = {"/RandomController/*"})
public class RandomController extends HttpServlet {
protected void processRequest(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
int theRandom = 0;
Random myRandom = new Random();
RequestDispatcher dispatcher = null;
String pathInfo = request.getPathInfo();
String contextPath = request.getContextPath();
String dispatchesPath = contextPath + pathInfo;
System.out.println(pathInfo);
System.out.println(contextPath);
System.out.println(dispatchesPath);
theRandom = myRandom.nextInt(MAX_RANDOM);
request.setAttribute("random", theRandom);
if(pathInfo.equals("/Login")) {
dispatcher = request.getRequestDispatcher("Login.jsp");
dispatcher.forward(request, response);
}
else {
dispatcher = request.getRequestDispatcher("Register.jsp");
dispatcher.forward(request, response);
}
}
}
I have tried this approach but the Exception about maximum depth for nested request dispatchers : 20 is throw.
The generic controller is RandomController which servers two produces random number and set as attribute in request object and sent it to login or register page.
Login.jsp :
<%--
Document : Register
Created on : May 28, 2011, 5:49:35 PM
Author : nicholas_tse
--%>
<%#page contentType="text/html" pageEncoding="UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Online Store Register Page</title>
<link rel="stylesheet" href="style.css" type="text/css" media="screen" />
</head>
<body>
<jsp:useBean id="randomBean" class="Helper.RandomInt"
scope="request">
</jsp:useBean>
<h1>Online Store</h1>
<p></p>
<div align="right">
<h3>
<c:if test="${not empty sessionScope.username}">
! Welcome ${sessionScope["username"]} !
<form action="LogoutController" method="POST">
<input type="submit" name="submit" value="Logout"/>
</form>
</c:if>
</h3>
</div>
<ul id="nav_list">
<li>Home</li>
<li>Product</li>
<li>Add Stock</li>
<li>Shopping Cart</li>
<li>Order Status</li>
<li>Register</li>
<li>Login</li>
</ul>
<br></br>
<p></p>
<c:if test="${!not empty sessionScope.username}">
<div id="registerForm" align="center"
style="border:1px solid black; width:760px" >
<form name="RegisterForm" action="RegisterController"
method="POST">
<p>
Username : <input type="text" id="username" name="username">
<c:if test="${message.msg} != null" >
${message.msg}
</c:if>
</p>
<p>
Password : <input type="password" id="password" name="password"
</p>
<p>
Name : <input type="text" id="name" name="name">
<c:if test="${message.msg} != null" >
${message.msg}
</c:if>
</p>
<p>
Address : <input type="text" id="address" name="address">
<c:if test="${message.msg} != null" >
${message.msg}
</c:if>
</p>
<p>
State :
<select>
<option>Selangor</option>
<option>Kuala Lumpur</option>
<option>Cyberjaya</option>
<option>Putrajaya</option>
</select>
</p>
<p></p>
<input type="submit" name="submit" value="Register">
<input type="reset" name="clear" value="Clear">
<p></p>
</form>
</div>
</c:if>
</body>
</html>
Without further info the only suggestion I can think of is to add a querystring to your URLs. Like this:
Page 1
This way you can look at the actiuon parameter in the request to determine what to do in your controller.
You can add a request parameter. This can be done in 2 ways depending on whether your form has a method of POST or GET.
You have implemented the submit buttons in the forms with a name attribute of submit and different value attributes. This should mean that the requests will include a submit parameter in the query string or the POST form data. On the server side, you can use this to figure out which of the submit buttons was clicked.