send automatic mail to respective user when user uploads file to database - html

I am new with servlets. I have created MySQL database. User will upload file(or more than one files). Then automatically mail should be send to respective user who will upload file. please suggest me how to do this?. I have read about JAVA Mail API but I don't know how to use it. Is there any other way to do it? please suggest.
Note:- I don't want to send an email to one user. I want to send mail to that user who will upload file.
This is index.jsp page that I have created.
<form action="UploadServletClass" method="post" enctype="multipart/form-data">
<center>
<h1>Welcome to Document Management System...</h1>
</center>
<table width="400px" align="center" border="2">
<tr>
<td align="center" colspan="2">Form Details</td>
</tr>
<tr>
<td>First Name</td>
<td>
<input list="firstnamelist" required="" name="firstname" />
</td>
</tr>
<tr>
<td>Last Name</td>
<td>
<input list="lastnamelist" required="" name="lastname" />
</td>
</tr>
<tr>
<td>Division</td>
<td>
<input type="text" required="" name="division" />
</td>
</tr>
<tr>
<td>Reporting Unit</td>
<td>
<input type="text" required="" name="reportingunit" />
</td>
</tr>
<tr>
<td>Document Number</td>
<td>
<input type="text" required="" name="documentnumber" />
</td>
</tr>
<tr>
<td>Document Name</td>
<td>
<input type="text" required="" name="documentname" />
</td>
</tr>
<tr>
<td>Document Uploader</td>
<td>
<input type="text" required="" name="documentuploader" />
</td>
</tr>
<tr>
<td>Document Owner</td>
<td>
<input type="text" required="" name="documentowner" />
</td>
</tr>
<tr>
<td>Document Type</td>
<td>
<select name="Document_Type">
<option value="Agreement">Agreement</option>
<option value="Contract">Contract</option>
<option value="PO">PO</option>
<option value="Invoice">Invoice</option>
<option value="COA">COA</option>
<option value="Lease Deed">Lease Deed</option>
<option value="AMC">AMC</option>
<option value="Direct Material">Direct Material</option>
<option value="Indirect Material/Services">Indirect Material/Services</option>
</select>
</td>
</tr>
<br><br>
<tr>
<td>Document Category</td>
<td>
<select name="Document_Category">
<option value="Customer">Customer</option>
<option value="Vendor">Vendor</option>
<option value="Internal">Internal</option>
</select>
</td>
</tr>
<br><br>
<tr>
<td>Mail id</td>
<td>
<input type="email" required="" name="mailid" />
</td>
</tr>
<tr>
<td>Select File</td>
<td>
<input type="file" name="fileName" multiple="multiple" />
</td>
</tr>
<tr>
<td></td>
<td>
<input type="submit" value="Submit" name="Submit" />
</td>
</tr>
</table>
</form>

Related

How can I make my table to move in the side of the first table?

