Thymeleaf - Conditional Attributes only showing for a split second in html - html

i am working on a spring web application. i tried to write a function that checks whether if the entered password is correct.
this is the code from my controller:
#RequestMapping(value = "/login", method = RequestMethod.POST)
public ModelAndView loginUser(#ModelAttribute User user) throws FileNotFoundException {
if (patient.getPasswort().equals(patient.getPasswortConfirm())) {
Service.login(user);
ModelAndView modelAndView = new ModelAndView("mainpage");
modelAndView.addObject("user", user);
return modelAndView;
} else {
ModelAndView modelAndView = new ModelAndView("login");
modelAndView.addObject("wrongpw", true);
return modelAndView;
}
}
this is the code from the html page:
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml"
xmlns:th="http://www.thymeleaf.org">
<head>
<link rel="shortcut icon" type="image/ico" href="image/favicon.ico" />
<meta charset="utf-8" />
<link rel="stylesheet" href="css/main.css" />
<script src="lib/jquery-2.1.4.js"></script>
</head>
<body>
<div id="menuebg"></div>
<p th:if="${wrongpw}"><font color="red">Password is wrong</font></p>
<div id="menue">
<form action="01erstellen" method="post" th:object="${patient}">
<table border="0px">
<tr height="20px">
<td>Name: <input th:field="*{nachname}" onchange="nameLive();" type="text" id="txtName" value="" />
</td>
</tr>
<tr height="20px">
<td>Vorname: <input th:field="*{vorname}" onchange="vornameLive();" type="text" id="txtVorname" value="" />
</td>
</tr>
<tr height="20px">
<td>Email: <input th:field="*{email}" type="text" />
</td>
</tr>
<tr height="20px">
<td><label for="gebdat"> Geburtsdatum: <input th:field="*{geburtstag}" type="date" id="gebdat" />
</label></td>
</tr>
<tr height="20px">
<td><label for="passwd">Passwort: <input th:field="*{passwort}" type="password" id="passwd" size="20" maxlength="40" />
</label></td>
</tr>
<tr height="20px">
<td><label for="passwd-confirm">Wiederholen: <input th:field="*{passwortConfirm}"
type="password" id="passwd-confirm" size="20" maxlength="40" />
</label></td>
</tr>
<tr height="20px">
<td></td>
</tr>
<tr height="20px">
<td>
<br/>
<input id="btn-send" type="submit" value="Finish" />
</td>
</tr>
<tr height="20px">
<td></td>
</tr>
</table>
</form>
</div>
</body>
</html>
my problem is that if i type in a wrong password the text only shows for a split second an then disappears.
can someone help me?
thank you!

Related

How to get table content on display after submit

I'm just begin to study HTML for school.
Now I have to build a simple website with a form.
I did it in table-format.
The problem is that I need to show the input of the table on my display after using the submit-button.
I searched over 4 hours but did not find any solution.
Can someone help me with it?
Below my html-code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>Salsa</title>
<link href="index.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>Salsa Events</h1>
<p>Submit for your newsletter.<br>
</p>
<form action="" method="get">
<center><table border="2">
<tr>
<td>First name</td>
<td><input type="text" name="first name" required></td>
</tr>
<tr>
<td>Family name</td>
<td><input type="text" name="family name" required></td>
</tr>
<tr>
<td>E-mail</td>
<td><input type="email" name="e-mail" required></td>
</tr>
<tr>
<td>Date of birth</td>
<td><input type="date" name="date of birth" required></td>
</tr>
<tr>
<td>Recieve newsletter</td>
<td><input type="checkbox" name="is_checkbox" checked></td>
</tr>
<tr>
<td colspan="2"><input type="submit" value="Send"> </td>
</tr>
</table></center>
</form>
</body>
</html>

Display the Output in the same textbox in visual studio

