I have this form used to insert data into a database.
I want to change one value selecting from a dropdownlist connected to a mysql database.
This is the form:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<html>
<body>
<div id="container">
<form onsubmit="return checkempty(form1)" action="Data_insert.jsp" method="post" name="form1">
<table id="table" width="25%">
<tr>
<td><label for="emp_name">Name: </label></td>
<td><input type="text" name="emp_name" id="emp_name"></td>
</tr>
<tr>
<td><label for="emp_country">Country: </label></td>
<td><input type="text" name="emp_country" id="emp_country"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="button" id="button" value="Add"></td>
</tr>
</table>
<p><br>
</p>
</form>
</div>
</body>
</html>
But to fill the country I want to use a jsp getting the data from Mysql DB with a jsp code:
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<!DOCTYPE html>
<%# page import="java.sql.*" %>
<%ResultSet resultset =null;%>
<HTML>
<%
try{
Class.forName("com.mysql.jdbc.Driver").newInstance();
Connection connection = DriverManager.getConnection("jdbc:mysql://localhost:3306/db","root","1234");
Statement statement = connection.createStatement() ;
resultset =statement.executeQuery("select country_id, country_name from country") ;
%>
<center>
<h1> Drop down box or select element</h1>
<select>
<option value="0">Select Country</option>
<% while(resultset.next()){ %>
<option value="<%=resultset.getInt("country_id")%>"> <%= resultset.getString("country_name")%></option>
<% } %>
</select>
</center>
<%
//**Should I input the codes here?**
}
catch(Exception e)
{
out.println("wrong entry"+e);
}
%>
</BODY>
</HTML>
Both codes work independent. My question is how can I integrate the Country dropdown list into the form.
Thanks !
You can achieve above in following ways :
1) . Put all your code in same page and use jquery/js to assign value of <select> to your <input..> like below :
//onchange of select this will execute
$("select").on("change", function() {
//getting value of select-box
var value = $(this).val();
//assign value to input with id="emp_country"
$("#emp_country").val(value);
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.0/jquery.min.js"></script>
<!-- put your db connection code here-->
Select-box:
<select>
<option value="0">Select Country</option>
<!--put your option code here-->
<option value="something">Something</option>
</select>
<!--put catch block here-->
<form onsubmit="return checkempty(form1)" action="Data_insert.jsp" method="post" name="form1">
<table id="table" width="25%">
<tr>
<td><label for="emp_name">Name: </label></td>
<td><input type="text" name="emp_name" id="emp_name"></td>
</tr>
<tr>
<td><label for="emp_country">Country: </label></td>
<td><input type="text" name="emp_country" id="emp_country"></td>
</tr>
<tr>
<td colspan="2" align="center"><input type="submit" name="button" id="button" value="Add"></td>
</tr>
</table>
<p><br>
</p>
</form>
2).In CountryDropdown.jsp put your select-box inside <form></form> with a submit button like below :
<form method="post" action="Yourformpagename">
<%
<!--connection code->
%>
<center>
<h1> Drop down box or select element</h1>
<select name="country">
<option value="0">Select Country</option>
<% while(resultset.next()){ %>
<option value="<%=resultset.getInt(" country_id ")%>">
<%= resultset.getString("country_name")%>
</option>
<% } %>
</select>
</center>
<%
<!--catch block code here-->
%>
<input type="submit" value="SEND" />
</form>
And then get it in your form page like below:
<input type="text" name="emp_country" id="emp_country" value="${param.country}"/>
Related
I have to pass the value entered in my text box to a controller class on click of submit buttton. I do not want to use Form or I do not have a model class for this field. How it can be achieved?
Below is the sample code for your reference
<table style="width:100%;">
<tr>
<td style="text-align:center;font-weight:bold;width:95%;">My header</td>
<td>
<select>
<option value="Choose">Select</option>
<option value="val1">val1</option>
<option value="val2">val2</option>
<option value="val3">val3</option>
</select>
</td>
<td>
<input type ="text" id="searchField" name="searchFieldText">
</td>
<td>
<input type="submit" style="color:black;background-color:rgb(216, 214, 208)" value="Search" onclick="location.href='#Url.Action("ExecuteSearch", "MyController",new { <!--I want to pass the textbox value as param here-->})'" />
</td>
<td style="text-align:right;width:10%;">#Html.ActionLink("LOGOUT", "logout")</td>
</tr>
</table>
Thanks in advance!!!
There are various options to achieve the same. You can take help of Jquery like this:
<a href='#url.action("LOGOUT","logout")?someParameter=$('#searchField').val()' >Text for Link Name</a>
On controller level you have to add string parameter to the logout method. Like:
Public ActionResult Logout(string someParameter)
{
//your code
}
Using AJAX
Below code snippet will work using ajax call
<div class="row">
<table style="width:100%;">
<tr>
<td style="text-align:center;font-weight:bold;width:95%;">My header</td>
<td>
<select>
<option value="Choose">Select</option>
<option value="val1">val1</option>
<option value="val2">val2</option>
<option value="val3">val3</option>
</select>
</td>
<td>
<input type="text" id="searchField" name="searchFieldText"/>
</td>
<td>
<input type="submit" style="color:black;background-color:rgb(216, 214, 208)" value="Search" onclick="submitClick()" />
</td>
<td style="text-align:right;width:10%;">#Html.ActionLink("LOGOUT", "logout")</td>
</tr>
</table>
</div>
<script>
function submitClick()
{
$.ajax({
url: "../MyController/ExecuteSearch?someParameter=" + $('#searchField').val(),
type: "GET",
success: function (data) {
debugger;
// your custom code
}
});
}
</script>
Hope this helps!
This code is written in jsp.it is a dynamic table with rows and columns .When clicked on the submit button,only the selected rows and the data in that row should be fetched into the servlet.
``<%# 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">
<%# page import="java.io.*,java.util.*,java.sql.*" %>
<%# page import="javax.servlet.http.*,javax.servlet.*" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/sql" prefix="sql" %>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Saravana Bhavan</title>
<link rel="stylesheet" href="css/lavish-bootstrap.css"/>
<link rel="stylesheet" href="css/font-awesome.css"/>
</head>
<body>
<form name="f1" method="post" action="Insertcheck.jsp">
<sql:setDataSource var="snapshot"
driver="oracle.jdbc.driver.OracleDriver"
url="jdbc:oracle:thin:#localhost:1521:xe"
user="system" password="pswd"
/>
<sql:query dataSource="${snapshot}" var="result">
select * from vendormenu
</sql:query>
<center><h3>Saravana Bhavan</h3>
<h4 class="text-muted">Menu</h4></center>
<div class="panel">
<table class="table table-bordered table-responsive" border="2" width="100%">
<tr>
<td>ITEM CODE</td>
<td>ITEM NAME</td>
<td>RATE</td>
<td></td>
</tr>
<c:forEach var="row" items="${result.rows}">
<center>
<tr>
<td><c:out value="${row.mid }"/>
</td>
<td><c:out value="${row.mname }"/>
</td>
<td><c:out value="${row.cost }"/></td>
<td><div class="checkbox">
<label><input type="checkbox" name="yes"></label></div></td>
</tr>
</center>
</c:forEach>
</table>
<br><br>
<center><input type="submit" /></center>
</div>
</form>
</body>
</html>
I need to print the values in each row selected using checkboxes by the user into the servlet from jsp.The rows are added dynamically. How to retrieve all the values from the rows selected?
Suggesting that ${row.mid} is unique, add value attribute to your checkbox:
<input type="checkbox" name="yes" value="${row.mid}" />
And then, in the servlet/JSP processing the form (btw. I do not see any <form> tag in your page!), use
String[] selectedMIDs = request.getParameterValues('yes');
to get an array of selected mids.
I have a question and I think I know the answer.
Have some html code where im using the action="mailto: function.
My question is can I assign the Subject to the generated email from the selection in the code below? E.g. Subject: Urgent; when urgent is selected.
<head>
<title></title>
</head>
<body>
<form enctype="text/plain" method="post" id="orderform" action="mailto:randomeemail#gmail.com?subject" >
<table border="1" align="left" style="width: 100%">
<tbody>`enter code here`
<tr>
<td style="text-align: justify;"><label for="element_10" class="Deliverys">What
Type of Delivery is required?</label></td>
<td style="text-align: justify;">
<select name="Urgency Required">
<option value="Standard">Standard Delivery</option>
<option value="Fast">Fast</option>
<option value="Urgent">Urgent</option>
<option value="Required in 4 hours">Required in 4 hours</option>
<option value="Required in 2 hours">Required in 2 hours</option>
<option value="Pick-up">Pick-up</option>
</select>
</td>
</tr>
<input type="submit" value="Submit" name="Submit" />
</form>
</body>
</html>
If you don't mind using Javascript, you can do the following:
<script>
function myFunction(){
window.location.href = 'mailto:randomeemail#gmail.com?subject=' + document.querySelector('select[name="Urgency Required"]').value
return false
}
</script>
<form enctype="text/plain" method="post" id="orderform" onsubmit="return myFunction();" >
<table border="1" align="left" style="width: 100%">
<tbody>`enter code here`
<tr>
<td style="text-align: justify;"><label for="element_10" class="Deliverys">What
Type of Delivery is required?</label></td>
<td style="text-align: justify;">
<select name="Urgency Required">
<option value="Standard">Standard Delivery</option>
<option value="Fast">Fast</option>
<option value="Urgent">Urgent</option>
<option value="Required in 4 hours">Required in 4 hours</option>
<option value="Required in 2 hours">Required in 2 hours</option>
<option value="Pick-up">Pick-up</option>
</select>
</td>
</tr>
<input type="submit" value="Submit" name="Submit"></input>
</tbody>
</table>
</form>
Bascially, when the form submits, it'll dynamically generate the mailto link, and open it. It then returns false, which stops the form from actually submitting (i.e. redirecting to the action).
Hi, my requirement is to populate the data on same window where i have provide the employee id , Employee Id button and input field is present on left corner the of window and i want to populate the data on right corner of window as shown on figure right now i m population data on different window please help me out .
Here is my JS
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<%# taglib uri="http://www.springframework.org/tags/form" prefix="form"%>
<%# taglib uri="http://www.springframework.org/tags" prefix="spring"%>
<jsp:include page="Header.jsp" />
<!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">
<link href="../css/style1.css" rel="stylesheet" type="text/css">
</head>
<body>
<table width="1255" height="952" border="0">
<tr>
<td width="357" height="251" bgcolor="#CC6600">
<table width="285" border="0" align="center" bgcolor="#FF9900">
<c:if test="${requestScope.x}">
<div id="div3">
<form:form commandName="departmentForm"
action="/EmployeeWebAppUI/DepartmentController/findbydepartmentid">
<span>Find By ID </span>
<form:input path="departmentId" />
<input type="submit" name="submit1" value="search" />
</form:form>
<br>
</div>
</c:if>
<c:if test="${requestScope.y}">
<div id="div1">
<form:form commandName="departmentForm"
action="/EmployeeWebAppUI/DepartmentController/findbydepartmentname">
<span>Find BY Name</span> <form:input
path="departmentName" />
<input type="submit" name="submit" value="search" />
</form:form>
</div>
</c:if>
<c:if test="${requestScope.w}">
<div id="div2">
<form:form commandName="projectForm"
action="/EmployeeWebAppUI/ProjectController/getprojectsbyId">
<span>Employee Number: </span>
<form:input path="employeeNumber" />
<input type="submit" name="submit2" value="search" />
</form:form>
<br>
</div>
</c:if>
<c:if test="${requestScope.A}">
<div id="div2">
<form:form commandName="employeeForm"
action="/EmployeeWebAppUI/EmployeeGetController/findbyid"
method="get">
<span>Employee Id:</span>
<form:input path="employeeNumber" />
<input type="submit" name="Search" value="Search" />
</form:form>
</div>
</c:if>
<c:if test="${requestScope.B}">
<div id="div1">
<form:form commandName="employeeForm"
action="/EmployeeWebAppUI/EmployeeGetController/findbyname"
method="post">
<span>Employee Name:</span>
<form:input path="firstName" />
<input type="submit" name="Search" value="Search" />
</form:form>
</div>
</c:if>
<c:if test="${requestScope.C}">
<div id="div1">
<form:form commandName="employeeForm"
action="/EmployeeWebAppUI/EmployeeGetController/findByDepatmentId"
method="post">
<span>Department ID:</span>
<form:input path="departmentId" />
<input type="submit" name="Search" value="Search" />
</form:form>
</div>
</c:if>
</table>
<p> </p>
</td>
<td width="888" rowspan="2">
<tr>
<td height="693" bgcolor="#CC6600"></td>
</tr>
</table>
</body>
</html>
Instead of getting complete page get only data from Server and then render data on page using JavaScript.
This is typically possible if you post page asynchronously ( or using Ajax). The way you do is :
Call action by passing input parameters to the server using Ajax.
Get response in JSON form from server
Parse JSON data and then populate page using DOM manipulation.
You can use any JS library like jQuery to simplify your Ajax call as well as doing DOM manipulation.
Assuming you are using jquery
on click of tab or lable do AJAX request .
It will call your servlet and write the data into ajax response there.
on client side onsuccess do the required stuff .
function changeCOntent(type){
$.ajax({
type: 'POST',
url: 'servletpath?type=passtype',
success:function(data){
$('#contentDiv').innerHTML = data;
}
});
}
I am doing a tutorial that uses the mvc. I have the following view:
Index.aspx
<%# Page Title="" Language="C#" MasterPageFile="~/Views/Shared/Site.Master" Inherits="System.Web.Mvc.ViewPage<MovieApp.Models.Movie>" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitleContent" runat="server">
Index
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
<h2>Index</h2>
<form action="Movie/List" method="post">
<table>
<tr>
<td>
<button id="List" type="button" onclick="">List</button>
</td>
</tr>
</table>
</form>
<form action="Create.aspx" method="post">
<table>
<tr>
<td>
<input type="submit" value="Create" />
</td>
</tr>
</table>
</form>
</asp:Content>
so when you click on create it must call the Create view.
when i run the app i get an error: Resource cannot be found. Create.aspx a view in the movie folder.
What is the path that I need to specify for the Create.aspx to be found?
You shouldn't be pointing to the page, Create.aspx. You should be pointing to a method called Create in a controller.
Its not clear on any controller you are using, but by default it will post to its own controller (with the same name). Or you can specify the method and controller to post to like this, using Html.BeginFrom:
#using (Html.BeginForm("Method", "Controller", FormMethod.Post))
{
<table>
<tr>
<td>
<input type="submit" value="Create" />
</td>
</tr>
</table>
}