This is my table and I want to put the second table beside the first table but when I tried it nothing happen and also how can I make my table in the same width as the second table I tried to add width, but the table cannot sync together
enter image description here
and this is my code
<table border="1" bordercolor="#336699" align="center">
<!-- TABLE -->
<tr>
<td><b>LAST NAME:<b></td>
<td><input type="text" name="lname"></td>
</tr>
<tr>
<td><b>FIRST NAME:</b></td>
<td><input type="text" name="fname"></td>
</tr>
<tr>
<td><b>MIDDLE NAME:<b></td>
<td><input type="text" name="mname"></td>
</tr>
<tr>
<td><b>COURSE:</b></td>
<td>
<select name="course">
<option value="BSCS">BSCS</option>
<option value="BSIT">BSIT</option>
<option value="BSCE">BSCE</option>
<option value="BSEMC">BSEMC</option>
</select>
</tr>
</div>
</div>
<!-- TABLE 2 -->
<table border="1" bordercolor="#336699" align="center">
<tr>
<td><b>SEX:</b></td>
<td>
<select name="gender">
<option value="FEMALE">FEMALE</option>
<option value="MALE">MALE</option>
</select>
<tr>
<td><b>AGE:<b></td>
<td><input type="text" name="age"></td>
</tr>
<tr>
<td><b>CONTACT NUMBER:<b></td>
<td><input type="text" name="cp"></td>
</tr>
</tr>
<tr>
<td><label for="birthday"><b>BIRTHDAY:</b></label>
</td>
<td><input type="date" name="birthday"></td>
</tr>
<tr>
<td><b>FATHER NAME:<b></td>
<td><input type="text" name="ffname"></td>
</tr>
<tr>
<td><b>MOTHER NAME:<b></td>
<td><input type="text" name="mmname"></td>
</tr>
<tr>
<td><b>GUARDIAN NAME:<b></td>
<td><input type="text" name="mmname"></td>
</tr>
<tr>
<td><b>ADDRESS:<b></td>
<td><textarea name="w3review" rows="3" cols="15">
</textarea>
</td>
</tr>
<tr>
<td colspan="2"><center><input type="submit" value="Save">
<input type="reset" value="clear"></center>
</td>
</tr>
You had a wrong HTML structure.
To put them the way you wanted you need to wrap the two tables with a div. I call it a container. And set a CSS rule "display: flex"
.container {
display: flex
}
<div class="container">
<table border="1" bordercolor="#336699" align="center">
<tr>
<td><b>LAST NAME:</b></td>
<td><input type="text" name="lname" /></td>
</tr>
<tr>
<td><b>FIRST NAME:</b></td>
<td><input type="text" name="fname" /></td>
</tr>
<tr>
<td><b>MIDDLE NAME:</b></td>
<td><input type="text" name="mname" /></td>
</tr>
<tr>
<td><b>COURSE:</b></td>
<td>
<select name="course">
<option value="BSCS">BSCS</option>
<option value="BSIT">BSIT</option>
<option value="BSCE">BSCE</option>
<option value="BSEMC">BSEMC</option>
</select>
</td>
</tr>
</table>
<!-- TABLE 2 -->
<table bordercolor="#336699" align="center">
<tr>
<td><b>SEX:</b></td>
<td>
<select name="gender">
<option value="FEMALE">FEMALE</option>
<option value="MALE">MALE</option>
</select>
</td>
</tr>
<tr>
<td><b>AGE:</b></td>
<td><input type="text" name="age" /></td>
</tr>
<tr>
<td><b>CONTACT NUMBER:</b></td>
<td><input type="text" name="cp" /></td>
</tr>
<tr>
<td>
<label for="birthday"><b>BIRTHDAY:</b></label>
</td>
<td><input type="date" name="birthday" /></td>
</tr>
<tr>
<td><b>FATHER NAME:</b></td>
<td><input type="text" name="ffname" /></td>
</tr>
<tr>
<td><b>MOTHER NAME:</b></td>
<td><input type="text" name="mmname" /></td>
</tr>
<tr>
<td><b>GUARDIAN NAME:</b></td>
<td><input type="text" name="mmname" /></td>
</tr>
<tr>
<td><b>ADDRESS:</b></td>
<td><textarea name="w3review" rows="3" cols="15"> </textarea></td>
</tr>
<tr>
<td colspan="2">
<center><input type="submit" value="Save" /> <input type="reset" value="clear" /></center>
</td>
</tr>
</table>
</div>

how to use radio and submit button with tables

I tried to add a reset button and submit button, to a form which includes tables, but they do not work
here's the code:
<forms name="f1">
<table valign='center'>
<tr valign="top">
<td>Name:</td>
<td> <input type="text" name="f1"> <br> <br> </td>
</tr>
<tr valign="top">
<td>Age: </td>
<td> <input type="text" name="f2"> <br> <br> </td>
</tr>
<tr valign="top">
<td>Email:</td>
<td> <input type="text" name="f3"> <br> <br> </td>
</tr>
<tr valign="top">
<td>News Type:</td>
<td>
<select> <br> <br>
<option> Tech </option>
<option> Gaming </option>
<option> Homepage </option>
<option> Stocks </option>
<option> Sports </option>
</select><br><br></td>
</tr>
<tr valign="top">
<td>Comments:</td>
<td> <textarea cols="50" rows="5"> Give Feedback </textarea><br> <br> </td>
</tr>
<tr>
<td> <input type="reset" value="reset"></td>
<td align="right"> <input type="submit" value="Submit"></td>
</tr>
</table>
</forms>
Please using Form tag instead of forms, Refer here
<form name="f1">
<table valign='center'>
<tr valign="top">
<td>Name:</td>
<td> <input type="text" name="f1"> <br> <br> </td>
</tr>
<tr valign="top">
<td>Age: </td>
<td> <input type="text" name="f2"> <br> <br> </td>
</tr>
<tr valign="top">
<td>Email:</td>
<td> <input type="text" name="f3"> <br> <br> </td>
</tr>
<tr valign="top">
<td>News Type:</td>
<td>
<select> <br> <br>
<option> Tech </option>
<option> Gaming </option>
<option> Homepage </option>
<option> Stocks </option>
<option> Sports </option>
</select><br><br></td>
</tr>
<tr valign="top">
<td>Comments:</td>
<td> <textarea cols="50" rows="5"> Give Feedback </textarea><br> <br> </td>
</tr>
<tr>
<td> <input type="reset" value="reset"></td>
<td align="right"> <input type="submit" value="Submit"></td>
</tr>
</table>
</form>
I re-created your example by using Event Handlers with Javascript (JQuery).
If you do not want to use Javascript then please feel free to use #Shivasagar example.
Here is my snippet:
// Adding event listener on the reset button
$('input[name="reset"]').click(function(event) {
// Then setting the values of the form to nothing
$('input[name="name"]').val('');
$('input[name="age"]').val('');
$('input[name="email"]').val('');
$('select[name="newsType"]').val('None');
$('textarea[name="comments"]').val('');
});
// Prevent submit from submiting
$('input[name="submit"]').click(function(event) {
event.preventDefault();
});
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Form</title>
<!-- Bootstrap -->
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"
integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm"
crossorigin="anonymous">
<!-- JQuery -->
<script
src="https://code.jquery.com/jquery-3.4.1.min.js"
integrity="sha256-CSXorXvZcTkaix6Yvo6HppcZGetbYMGWSFlBw8HfCJo="
crossorigin="anonymous"></script>
</head>
<body>
<form id="f1">
<table class="table table-responsive">
<tbody>
<tr>
<td>Name:</td>
<td><input class="form-control" type="text" name="name"></td>
</tr>
<tr>
<td>Age:</td>
<td><input class="form-control" type="text" name="age"></td>
</tr>
<tr>
<td>Email:</td>
<td><input class="form-control" type="text" name="email"></td>
</tr>
<tr>
<td>News Type:</td>
<td>
<select class="form-control" name="newsType">
<option value="None" style="display: none;" selected> -- select an option -- </option>
<option value="Tech">Tech</option>
<option value="Gaming">Gaming</option>
<option value="Homepage">Homepage</option>
<option value="Stocks">Stocks</option>
<option value="Sports">Sports</option>
</select>
</td>
</tr>
<tr>
<td>Comments:</td>
<td><textarea cols="50" rows="5" placeholder="Give Feedback" name="comments"></textarea></td>
</tr>
<tr>
<td><input class="btn btn-light float-left" type="button" value="Reset" name="reset"></td>
<td><input class="btn btn-light float-right" type="submit" value="Submit" name="submit"></td>
</tr>
</tbody>
</table>
</form>
</body>
</html>

