javascript表单行为效果展示
效果如下
以上效果是在点击下一步的时候触发的效果显示
代码如下
////加工厂$(function() { $("#planttwo").click(function () { var memberId = $.cookie('Himall-User'); if (memberId) { var l = [getCount(), getJg(), getFalse('input[name="type0"]', 'span.ed0'), getFalse('input[name="type1"]', 'span.ed1'), getFalse('input[name="type3"]', 'span.ed3'), getFalse('input[name="type5"]', 'span.ed5')]; if (getJg() && getCount() && getFalse('input[name="type0"]', 'span.ed0') && getFalse('input[name="type1"]', 'span.ed1') && getFalse('input[name="type3"]', 'span.ed3') && getFalse('input[name="type5"]', 'span.ed5')) { var categoryId = $("#CategoryIds").val(); var categoryName = $("#CategoryName").val(); var fabric = $("#FabricCategory").val(); var minPrice = $("#MinPrice").val(); var maxPrice = $("#MaxPrice").val(); var processTypes = $("#ProcessTypes").val(); var processTypeInt = 1; if (processTypes == "清加工") { processTypeInt = 2; } var quantity = $("#Quantity").val(); var deliveryDate = $("#years").val(); var IsUrgent = 0; if ($("#IsUrgent").is(':checked')) { IsUrgent = 1; } location.href = "/Home/PlantTwo?categoryId=" + categoryId + "&categoryName=" + categoryName + "&fabric=" + fabric + "&minPrice=" + minPrice + "&maxPrice=" + maxPrice + "&processTypes=" + processTypes + "&quantity=" + quantity + "&deliveryDate=" + deliveryDate + "&IsUrgent=" + IsUrgent + "&processTypeInt=" + processTypeInt + ""; } } else { location.href = "/Login?returnUrl=%2FHome/Plant"; } }); var move = $('div#chebox2>.c3right>span') var hide = $('div#chebox2>.Fs') move.hover(function () { hide.show() }, function () { hide.hide() }); }); function getCount() { //数量 var a1 = $('.t4 .combobox1'); var span1 = $('span.ed4') if (a1.val() == '') { span1.html('不能为空').css({ 'color': 'red' }); return false; } else if (isNaN(a1.val())) { span1.html('不能为空').css({ 'color': 'red' }); a1.val('') return false; } else if (a1.val() < 1) { span1.html('不能为空').css({ 'color': 'red' }); return false; }else if(!(/(^[1-9]\d*$)/.test(a1.val()))){ span1.html('不能为空').css({ 'color': 'red' }); return false; } else if (a1.val() > 0) { span1.html(''); } else {; span1.html(''); } return true; } function getJg() { //价格区间 var a1 = $('.combobox1:eq(0)') var b1 = $('.combobox1:eq(1)') var span = $('span.ed2') if (a1.val() == '' || b1.val() == '') { span.html('不能为空').css({ 'color': 'red' }); return false; } else if (isNaN(a1.val()) || isNaN(b1.val())) { span.html('不能为空').css({ 'color': 'red' }); a1.val(''); b1.val(''); return false; } else if (a1.val() < 1 || b1.val() < 1) { span.html('不能为空').css({ 'color': 'red' }); return false; } else if (a1.val() < b1.val()) { span.html('') } else if (a1.val() > b1.val()) { span.html('不能为空').css({ 'color': 'red' }); return false; } else if (a1.val() == b1.val()) { span.html('不能为空').css({ 'color': 'red' }); return false; } else { span.html(''); } return true; } //其他情况下未选择或者未输入的数据时 function getFalse(a, b) { var a = $(a) var b = $(b) var t = true if (a.val() != '') { b.html(''); return true; } else { b.html('不能为空').css({ 'color': 'red' }) return false; } } //$(function () {// var move = $('div#chebox2>.c3right>span')// var hide = $('div#chebox2>.Fs')// move.hover(function () { hide.show() }, function () {// hide.hide()// }) // }) function getEvent(e) { //事件冒泡 var event = e || window.event; event.stopPropagation(); } function getHide(s) { //隐藏对应的标记 s.hide(); } $(function () { var itemcommbox = $('.Pdemand>form>#type div.t1 input[name="type1"]') var itemcomm = $('.itemcommbox') itemcommbox.click(function (e) { getEvent(e); itemcomm.show(); }); var itemcommU = $('.itemcommbox>.itemS>li'); itemcommU.on('click', function () { var index = $(this).html(); itemcommbox.val(index); itemcomm.hide(); }); $(document).click(function () { // getHide($('.itemcommbox')) getHide($('.item_C')) }); }); //加工类型 $(function () { var itemcommbox = $('.Pdemand>form>#type div.t21 input[name="type3"]') var itemcomm = $('.iterF') itemcommbox.click(function (e) { getEvent(e) itemcomm.show(); itemcomm.each(function () { $(this).height(this.scrollHeight) }); }); var itemcommU = $('.iterF>.itemS>li'); itemcommU.on('click', function () { var index = $(this).html(); itemcommbox.val(index); itemcomm.hide(); }); $(document).click(function () { // getHide($('.itemcommbox')) getHide($('.iterF')) }); }); $(function () { var box = $('.Pdemand>form>#type div.t0 input[name="type0"]') box.click(function (e) { getEvent(e); var cetegoryT = $('#cetegoryT') cetegoryT.show(); var catsub = $('.cat-sub') cetegoryT.mouseenter(function () { catsub.show(); }); catsub.mouseleave(function () { // catsub.hide(); }); }); $(document).click(function () { // getHide($('.itemcommbox')) getHide($('.cT')) }); }); /*选中之后,给父input*/ /*下拉选择*/ $(function () { var box = $('.Pdemand>form>#type div.t0 input[name="type0"]')//总父名称 var cetegoryT = $('div.cT-Name')//父名称 var childpage = $('.childpage dl>dt>a')//子名称 cetegoryT.hover(function () { var index = $(this).html(); childpage.click(function (e) { var child = $(this).html(); var astring = index + '>' + child; $("#CategoryIds").val($(this).attr("data-value-id")); box.val(astring) $('.cT').hide(); e.stopPropagation(); return false; }) }); }); $(function () { var cetegoryT = $('#cetegoryT>ul>li'); var childpage = $('.childpage'); cetegoryT.hover(function () { $(this).addClass('scurrent').siblings().removeClass('scurrent') var index = $(this).index(); childpage.hide(); $('.childpage:eq(' + index + ')').show(); }); });
javascript表单行为效果展示的更多相关文章
- javascript图片放大镜效果展示
javascript图片放大镜效果展示 <!DOCTYPE html> <html> <head lang="en"> <meta cha ...
- 推荐几款很棒的 JavaScript 表单美化和验证插件
表单元素让人爱恨交加.作为网页最重要的组成部分,表单几乎无处不在,从简单的邮件订阅.登陆注册到复杂的需要多页填写的信息提交功能,表单都让开发者花费了大量的时间和精力去处理,以期实现好用又漂亮的表单功能 ...
- JavaScript Table行定位效果
作者:cloudgamer 时间: 2009-09-17 文档类型:原创 来自:蓝色理想 第 1 页 JavaScript Table行定位效果 [1] 第 2 页 JavaScript Table行 ...
- 第一百二十二节,JavaScript表单处理
JavaScript表单处理 学习要点: 1.表单介绍 2.文本框脚本 3.选择框脚本 为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面. 一. ...
- Vue过渡和动画效果展示(案例、GIF动图演示、附源码)
前言 本篇随笔主要写了Vue过渡和动画基础.多个元素过渡和多个组件过渡,以及列表过渡的动画效果展示.详细案例分析.GIF动图演示.附源码地址获取. 作为自己对Vue过渡和动画效果知识的总结与笔记. 因 ...
- JavaScript表单处理(上)
为了分担服务器处理表单的压力,JavaScript提供了一些解决方案,从而大大打破了处处依赖服务器的局面. 发文不易,转载请亲注明出处,谢谢! 一.表单介绍 在HTML中,表单是由<form& ...
- 前端工具 - 15个最佳的 JavaScript 表单验证库
客户端验证在任何项目都是不够的,因为 JavaScript 可以直接忽略,人们可以提交请求到服务器. 然而这并不意味着客户端验证都没必要了,很多时候我们需要在用户提交到服务器之前给予提示.JavaSc ...
- CSS3-Hover 效果 展示
首先说说兼容性的问题吧,主要说说IE浏览器的兼容性.IE10+. 效果展示的css代码: .button { margin: .4em; padding: 1em; cursor: pointer; ...
- cvechecker 漏洞扫描工具部署及效果展示
cvechecker 漏洞扫描工具部署及效果展示 介绍 cvechecker的目标是通过扫描已安装的软件并将结果与CVE数据库进行匹配来报告系统上可能存在的漏洞. 官方提示: 可能会产生许多误报(漏洞 ...
随机推荐
- photoshop mac版下载及破解
1.下载 直接百度photoshop,就可以找到百度的下载源: 2.破解 http://zhidao.baidu.com/question/581955095.html
- asp.net 读取sql存储过程返回值
关于Exec返回值的问题有很多,在这做个简要的总结. 读查询语句示例: Declare @count int select @Count 要点: ...
- 说说oracle的 sysdate、trunc函数
SQL> select trunc(sysdate)+1/24+3 from dual; TRUNC(SYSDATE)+1/24-------------------2015-08-14 01: ...
- iOS开发之字典数据建立模型步骤
1. 在控制器属性的(questions)set方法中完成字典转模型的操作 - (NSArray *)questions { if (nil == _questions) { //1.加载plist文 ...
- IOS改变状态栏样式
1.状态栏高亮颜色 在info.plist中添加 View controller-based status bar appearance 设置为 "NO"在AppDelegate. ...
- 【USACO 1.4.2】时钟
[题目描述] 考虑将如此安排在一个 3 x 3 行列中的九个时钟: |-------| |-------| |-------| | | | | | | | |---O | |---O | | O | ...
- WebAPI下的如何实现参数绑定
本文将概述在WebAPI方式下将如何将参数绑定到一个action方法,包括参数是如何被读取,一系列规则决定特定环境采用的那种绑定方式,文章最后将给出一些实际的例子. Parameter binding ...
- nosql学习一
1.NoSQL,泛指非关系型的数据库.随着互联网web2.0网站的兴起,传统的关系数据库在应付web2.0网站,特别是超大规模和高并发的SNS类型的web2.0纯动态网站已经显得力不从心,暴露了很多难 ...
- C++11原子操作性能测试
测试结论是发现C++11原子操作在性能上,比以往用到的InterlockedIncrement或__sync_add_and_fetch性能上慢了1倍左右. 另外补充一点,在对原子变量进行比较的时候, ...
- ionic list item-radio checked
<div class="list"> <label class="item item-radio" ng-repeat="k in ...