When i am giving the details, it will print in the new text box whatever values i am assigning, but i want to print the same values which i am giving in the textbox itself. I am using [httppost] and [httpGet] commands for this.
in View page i have this code :
#{
ViewBag.Title = "LoginPage";
}
<h1>LoginPage</h1>
<form method="post" action="/Home/LoginPage" >
<table>
<tr>
<td>First Name : </td>
<td><input type="text" id="txt.Fname" name="F_FIRSTNAME" class="form-control"/> </td>
</tr>
<tr>
<td> Last Name : </td>
<td><input type="text" id="txt_LNAME" name="L_LastName" class="form-control"/></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" id="txt_Password" name="P_PASSWORD" class="form-control" /> </td>
</tr>
<tr>
<td>Email ID : </td>
<td><input type="email" id="txt_emailid" name="E_EmailID" class="form-control" /> </td>
</tr>
<tr>
<td><input type="submit" id="txt_Enter" name="Enter" class="btn-primary" /></td>
</tr>
</table>
</form>
#{
if(IsPost==true)
{
string name1 = Request["F_FIRSTNAME"];
if(!string.IsNullOrEmpty(name1))
{
<h2 style=" color:aquamarine;" > <input type="text" value="#name1" /> </h2>
}
string name2 = Request["L_LASTNAME"];
if (!string.IsNullOrEmpty(name2))
{
<h2 style="color:blue;"> <input type="text" value="#name2" /> </h2>
}
string name3 = Request["P_PASSWORD"];
if (!string.IsNullOrEmpty(name3))
{
<h2 style="color:blue;"> <input type="text" value="#name3" /> </h2>
}
string name4 = Request["E_EMAILID"];
if (!string.IsNullOrEmpty(name4))
{
<h2 style="color:blue;"> <input type="text" value="#name4" /></h2>
}
else
{
<h5>This is a get request </h5>
}
}
}
and in controller:
using System;
using System.Collections.Generic;
using System.Linq;
using System.Web;
using System.Web.Mvc;
namespace WebApplication3.Controllers
{
public class HomeController : Controller
{
// GET: Home
public ActionResult Index()
{
return View();
}
public ActionResult LoginPage()
{
return View();
}
[HttpPost]
public ActionResult AfterLoginPage(string F_FIRSTNAME, stringL_LASTNAME, string P_PASSWORD, string E_EMAILID)
{
return View("LoginPage");
}
}
}
[As you can see the credentials are displaying in separate text box which i created but i want to display it on the same text box ][enter image description here]1
Simply you can change your form and replace the code below:
<form method="post" action="/Home/LoginPage">
<table>
<tr>
<td>First Name : </td>
<td><input type="text" id="txt.Fname" name="F_FIRSTNAME" class="form-control" value="#(IsPost ? Request["F_FIRSTNAME"]:"")" /> </td>
</tr>
<tr>
<td> Last Name : </td>
<td><input type="text" id="txt_LNAME" name="L_LastName" class="form-control" value="#(IsPost ? Request["L_LastName"]:"")" /></td>
</tr>
<tr>
<td>Password: </td>
<td><input type="password" id="txt_Password" name="P_PASSWORD" class="form-control" value="#(IsPost ? Request["P_PASSWORD"]:"")"/> </td>
</tr>
<tr>
<td>Email ID : </td>
<td><input type="email" id="txt_emailid" name="E_EmailID" class="form-control" value="#(IsPost ? Request["E_EmailID"]:"")"/> </td>
</tr>
<tr>
<td><input type="submit" id="txt_Enter" name="Enter" class="btn-primary" /></td>
</tr>
</table>
</form>
And you can remove the rest of View code. I haven't tested it but I guess it works, although it's not the proper solution. It's better to have a separate Model or ViewModel for that.

'Required' attribute not working [duplicate]

This question already has answers here:
HTML5 required attribute not working
(2 answers)
Closed last month.
I recently created a web page for me to learn more about HTML, and I found the 'required' attribute. I added it to the fields, but it didn't do anything.
Can anyone tell me my mistake for 'required' attribute?
I want it to say "Please fill this field" when the field is empty
<html>
<head>
<link href="icon.ico" rel="icon">
<title>Log In</title>
</head>
<body>
<h1 align="center">Welcome to site</h1>
<hr width="50%"/>
<br/>
<table align="center">
<form>
<tr>
<td>Log In : </td>
<td><input type="text" name="LogInEmail" placeholder="Enter your email" required></td> </tr><tr>
<td>Password : </td>
<td><input type="password" name="password" placeholder="Password" required></td>
</tr>
</form>
</table>
<br/>
<table align="center">
<form>
<tr>
<td><input type="submit" value=" Log In "/></td>
</tr>
</form>
</table>
</body>
</html>
Please make sure you have submit inside the first form.
You have multiple forms. Hence required is not working.
<html>
<head>
<link href="icon.ico" rel="icon">
<title>Log In</title>
</head>
<body>
<h1 align="center">Welcome to site</h1>
<hr width="50%" />
<br/>
<table align="center">
<form id="form1" runat="server">
<tr>
<td>Log In : </td>
<td>
<input type="text" name="LogInEmail" placeholder="Enter your email" required>
</td>
</tr>
<tr>
<td>Password : </td>
<td>
<input type="password" name="password" placeholder="Password" required>
</td>
</tr>
<tr>
<td>
<input type="submit" value=" Log In " />
</td>
</tr>
</form>
</table>
</body>
</html>
But if you insist in having multiple tables and forms, before submit, you can validate the first form. If I am not wrong, you are trying have a better UI placement which can be dealt with CSS instead of multiple Forms and tables.
You took two form.You should place your submit button in the same form input require field exist.Be Careful with form.

How do I make a checkbox inside a table enable or disable text inputs in the same table?