How to style a option

I am trying to make the select option wider but I cant get it to work. I have tried with width but it didn't work for me. I also couldn't find anything on the internet.
I hope somebody can help me.
This is my HTML:
<form action="" method="post">
<legend>Neem contact op</legend>
<table>
<tr>
<td>
<label for="Naam">Naam: </label>
</td>
<td>
<input type="text" id="Naam" name="Naam" placeholder="Naam" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Email">Email :</label>
</td>
<td>
<input type="email" id="Email"name="Email" placeholder="Email" required="required" />
</td>
</tr>
<tr>
<td>
<label for="Seizoen">Seizoen: </label>
</td>
<td>
<select name="Seizoen" id="Seizoen" required>
<option value="">Kies hier je seizoen</option>
<option value="Lente">Lente</option>
<option value="Zomer">Zomer</option>
<option value="Herfst">Herfst</option>
<option value="Winter">Winter</option>
</select>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="benodigheden1">Benodigheden:</label>
</td>
<td>
<input type="text" id="benodigheden1"name="benodigheden1" placeholder="Benodigheden" required="required" />
</td>
</tr>
<tr>
<td>
<label for="ingrediënten1">Ingrediënten:</label>
</td>
<td>
<input type="text" id="ingrediënten1"name="ingrediënten1" placeholder="Ingrediënten" required="required" />
</td>
</tr>
<tr>
<td>
<label for="stappenplan">Stappenplanm:</label>
</td>
<td>
<textarea name="stappenplan" id="stappenplan" cols="40" rows="5" placeholder="Stappenplan" required="required" /></textarea>
</td>
</tr>
<tr>
<td colspan="2">
<hr />
</td>
</tr>
<tr>
<td>
<label for="Opmerking">Opmerking:</label>
</td>
<td>
<textarea name="Opmerking" id="Opmerking" cols="40" rows="5" placeholder="Opmerking" required="required" /></textarea>
</td>
</tr>
<tr>
<td>
</td>
<td>
<div class="submit"><input type="submit" value="Verzenden" name="Verzenden" /></div>
</td>
</tr>
</table>
Here is a link to JSFiddle.
See this fiddle
You have to add the below CSS for styling the select
select{
width: 300px;
}
The best option is to try padding like;
select{
padding: 20px;
}
Here is the demo..

Cannot align checkbox in table to the left

