<%@ 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. CPU工作原理简图

  2. Java多线程之如何确定线程数

    关于多线程的线程数的确定,最近研读过几篇paper,在此做一下笔记,方便使用时翻看. 1.<Java 虚拟机并发编程>中介绍 就是说:线程数 =  CPU的核心数 * (1 - 阻塞系数) ...

  3. 洛谷 P1491 集合位置

    P1491 集合位置 题目描述 每次有大的活动,大家都要在一起“聚一聚”,不管是去好乐迪,还是避风塘,或者汤姆熊,大家都要玩的痛快.还记得心语和花儿在跳舞机上的激情与释放,还记得草草的投篮技艺是如此的 ...

  4. PHP array_intersect_ukey()

    定义和用法 array_intersect_ukey() 函数用回调函数比较键名来计算数组的交集. array_intersect_ukey() 返回一个数组,该数组包含了所有出现在 array1 中 ...

  5. T470 Win10下触摸板手势

    T470 Win10下触摸板手势 学习了:https://forum.51nb.com/thread-1742490-1-1.html 三指横向竟然是alt+tab 学习了:http://www.xi ...

  6. 创建hive整合hbase的表总结

    [Author]: kwu 创建hive整合hbase的表总结.例如以下两种方式: 1.创建hive表的同步创建hbase的表 CREATE TABLE stage.hbase_news_compan ...

  7. $().attr()的使用方法 &amp;&amp; $().html()与$().text()的差别

    <1>$().attr()的使用方法 </pre><pre class="html" name="code"><htm ...

  8. CSS3 网格布局(grid layout)基础知识 - 隐式网格自己主动布局(grid-auto-rows/grid-auto-columns/grid-auto-flow)

    网格模板(grid-template)属性及其普通写法(longhands)定义了一个固定数量的轨道.构成显式网格. 当网格项目定位在这些界限之外.网格容器通过添加隐式网格线生成隐式网格轨道. 这些隐 ...

  9. Extension Methods (C# Programming Guide)

    https://msdn.microsoft.com/en-us//library/bb383977.aspx private static void Dump(this ArraySegment&l ...

  10. Spring Boot 特性 —— SpringApplication

    转自:https://blog.csdn.net/cqdz_dj/article/details/52910317