<%@ page language="java" import="java.util.*" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>

<%@ taglib prefix="s" uri="/struts-tags" %>

<!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">

    <meta name="viewport" content="width=device-width,initial-scale=1,maximum-scale=1,minimum-scale=1,user-scalable=no" />

    <meta http-equiv="X-UA-Compatible" content="IE=edge">

    <title>休假申请</title>

    <script src="jquery-1.11.1.min.js"></script>

    <style>

        body{margin: 0;padding: 0;}

        html,body{ font-size:14px; height:100%;}

        dl{

            width: 220px;

            height: auto;

            margin: 30px auto;

        }

        dl dt span{

            color: red;

        }

        dl dd{

            width: 100%;

            margin: 4px 0 12px;

        }

        dl dd select,input{

            width: 100%;

            height:2em;

            border-radius: 0;

            padding:0;

            margin:0;

            background-color: transparent;

        }

        footer{

            width: 100%;

        }

        button.submit{

            width: 150px;

            height: 2em;

            line-height: 2em;

            display: block;

            margin: 0 auto 20px;

            border-radius: 4px;

            border: none;

            font-weight: bold;

            color:#fff;

            background-color:#4d8fd8;

            font-size:14px;

        }

    </style>

</head>

<body>

    <dl>

        <dt>休假类别<span>*</span></dt>

        <dd>

            <select id="leaveCategory" style="width:217px;">

                <s:if test="typeList!=null && typeList.size()>0">

                    <s:iterator value="typeList" status="s">

                        <option value="<s:property value="timeItemCode"/>"> <s:property value="timeItemName"/> </option>

                    </s:iterator>

                </s:if>

            </select>

        </dd>

        <dt>休假开始日期时间<span>*</span></dt>

        <dd><input type="datetime-local" id="beginTime" style="width:215px;" /></dd>

        <dt>休假结束日期时间<span>*</span></dt>

        <dd><input type="datetime-local" id="endTime" style="width:215px;" /></dd>

        <dt>假期联系电话</dt>

        <dd><input type="tel" id="ownTel" maxlength="13" style="width:216px;" /></dd>

        <dt>休假事由</dt>

        <dd><input type="text" id="reason" maxlength="100" style="width:216px;" /></dd>

        <dt>工作交接人（请输入手机号）</dt>

        <dd><input type="tel" id="handoverTel" maxlength="20" style="width:216px;" /></dd>

        <dt>工作交接情况</dt>

        <dd><input type="text" id="situation" maxlength="100" style="width:216px;" /></dd>

        <dt>备注</dt>

        <dd><input type="text" id="note" maxlength="200" style="width:216px;" /></dd>

    </dl>

    <footer><button class="submit" onclick="submit()">提交</button></footer>

    <script>

        function submit(){

            var leaveCategory = $('#leaveCategory').val();

            if(!leaveCategory){

                alert("休假类别不能为空");

                return

            }

            var beginTime = $('#beginTime').val().substr(0,16);　　//时间只取值到分

            if(!beginTime){

                alert("休假开始日期时间不能为空");

                return

            }

            var endTime = $('#endTime').val().substr(0,16);

            if(!endTime){

                alert("休假结束日期时间不能为空");

                return

            }

            if(beginTime>=endTime){

                alert("休假结束日期时间必须大于休假开始日期时间");

                return

            }

            var ownTel = $('#ownTel').val();

            var reason = $('#reason').val();

            var handoverTel = $('#handoverTel').val();

            var situation = $('#situation').val();

            var note = $('#note').val();

            $.ajax({

                url: '',

                type: 'post',

                data: {

                    timeItemCode : leaveCategory,

                    beginTime : beginTime,

                    endTime : endTime,

                    ownTel : ownTel,

                    reason : reason,

                    handoverTel : handoverTel,

                    situation : situation,

                    note : note

                },

                dataType: 'json',

                success: function(res){},

                error: function(){}

            })

        }

    </script>

</body>

</html>