I have a checkbox in a table and I cannot align them to the left.
<tr>
<td colspan="3" class="cb">
<input type="checkbox" name="cb" value="checked" /> this is a checkbox
</td>
</tr>
table.all td.cb{
color: #424242;
border:1px solid black;
margin:0 auto;
text-align:left;
}
I have tried many things, but the result is this:
I applied a border for demonstration purposes.
If I add float:left, I get this:
I used the same code in another webpage where it was working fine (there the table had 2 columns only).
Solution:
I already had this in my .css file which strangely caused the problem in spite of the colspan="3"
table.all td input{
width:90%;
float:left;
}
I changed it to
table.all td input.i{
width:90%;
float:left;
}
and added a class="i" to all the other input types and now it's working fine.
The whole form if necessary:
<div id="container_center">
<form>
<table class="minden">
<tr>
<td colspan="3">
<p class="title">Create new account</p>
</td>
</tr>
<tr>
<td colspan="3">
<p class="title2">Enter account holder information</p>
</td>
</tr>
<tr>
<td colspan="3">
<div id="container_jobb_content_vonal"> </div>
</td>
</tr>
<tr>
<td>
<p>First name: *</p>
</td>
<td colspan="2">
<p>Last name: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="firstname" size="45">
</td>
<td colspan="2">
<input type="text" name="lastname" size="45">
</td>
</tr>
<tr>
<td>
<p>Email: *</p>
</td>
<td colspan="2">
<p>Email again: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="email" size="45">
</td>
<td colspan="2">
<input type="text" name="email2" size="45">
</td>
</tr>
<tr>
<td>
<p>Address 1: *</p>
</td>
<td colspan="2">
<p>Address 2:</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="address1" size="45">
</td>
<td colspan="2">
<input type="text" name="address2" size="45">
</td>
</tr>
<tr>
<td>
<p>Country: *</p>
</td>
</tr>
<tr>
<td>
<select name="country" class="sel_country">
<option value="">[Please Select]</option>
<option value="United States">United States</option>
<option value="United Kingdom">United Kingdom</option>
<option value="Germany">Germany</option>
</select>
</td>
</tr>
<tr>
<td>
<p>City: *</p>
</td>
<td>
<p>State/Province: *</p>
</td>
<td>
<p>Zip code: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="city" size="45">
</td>
<td>
<input type="text" name="state" size="30">
</td>
<td>
<input type="text" name="zip" size="10" class="zip">
</td>
</tr>
<tr>
<td>
<p>Phone number: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="phone" size="45">
</td>
</tr>
<tr>
<td colspan="3">
<p class="title3">Create your login</p>
</td>
</tr>
<tr>
<td colspan="3">
<div id="container_jobb_content_vonal"> </div>
</td>
</tr>
<tr>
<td>
<p>Username: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="username" size="45">
</td>
</tr>
<tr>
<td>
<p>Password: *</p>
</td>
<td>
<p>Confirm password: *</p>
</td>
</tr>
<tr>
<td>
<input type="text" name="password" size="45">
</td>
<td colspan="2">
<input type="text" name="password2" size="45">
</td>
</tr>
<tr>
<td colspan="3">
<p class="title3">Accept terms</p>
</td>
</tr>
<tr>
<td colspan="3">
<div id="container_jobb_content_vonal"> </div>
</td>
</tr>
<tr>
<td colspan="3" class="cb">
<input type="checkbox" name="cb" value="checked"/>this is a checkbox
</td>
</tr>
<tr>
<td>
<ul>
<li>Terms of service</li>
<li>Privacy policy</li>
</ul>
</td>
</tr>
<tr>
<td class="submit" colspan="3">
<input type="submit" name="purchase" value="Purchase" id="submitbutton">
</td>
</tr>
</table>
</form>
</div>
You could also accomplish this by excluding the checkbox from your input style. For example, I was encountering a similar problem with this CSS:
input {
width: 300;
}
And fixed by changing to this:
input:not([type="checkbox"]) {
width: 300;
}

Using HTML::Template within a value attribute

my question is how would I use an HTML::Template tag inside a value of form field to change that field. For example
<table border="0" cellpadding="8" cellspacing="1">
<tr>
<td align="right">File:</td>
<td>
<input type="file" name="upload" value= style="width:400px">
</td>
</tr>
<tr>
<td align="right">File Name:</td>
<td>
<input type="text" name="filename" style="width:400px" value="" >
</td>
</tr>
<tr>
<td align="right">Title:</td>
<td>
<input type="text" name="title" style="width:400px" value="" />
</td>
</tr>
<tr>
<td align="right">Date:</td>
<td>
<input type="text" name="date" style="width:400px" value="" />
</td>
</tr>
<tr>
<td colspan="2" align="right">
<input type="button" value="Cancel">
<input type="submit" name="action" value="Upload" />
</td>
</tr>
</table>
I want the value to have a <TMPL_VAR> variable in it.
You use it the same way you'd use a template variable anywhere else:
<input type="text" name="date" style="width:400px" value="<TMPL_VAR NAME=date>" />
Yeah, it's ugly and it breaks your HTML validator. Which is one of the many reasons why I like Template Toolkit better.