Dynamic Regex :-
Try the following code when systen test is not function in javascript. while regex validation.
or
Dynamic create the Regex that is stored in another variable and compare
check In
if condition you have place the regex pattern and email in correct location as follow
if(pattern.test(emailid)
var emailid='balamurugan2b@gmail.com';
var regexpattern='^([\w-]+(?:\.[\w-]+)*)@(gmail.com)$';
var pattern = new RegExp(regexpattern);
if(pattern.test(emailid)){
true;
}else{
false;
}
add more rows and delete row
Click Here
jquery drag and drop file upload
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<style>
#dragandrophandler
{
border:2px dotted #0B85A1;
width:400px;
color:#92AAB0;
text-align:left;vertical-align:middle;
padding:10px 10px 10 10px;
margin-bottom:10px;
font-size:200%;
}
.progressBar {
width: 200px;
height: 22px;
border: 1px solid #ddd;
border-radius: 5px;
overflow: hidden;
display:inline-block;
margin:0px 10px 5px 5px;
vertical-align:top;
}
.progressBar div {
height: 100%;
color: #fff;
text-align: right;
line-height: 22px; /* same as #progressBar height if we want text middle aligned */
width: 0;
background-color: #0ba1b5; border-radius: 3px;
}
.statusbar
{
border-top:1px solid #A9CCD1;
min-height:25px;
width:700px;
padding:10px 10px 0px 10px;
vertical-align:top;
}
.statusbar:nth-child(odd){
background:#EBEFF0;
}
.filename
{
display:inline-block;
vertical-align:top;
width:250px;
}
.filesize
{
display:inline-block;
vertical-align:top;
color:#30693D;
width:100px;
margin-left:10px;
margin-right:5px;
}
.abort{
background-color:#A8352F;
-moz-border-radius:4px;
-webkit-border-radius:4px;
border-radius:4px;display:inline-block;
color:#fff;
font-family:arial;font-size:13px;font-weight:normal;
padding:4px 15px;
cursor:pointer;
vertical-align:top
}
</style>
</head>
<body>
<div id="dragandrophandler">Drag & Drop Files Here</div>
<br><br>
<div id="status1"></div>
<script>
function sendFileToServer(formData,status)
{
var uploadURL ="fileUpload.jsp"; //Upload URL
var extraData ={}; //Extra Data.
var jqXHR=$.ajax({
xhr: function() {
var xhrobj = $.ajaxSettings.xhr();
if (xhrobj.upload) {
xhrobj.upload.addEventListener('progress', function(event) {
var percent = 0;
var position = event.loaded || event.position;
var total = event.total;
if (event.lengthComputable) {
percent = Math.ceil(position / total * 100);
}
//Set progress
status.setProgress(percent);
}, false);
}
return xhrobj;
},
url: uploadURL,
type: "POST",
contentType:false,
processData: false,
cache: false,
data: formData,
success: function(data){
status.setProgress(100);
$("#status1").append("File upload Done<br>");
}
});
status.setAbort(jqXHR);
}
var rowCount=0;
function createStatusbar(obj)
{
rowCount++;
var row="odd";
if(rowCount %2 ==0) row ="even";
this.statusbar = $("<div class='statusbar "+row+"'></div>");
this.filename = $("<div class='filename'></div>").appendTo(this.statusbar);
this.size = $("<div class='filesize'></div>").appendTo(this.statusbar);
this.progressBar = $("<div class='progressBar'><div></div></div>").appendTo(this.statusbar);
this.abort = $("<div class='abort'>Abort</div>").appendTo(this.statusbar);
obj.after(this.statusbar);
this.setFileNameSize = function(name,size)
{
var sizeStr="";
var sizeKB = size/1024;
if(parseInt(sizeKB) > 1024)
{
var sizeMB = sizeKB/1024;
sizeStr = sizeMB.toFixed(2)+" MB";
}
else
{
sizeStr = sizeKB.toFixed(2)+" KB";
}
this.filename.html(name);
this.size.html(sizeStr);
}
this.setProgress = function(progress)
{
var progressBarWidth =progress*this.progressBar.width()/ 100;
this.progressBar.find('div').animate({ width: progressBarWidth }, 10).html(progress + "% ");
if(parseInt(progress) >= 100)
{
this.abort.hide();
}
}
this.setAbort = function(jqxhr)
{
var sb = this.statusbar;
this.abort.click(function()
{
jqxhr.abort();
sb.hide();
});
}
}
function handleFileUpload(files,obj)
{
for (var i = 0; i < files.length; i++)
{
var fd = new FormData();
fd.append('file', files[i]);
var status = new createStatusbar(obj); //Using this we can set progress.
status.setFileNameSize(files[i].name,files[i].size);
sendFileToServer(fd,status);
}
}
$(document).ready(function()
{
var obj = $("#dragandrophandler");
obj.on('dragenter', function (e)
{
e.stopPropagation();
e.preventDefault();
$(this).css('border', '2px solid #0B85A1');
});
obj.on('dragover', function (e)
{
e.stopPropagation();
e.preventDefault();
});
obj.on('drop', function (e)
{
$(this).css('border', '2px dotted #0B85A1');
e.preventDefault();
var files = e.originalEvent.dataTransfer.files;
//We need to send dropped files to Server
handleFileUpload(files,obj);
});
$(document).on('dragenter', function (e)
{
e.stopPropagation();
e.preventDefault();
});
$(document).on('dragover', function (e)
{
e.stopPropagation();
e.preventDefault();
obj.css('border', '2px dotted #0B85A1');
});
$(document).on('drop', function (e)
{
e.stopPropagation();
e.preventDefault();
});
});
</script>
</body>
</html>
fileUpload.jsp
<!--
File Name :-fileUpload.jsp
Created By:-B.Balamurugab
Created on:-May 14,2014.
Description:- This file is used for upload
droped file
Edited By
-->
<%@ page language="java" import="java.io.*,java.util.*" %>
<%@ page import="java.sql.*,in.textech.library.DatabaseLibrary,in.textech.common.ConstantValues" %>
<%@page import="in.textech.library.DatabaseLibrary"%>
<%@ page import="in.textech.library.LocaleDateTime" %>
<%@page import="in.textech.common.ConstantValues"%>
<%@page import="java.sql.Connection"%>
<%@page import="com.mysql.jdbc.Driver"%>
<%@page import="java.sql.DriverManager"%>
<%@page import="java.io.InputStream"%>
<%@page import="java.io.FileInputStream"%>
<%@page import="java.sql.PreparedStatement"%>
<%@page import="java.io.File"%>
<%@page import="java.io.IOException"%>
<%@page import="java.io.PrintWriter"%>
<%@page import="java.util.Iterator"%>
<%@page import="java.util.List"%>
<%@page import="org.apache.commons.fileupload.FileItem"%>
<%@page import="org.apache.commons.fileupload.disk.DiskFileItemFactory"%>
<%@page import="org.apache.commons.fileupload.servlet.ServletFileUpload"%>
<%
response.setContentType("text/html");
response.setHeader("Cache-control","no-cache");
response.setContentType("text/plain");
response.setCharacterEncoding("UTF-8");
try{
if(!ServletFileUpload.isMultipartContent(request)) {
out.println("Request does not contain upload data");
return;
}
// configures upload settings
DiskFileItemFactory factory = new DiskFileItemFactory();
factory.setRepository(new File(System.getProperty("java.io.tmpdir")));
ServletFileUpload upload = new ServletFileUpload(factory);
String UPLOAD_DIRECTORY = "PO";
// constructs the directory path to store upload file
String uploadPath = System.getProperty("java.io.tmpdir")+ UPLOAD_DIRECTORY;
// creates the directory if it does not exist
File uploadDir = new File(uploadPath);
if (!uploadDir.exists()) {
uploadDir.mkdir();
}
String filePath = "";
// parses the request's content to extract file data
List formItems = upload.parseRequest(request);
Iterator iter = formItems.iterator();
// iterates over form's fields
while (iter.hasNext()) {
FileItem item = (FileItem) iter.next();
// processes only fields that are not form fields
if (!item.isFormField()) {
String fileName = new File(item.getName()).getName();
if(fileName!=null && !"".equals(fileName)){
filePath = uploadPath + File.separator + fileName;
File storeFile = new File(filePath);
// saves the file on disk
item.write(storeFile);
}
}
}
}catch(Exception e){
e.printStackTrace();
}
response.getWriter().write("y");
%>
drag and drop file upload pure java script .
window.onload = function() {
var dropbox = document.getElementById("dropbox");
dropbox.addEventListener("dragenter", noop, false);
dropbox.addEventListener("dragexit", noop, false);
dropbox.addEventListener("dragover", noop, false);
dropbox.addEventListener("drop", dropUpload, false);
}
function noop(event) {
event.stopPropagation();
event.preventDefault();
}
function dropUpload(event) {
noop(event);
var files = event.dataTransfer.files;
for (var i = 0; i < files.length; i++) {
var xhr = new XMLHttpRequest(); xhr.open("POST", fileUpload.jsp, false);
xhr.send(formData)
}
}
function upload(file,poID) {
}
function uploadProgress(event) {
// Note: doesn't work with async=false.
var progress = Math.round(event.loaded / event.total * 100);
document.getElementById("status").innerHTML = "Progress " + progress + "%";
}
function uploadComplete(event) {
alert("Complete Request");
}
Show only month and year
Call setYearToDropDown() in onload of page
Html Code
<html>
<body onload="setYearToDropDown()">
<table>
<tr><td><td>Month</td><td>
<select name="year" id="year" style="width:155px" size="1" onchange="display_month()" >
</td>
</tr>
<tr><td><td>Year</td><td>
<select name="month" id="month" style="width:155px" size="1" >
</td>
</tr>
</body>
<script>
function setYearToDropDown(){
var currentDate = new Date();
var currentYear = currentDate.getFullYear();
var nextYear = currentYear +1;
var nextNextYear = nextYear+1;
document.getElementById("year").options.length = 0;
document.getElementById("year").options[0] = new Option('Select','');
document.getElementById("year").options[1] = new Option(currentYear,currentYear);
document.getElementById("year").options[2] = new Option(nextYear,nextYear);
document.getElementById("year").options[3] = new Option(nextNextYear,nextNextYear);
}
function display_month() {
var year = document.getElementById("year").value;
var k=1;
var d = new Date();
var n = d.getMonth();
var Currentyear = d.getFullYear()
var month=new Array();
month[0]="January";
month[1]="February";
month[2]="March";
month[3]="April";
month[4]="May";
month[5]="June";
month[6]="July";
month[7]="August";
month[8]="September";
month[9]="October";
month[10]="November";
month[11]="December";
if(document.getElementById("year").value !="") {
document.getElementById("month").options.length = 0;
document.getElementById("month").options[0] = new Option('Select','');
if(Currentyear==year) {
for(var i=n;i<month.length;i++) {
document.getElementById("month").options[k] = new Option(month[i],i+1);
k++;
}
}
else {
for(var i=1;i<=month.length;i++) {
document.getElementById("month").options[i] = new Option(month[i-1],i);
}
}
}
else {
document.getElementById("month").options.length = 0;
document.getElementById("month").options[0] = new Option('Select','');
}
}
</script>
</html>
jQuery get radio buttom value
<td> <input type="radio" name="sendMail" id="sendMailYes" value="yes" >Yes<br>
<input type="radio" name="sendMail" id="sendMailNo" value="no" >No</td>
var issendMail = $('input[name=sendMail]:checked').val();
To Select Multi select dropdwon
function selectTeamSubgroup(){
$("#selectedVendor").each(function(){
$("#selectedVendor option").attr("selected","selected"); });
}
File Upload to Server on change of input Box
window.addEventListener('load',function(){
var emailAttachment = document.getElementById("files");
emailAttachment.addEventListener("change", handleFileSelect, false);
});
function handleFileSelect(e) {
var storedFiles = [];
var valuesCount;
var requestAttachment;
var files = e.target.files;
var filesArr = Array.prototype.slice.call(files);
filesArr.forEach(function(f) {
storedFiles.push(f);
var reader = new FileReader();
reader.onload = function (e) {
}
reader.readAsDataURL(f);
});
var data = new FormData();
valuesCount =storedFiles.length;
for(var i=0, len=storedFiles.length; i<len; i++) {
data.append('files', storedFiles[i]);
}
if (window.XMLHttpRequest)
{
requestAttachment = new XMLHttpRequest();
}
else if (window.ActiveXObject)
{
requestAttachment = new ActiveXObject("Microsoft.XMLHTTP");
}
var url = "conversionEmailAttachment.jsp";
requestAttachment.open("POST", url, true);
requestAttachment.onreadystatechange =callbackUpload(requestAttachment,mainUpload);
requestAttachment.send(data);
}
function callbackUpload(requestAttachment,responseXmlHandler){
return function(){
if(requestAttachment.readyState == 4) {
if(requestAttachment.status == 200){
var height = 600;
document.getElementById("selDiv").innerHTML="";
var jsonObj = JSON.parse(requestAttachment.responseText);
for (var key in jsonObj) {
if (jsonObj.hasOwnProperty(key)) {
var fileName1 = jsonObj[key];
var html = "<div>" + fileName1.split("\\").pop() + " <img src=\"images/icon/attachmentDel.png\" onClick='deleteMe("+JSON.stringify(key)+");'/></div>";
document.getElementById("selDiv").innerHTML+= html;
height +=30;
}
}
document.getElementById("email_send").style.height = height+"px";
}
else{
alert("Http error :"+requestAttachment.status);
}
}
}
}
function mainUpload(main) {
}
function deleteMe(fileID){
var url = "deleteEmailAttachment.jsp?fileID="+fileID;
var request;
try{
if (window.XMLHttpRequest){
request = new XMLHttpRequest();
}
else if (window.ActiveXObject) {
request = new ActiveXObject("Microsoft.XMLHTTP");
}
request.open("GET", url, true);
request.onreadystatechange = callbackDelete(request,mainDelete);
request.send(null);
}
catch(e){
alert(e);
}
}
function callbackDelete(request,responseXmlHandler1){
return function(){
if(request.readyState == 4) {
if(request.status == 200){
var jsonObj = JSON.parse(request.responseText);
document.getElementById("selDiv").innerHTML="";
for (var key in jsonObj) {
if (jsonObj.hasOwnProperty(key)) {
var fileName1 = jsonObj[key];
var html = "<div>" + fileName1.split("\\").pop() + " <img src=\"images/icon/attachmentDel.png\" onClick='deleteMe("+JSON.stringify(key)+");'/></div>";
document.getElementById("selDiv").innerHTML+= html;
}
}
}
else{
alert("Http error :"+requestAttachment.status);
}
}
}
}
function mainDelete(main) {
}
------------------------------------------------------------------------------
Disable dates in jquery Calender
var x="Threshold Reached";
<%
CustomThreshold threshold = new CustomThreshold();
String[] disabledDays= threshold.dateFoundCheck(employee_id);
//String[] params = request.getParameterValues("someField");
int disableDaysLength=disabledDays.length;
for (int i=0;i<disabledDays.length;i++) {
out.println("unavailableDates["+i+"]='"+disabledDays[i]+"';");
}
%> function unavailable(date) {
ymd = date.getFullYear() + "-" + ("0"+(date.getMonth()+1)).slice(-2) + "-" + ("0"+date.getDate()).slice(-2);
day = new Date(ymd).getDay();
if ($.inArray(ymd, unavailableDates) < 0 ) {
return [true, "enabled", ""];
} else {
return [false,"disabled",x];
}
}
/* create datepicker */
jQuery(document).ready(function() {
jQuery('#startdate').datepicker({
minDate: new Date(2010, 0, 1),
maxDate: '+1Y',
//minDate: 0,
dateFormat: 'dd-mm-yy',
constrainInput: true,
showOn: "button",
buttonImage: "../images/cal1.gif",
buttonImageOnly: true,
beforeShowDay:unavailable
});
});
jQuery(document).ready(function() {
jQuery('#enddate').datepicker({
minDate: new Date(2012, 0, 1),
maxDate: '+1Y',
dateFormat: 'dd-mm-yy',
constrainInput: true,
showOn: "button",
buttonImage: "../images/cal1.gif",
buttonImageOnly: true,
beforeShowDay:unavailable
});
});
