I have a search page which has various search criteria options including a checkbox.
I want to retain the state of the search criteria so that the person who use the application know what they search for.
I am using <input type="text" name="foo" value="${param.foo}"> for the text boxes, but I have no idea how to go about for checkbox.
I would appreciate your help.
I tried with the JSTL tag library like this,
See the <c:if>
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<html>
<head>
<title>Employee Search</title>
</head>
<body>
<font size="+1"> Search </font>
<form action="search.jsp" method="GET">
<table>
<tr>
<td align="right">Name:</td>
<td><input type="text" name="name" value="${param.name}" /></td>
</tr>
<tr>
<td align="right">Location:</td>
<td><input type="checkbox" name="location" value="france"
<c:if test="${param.location != null && param.location=='france' }">
checked='checked'
</c:if>>france<br>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" /></td>
</tr>
</table>
</form>
</body>
</html>
Note: Do not forget to place jstl.jar in WEB-INF/lib . you can download from here
Now, If you do not want to use the JSTL tag [I think that is one you are looking for], you can do like this,
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<html>
<head>
<title>Employee Search</title>
</head>
<body>
<font size="+1"> Search</font>
<form action="search.jsp" method="GET">
<table>
<tr>
<td align="right">Name:</td>
<td><input type="text" name="name" value="${param.name}" /></td>
</tr>
<tr>
<td align="right">Location:</td>
<td><input type="checkbox" name="location" value="france"
${param.location=='france' ? 'checked=checked' : ''}
>france<br>
</td>
</tr>
<tr>
<td></td>
<td><input type="submit" /></td>
</tr>
</table>
</form>
</body>
</html>
Hope this helps. Please let me know.
Related
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>
i am trying to delete row when click on confirm link,alert is first time when click on delete link but second time alert not coming...
value getting deleted without alert
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib prefix="form" uri="http://www.springframework.org/tags/form"%>
<!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>SRK Pvt Ltd.</title>
</head>
<body>
<form:form method="get" action="">
<%-- <h1>${message}</h1>
Enter Name: <input id="tagsName"> --%>
Autocomplete
<center>
Dear <strong>${user}</strong>, Welcome to DBA Page. Logout
<div style="color: teal; font-size: 30px">SRK Pvt Ltd.</div>
<c:if test="${!empty employeeList}">
<script>
function ConfirmDelete() {
var x = confirm("Are you sure you want to delete?");
if (x)
return true;
else
return false;
}
</script>
<table border="1" bgcolor="black" width="600px">
<tr
style="background-color: teal; color: white; text-align: center;"
height="40px">
<td>First Name</td>
<td>Last Name</td>
<td>Email</td>
<td>Phone</td>
<td>Edit</td>
<td>Delete</td>
</tr>
<c:forEach items="${employeeList}" var="user">
<tr
style="background-color: white; color: black; text-align: center;"
height="30px">
<td><c:out value="${user.firstName}" /></td>
<td><c:out value="${user.lastName}" /></td>
<td><c:out value="${user.email}" /></td>
<td><c:out value="${user.phone}" /></td>
<td>Edit</td>
<td><a href="delete?id=${user.id}"
Onclick="return ConfirmDelete();">Delete</a></td>
</tr>
</c:forEach>
</table>
</c:if>
Click Here to add new User
</center>
</form:form>
</body>
</html>
second time alert box not showing value getting deleted directly when click on delete link
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.
In this table, when I check the radio button (present) on the 1st row and when I go and check again the present on the 2nd row, the first row present in getting unchecked automatically. And all the radiobutton gets checked. This is just a sample for two students.
<%# 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>
<title>HTML Tables</title>
</head>
<body>
<%# page import="java.sql.*"%>
<table bgcolor="lightgray" border="5" width="60%" cellpadding="5" cellspacing="0.5" color="blue" >
<tr>
<th colspan ="3" bgcolor="#999999"><br>
<div align="Center" > <font face="verdana" size="5" color="white"> ATTENDANCE </font>
</div>
</th>
</tr>
<tr>
<td width="14%"><h3>Register No</td>
<td><h3> Student Name</td>
<td><h3> Attendance</td>
</tr>
<tr>
<td> 1 </td>
<td> <input type="radio" >Present <input type="radio">Absent
<tr>
<td>2</td>
<td> <input type="radio" >Present <input type="radio">Absent
</tr>
<%
Connection dbcon=null;
DriverManager.registerDriver(new oracle.jdbc.driver.OracleDriver());
dbcon=DriverManager.getConnection("jdbc:oracle:thin:#localhost:1521:orcl","scott","tiger");
Statement stmt=dbcon.createStatement();
ResultSet rst=null;
rst=stmt.executeQuery("select * from studenttables");
while(rst.next())
{%>
<tr>
<td><%=rst.getString("name")%></td>
</tr>
<tr>
<td><%=rst.getString("name")%></td>
</tr>
<tr>
<td><%=1%></td>
<td><%=rst.getString("name")%></td>
<td><input type="radio" >Present <input type="radio">Absent
</tr>
<% } %>
</table>
</body>
</html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Insert title here</title>
</head>
<body>
</body>
</html>
Set a name and make a group of radio buttons like
() - name="rdg1" and id="Present"
() - name="rdg1" and id="Absent"
and
() - name="rdg2" and id="Present2"
() - name="rdg2" and id="Absent2"
if the rdg1 - Present is checked and you click to check the rdg1 - Absent the check box 1 will clear, same to second group.
I am making the control shown in the image. It has a title bar and a set of controls inside it. What would be the best way to build it? It is part of a HTML5 webpage.
http://tinypic.com/r/25rpk4o/6
One way is to draw the title bar with canvas rect and then place all the controls under it. The collapsing can be done with javascript. But there must be a better way.
Another way I thought of was to make a table and have the first row as the title bar and add the sub-controls in the 2nd row. It seems to work fine but VS2012 keeps telling me that I can't nest button inside a tr.
This question or similar was asked on stackoverflow here...
What are my alternatives to modal or modeless dialogs to display information and contact forms?
Maybe the last thread on that post can give you some examples??
The direct link to the external examples is
http://websemantics.co.uk/resources/accessible_css3_modal_pop-ups/
Okay Sorry I misunderstood your initial meaning.
Well you can have a look at the below two files, one is a web page and the other is user control, the user control Copy and paste the code into two new files and see what you think?
I tried to recreate the control from your original pic that you uploaded and have used a TABLE tag, although you can probably cut down the html code by using DIVS instead.
File 1
<%# Page Language="VB" %>
<%# Register src="MyInlineWindow.ascx" tagname="MyInlineWindow" tagprefix="uc1" %>
<!-- HTML5 -->
<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<title></title>
<script type="text/vbscript">
Sub ShowInlineWindow()
dim el
set el = window.document.getElementById("MyInlineWindowCtrl")
window.document.getElementById("Result").innerhtml = "Nothing"
el.style.display = "block"
End Sub
Sub HideInlineWindow(YesNo)
dim el
set el = window.document.getElementById("MyInlineWindowCtrl")
window.document.getElementById("Result").innerhtml = YesNo
el.style.display = "none"
End Sub
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<input id="Button1" type="button" value="Interact" onclick="ShowInlineWindow()" /><br />[<label id="Result">Nothing</label>]
<br /><br /><br /><br />
<uc1:MyInlineWindow ID="MyInlineWindow1" runat="server" />
</div>
</form>
</body>
</html>
File 2
<%# Control Language="VB" ClassName="MyInlineWindow" %>
<table id="MyInlineWindowCtrl" style="display: none; border: 1px solid #333333; width: 640px;">
<tr>
<td colspan="4" style="border-bottom-style: solid; border-bottom-width: 1px; background-color: #808080; color: #FFFFFF;">Window Title</td>
</tr><tr>
<td style="width: 25%;">
<table style="margin 8px: width: 100%;">
<tr>
<td>Label</td>
</tr><tr>
<td>
<select id="Select1" name="D1">
<option>Some drop down</option>
</select>
</td>
</tr><tr>
<td> </td>
</tr><tr>
<td>Label</td>
</tr><tr>
<td>
<select id="Select2" name="D2">
<option>Some drop down</option>
</select>
</td>
</tr>
</table>
</td>
<td style="width: 25%;">
<table style="margin 8px: width: 100%;">
<tr>
<td>Label</td>
</tr><tr>
<td><input id="Radio1" checked="true" name="R1" type="radio" value="V1" /> Label</td>
</tr><tr>
<td><input id="Radio2" checked="true" name="R2" type="radio" value="V1" /> Label</td>
</tr><tr>
<td><input id="Radio3" checked="true" name="R3" type="radio" value="V1" /> Label</td>
</tr><tr>
<td><input id="Radio4" checked="true" name="R4" type="radio" value="V1" /> Label</td>
</tr>
</table>
</td>
<td style="width: 25%;">
<table style="margin 8px: width: 100%;">
<tr>
<td colspan="2">Label</td>
</tr><tr>
<td>From</td>
<td>To</td>
</tr><tr>
<td>
<select id="Select3" name="D3">
<option>Date Picker</option>
</select>
</td>
<td>
<select id="Select4" name="D4">
<option>Date Picker</option>
</select>
</td>
</tr><tr>
<td> </td>
<td> </td>
</tr><tr>
<td><input id="Radio5" checked="true" name="R5" type="radio" value="V1" /> Label</td>
<td><input id="Radio6" checked="true" name="R6" type="radio" value="V1" /> Label</td>
</tr>
</table>
</td>
<td style="width: 25%;">
<table style="margin 8px: width: 100%;">
<tr>
<td> </td>
</tr><tr>
<td> </td>
</tr><tr>
<td> </td>
</tr><tr>
<td> </td>
</tr><tr>
<td style="text-align: center">
<input id="Button1" type="button" value="Cancel" onclick="HideInlineWindow('Cancel')" />
<input id="Button2" type="button" value="Okay" onclick="HideInlineWindow('Okay')" />
</td>
</tr>
</table>
</td>
</tr>
</table>
Maybe it is closer to what you want.
Also I have used VB script as thats what i know best, but it should not be too difficult to port/transpose it into Javascript.