一个休假申请页对input标签各种属性的用法案例（手机端）的更多相关文章

  1. html <input>标签类型属性type(file、text、radio、hidden等)详细介绍

    html <input>标签类型属性type(file.text.radio.hidden等)详细介绍 转载请注明:文章转载自:[169IT-最新最全的IT资讯] html <inp ...

  2. select标签multiple属性的用法

    前些日子公司让做一个功能模块.对于里面一个小功能费了些周折,现将其总结一下: 一.实现效果: watermark/2/text/aHR0cDovL2Jsb2cuY3Nkbi5uZXQvZ2FvaHVh ...

  3. 一个解决chrome浏览器下input标签当autocomplete的时候背景变黄色同时input背景图片消失方案

    最近在改一个bug即如标题所讲的一样,chrome浏览器下当input标签开启autocomplete的时候input的背景颜色变黄同时在input的背景图片也被覆盖了.为此百度了好久发现网上说的使用 ...

  4. 解决input标签placeholder属性浏览器兼容性问题的一种方法

    为文本框input添加文字输入提示,H5为input提供了一个placeholder属性.在支持H5的浏览器中,用此属性设置输入提示,简单方便,但是对于IE8以下版本,都不支持placeholder属 ...

  5. HTML中input标签maxlength属性的妙处

    HTML中的input标签可是很常用的. HTML本身也非常简单,就是若干标签,每个标签有若干属性. 我在学习HTML的过程中,也没有太过重视. 今年,在写前端表单验证的时候,发现maxlength这 ...

  6. 关于input标签checkbox属性 和checked

    我们设置了type的属性为checkbox时,记住以下3个关键点 1.点勾选时或者说点击时,checked为选中,在input标签中是checked=“checked”,注意这里面无论checked= ...

  7. 前端 html input标签 placeholder属性 标签上显示内容

    前端 html  input标签 的placeholder属性  标签上显示内容 <!DOCTYPE html> <html lang="en"> < ...

  8. input标签新增属性

    <input   list='list_t' type="text" name='user' placeholder='请输入姓名' value="" / ...

  9. 前端 HTML form表单标签 input标签 type属性 file 上传文件

     加上上传文件功能 input type='file' - 依赖form表单里一个属性 enctype="multipart/form-data" 加上这个属性表示把你上次文件一点 ...

随机推荐

  1. oracle rac cache fusion

    转载自 http://blog.csdn.net/tianlesoftware/article/details/6534239 Introduction This post is about orac ...

  2. SQLServer到底支持多少连接数的并发？

    1)不启用连接池 当创建到101个连接的时候,就无法再创建新连接了.也就是说,如果连接字符串不做任何处理,我们的程序只能够跟SQLServer建立101个连接. 2)启用连接池 在连接字符串中加入代码 ...

  3. js 推断字符串是否包括某字符串

    var Cts = "bblText"; if(Cts.indexOf("Text") > 0 ) { alert('Cts中包括Text字符串'); } ...

  4. Codeforces Round #Pi (Div. 2) —— C-Geometric Progression

    题意: 如今有n个数,然后给出一个数k(代表的是等比数列中的那个公比),然后第二行给出n个数,代表的是这个序列. 最后的问题是叫你找出在这个序列中满足公比为k的三个数有几种.并输出方案总数. 思路: ...

  5. 20170322js面向对象

    <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8&quo ...

  6. java.lang.IllegalStateException: Can not perform this action after onSaveInstanceState问题解决

    (1)我用的是fragment,在onStop但是没有onDestroy的情况下切换(replace)fragment时报 java.lang.IllegalStateException: Can n ...

  7. Socket之shutdown()用法

    通常来说,socket是双向的,即数据是双向通信的.但有些时候,你会想在socket上实现单向的socket,即数据往一个方向传输. 单向的socket便称为半开放Socket.要实现半开放式,需要用 ...

  8. MessagePack 新型序列化反序列化方案

    进入在学习redis的时候,在文中看到了关于MessagePack的简介,发现非常有意思,于是就花了点时间大致了解了下. MessagePack介绍: MessagePack is an effici ...

  9. CentOS7 搭建Kafka（二）kafka篇

    CentOS7 搭建Kafka(二)kafka篇 前面我们说了zookeeper的搭建,zookeeper运行后就可以着手搭建kafka了. 必看 喜欢官方文档的请移步:[http://kafka.a ...

  10. Redis学习笔记（五）- 数据类型之set类型

    Redis 的set是string类型的无序集合.set元素最大可以包含(2的32次方-1)个元素.set的是通过hash table实现的,所以添加,删除,查找的复杂度都是O(1).hash tab ...