Only in Html for JSP and servlets. I have two checkbox there with two options "Yes" and "No". If, 'yes' enable all text inputs below it. if 'no' disable. This is my JSP:
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<link rel="stylesheet" type="text/css" href="RegiPageDesign.css">
<title>Registration Page</title>
</head>
<body>
<div><h1>Please Provide the Following Details:</h1></div>
<form action="Servlet1" method="POST">
<table border="0">
<tbody>
<tr>
<td style="color: black">Vehicle Owners Name:</td>
<td><input type="text" name="vowner" value="" size="20" placeholder="e.g John Van Wyk"/></td>
</tr>
<tr>
<td style="color: black">Vehicle Drivers Name:</td>
<td><input type="text" name="vdriver" value="" size="20" placeholder="e.g Matheus Malima" /></td>
</tr>
<tr>
<td style="color: black">Vehicle Registration Number:</td>
<td><input type="text" name="vreginumber" value="" size="20" placeholder="e.g N 168-1258 W" /></td>
</tr>
<tr>
<td style="color: black">NABTA ID:</td>
<td><input type="text" name="nabtaId" value="" size="20" placeholder="e.g NABTA685" /></td>
</tr>
<tr>
<td style="color: black">Vehicle Type:</td>
<td><select name="vtype">
<option>Bus</option>
<option>Minibus</option>
<option>Taxi</option>
</select></td>
</tr>
<tr>
<td style="color: black">Vehicle Model:</td>
<td><input type="text" name="vmodel" value="" size="10" placeholder="e.g 2010" /></td>
</tr>
<tr>
<td style="color: black">Vehicle Mass:</td>
<td><input type="text" name="vmass" value="" placeholder="e.g 1.3 Tons" /></td>
</tr>
<tr>
<td style="color: black">Vehicle Color:</td>
<td><select name="colors">
<option>White</option>
<option>Silver</option>
<option>Red</option>
<option>Black</option>
<option>Blue</option>
</select></td>
</tr>
<tr>
<td style="color: black"> Was the vehicle in an Accident: </td>
<td>
<input type="checkbox" name="boo" value="" />Yes<br>
<input type="checkbox" name="boo" value="" />No<br>
</td>
</tr>
<tr>
<td style="color: black">How Many Times: </td>
<td><input type="text" name="number" value="" placeholder="Number(s)"/></td>
</tr>
<tr>
<td style="color: black">Cause of Accidents:</td>
<td><input type="text" name="vaccident" value="" placeholder="e.g Drunk Driving" /></td>
</tr>
<tr>
<td style="color: black">Date and Place of Accident:</td>
<div2><td><input type="date" name="adate" value="" placeholder="DD-MM-YY" /></div2>
<input type="text" name="regions" value="" placeholder="e.g Windhoek, Rehoboth" />
</td>
</tr>
</tbody>
</table>
<p style="text-align: center;"> <input type="reset" value="Clear" />
<input type="submit" value="Next" /></p>
<input type="button" value="Back" name="back"/>
</body>
</form>
</html>
It can be easily done by jQuery(Add this library to your header part), check the following script.
$('input[name=boo]').change(function(){
if(this.value=="yes"){
$(".accident").prop('disabled', false);
} else {
$(".accident").prop('disabled', true);
}
});
I assume that yes or no should be radio, since both cannot happen at the time ;) . See the live demo of working copy. Hope it helps.
Ok, this solution is do based on your title.
add javascript before <body>
<head>
<script language="Javascript">
function change()
{
var element = document.getElementById('textfieldID'); //depend which text field you wanted to disabled then add ID attribute for that textfield
var array = [];
while(element)
{
array.push(element);
element.id = 'textfieldID' + '-processed';
element = document.getElementById('textfieldID');
}
for(var i = 0; i < array.length; i++)
{
array[i].id = 'textfieldID';
if(document.mainform.boo.checked == true)
array[i].disabled=true;
else
array[i].disabled=false;
}
}
</script>
</head>
add onchange function for your checkbox
<tr>
<td style="color: black"> Was the vehicle in an Accident: </td>
<td>
<input type="checkbox" name="boo" value="" onchange="change();/>Yes<br>
<input type="checkbox" name="boo" value="" onchange="change();/>No<br>
</td>
</tr>
if you wanted to disabled all your input textfields when checkbox is checked. Then add all the same ID="" attribute in your input textfields. Hope it helps

Please find problem in my html <form> tag

Hi? I'm a university student of Korea,
and this semester I'm studying internet programming.
I made html, and I made tag.
However I think that there is problem in my tag.
In fact I hardly effort to find problem, but I cannot find that.
Experts!!!Please find the problem!!!!
This is my form tag.
<html>
<head></head>
<body>
<form name="firstForm" action="http://kisschks.hosting.paran.com/noname2.php">
<table width=500 border=1>
<tr>
<td width=100>이름</td>
<td><input name="name" type="text" size="15"></td>
</tr>
<tr>
<td>비밀번호</td>
<td><input type="password" name="password" size="20" maxlength="15"></td>
</tr>
<tr>
<td>학번</td>
<td><input type="text" name="schoolnum" size="21"></td>
</tr>
<tr>
<td>전화번호</td>
<td><select name="fst">
<option value="010" selected>010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="017">017</option>
<option value="018">018</option>
<option value="019">019</option>
</select> - <input name="sec" type="text" size="4" maxlength="4"> - <input name="trd" type="text" size="4" maxlength="4">
</td>
</tr>
<tr>
<td>캠퍼스</td>
<td>
<input type="radio" name="campus" value="명륜">명륜
<input type="radio" name="campus" value="율전" checked>율전
</td>
</tr>
<tr>
<td>학년</td>
<td>
<input type="checkbox" name="year" value="1학년" checked>1학년
<input type="checkbox" name="year" value="2학년">2학년
<input type="checkbox" name="year" value="3학년">3학년
<input type="checkbox" name="year" value="4학년">4학년
<input type="checkbox" name="year" value="휴학">휴학
</td>
</tr>
<tr>
<td>고향</td>
<td><textarea name="고향" rows=3 cols=20>
</textarea>
</td>
</tr>
<tr>
<td>하고픈말</td>
<td><textarea name="intro" rows=3 cols=20></textarea></td>
</tr>
<tr>
<td colspan=2 align="center">
<input type="button" value="안씁니다" disabled>
<input type="reset" value="다시작성">
<input type="submit" value="등록">
</td>
</tr>
</table>
</form>
</body>
</html>
You have not mentioned your problem exactly but I do find charset meta missing for the Korean language you are using on the form:
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
Interesting Resources:
What Beautiful HTML Code Looks Like
Fix Your Site With the Right DOCTYPE!
One thing that might be relevant is that you haven't specified either method="POST" or method="GET" in your form tag. Though if you're using $_REQUEST in your php it shouldn't matter either way.
Well, you didn't say what your code was doing wrong or what you expected but didn't get... but...
Go to:
http://validator.w3.org/#validate_by_input
and paste your code in there. It turns out the <head> element cannot be empty. Don't just take my revision below, you really should read the output of the Validator to understand what kind of changes needed to be made in order to achieve valid HTML.
Here is valid code that should work:
<!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" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>
hello
</title>
</head>
<body>
<form id="firstForm" action="http://kisschks.hosting.paran.com/noname2.php">
<table width="500" border="1">
<tr>
<td width="100">
이름
</td>
<td>
<input name="name" type="text" size="15" />
</td>
</tr>
<tr>
<td>
비밀번호
</td>
<td>
<input type="password" name="password" size="20" maxlength="15" />
</td>
</tr>
<tr>
<td>
학번
</td>
<td>
<input type="text" name="schoolnum" size="21" />
</td>
</tr>
<tr>
<td>
전화번호
</td>
<td>
<select name="fst">
<option value="010" selected="selected">
010
</option>
<option value="011">
011
</option>
<option value="016">
016
</option>
<option value="017">
017
</option>
<option value="018">
018
</option>
<option value="019">
019
</option>
</select> - <input name="sec" type="text" size="4" maxlength="4" />- <input name="trd" type="text" size="4" maxlength="4" />
</td>
</tr>
<tr>
<td>
캠퍼스
</td>
<td>
<input type="radio" name="campus" value="명륜" />명륜 <input type="radio" name="campus" value="율전" checked="checked" />율전
</td>
</tr>
<tr>
<td>
학년
</td>
<td>
<input type="checkbox" name="year" value="1학년" checked="checked" />1학년 <input type="checkbox" name="year" value="2학년" />2학년 <input type="checkbox" name="year" value="3학년" />3학년 <input type="checkbox" name="year" value="4학년" />4학년 <input type="checkbox" name="year" value="휴학" />휴학
</td>
</tr>
<tr>
<td>
고향
</td>
<td>
<textarea name="고향" rows="3" cols="20">
</textarea>
</td>
</tr>
<tr>
<td>
하고픈말
</td>
<td>
<textarea name="intro" rows="3" cols="20">
</textarea>
</td>
</tr>
<tr>
<td colspan="2" align="center">
<input type="button" value="안씁니다" disabled="disabled" /><input type="reset" value="다시작성" /><input type="submit" value="등록" />
</td>
</tr>
</table>
</form>
<p>
html form ta
</p>
</body>
</html>
Note that in the <html> tag, it specifies English as the language. I suspect that is not the correct language, but you can fix that yourself once you get everything else working.
Good luck with your studies.