jquery构建功能型表单(二)

在构建功能型表单(一) 中介绍了一些适用于用户进行文本性输入的表单功能。

然而,有时候表单 中的内容也会以数字为主。

当处理作为表单内容的数字值时,也可以实现另外几种表单增强功能。

数字表单的典型代表就是购物车。在购物车表单中,应该允许用户更新购买的商品数量,同时,也要 为用户提供价格和总金额的数字反馈。

构建功能行表单(二)

1.在操作表单前 先为表格应用标准的行条纹效果,美化一下表格的外观

Js代码

var stripe = function(){
    $("#cart tbody tr:visible:even").removeClass("odd").addClass

("even");
    $("#cart tbody tr:visible:odd").removeClass("even").addClass

("odd");
}

2.拒绝非数字输入

通过javascript,可以检查用户输入的内容是否符合我们的要求,以便 在将表单发送到服务器之前对用户给出反馈,这种技术叫做输入掩码。

输入验证是根据某些有效输入 的标准来检查用户输入的过程。输入掩码会在用户填写内容的同时应用标准,并简单地禁止无效的按键操作。

比如,在这个购物车表单的例子中,必须在输入字段中填写数字。通过使用输入掩码验证,可以在这 些字段获得焦点时,让非数字按键操作不起作用

Js代码

$(".quantity input").keypress(function(event){
    if(event.charCode && (event.charCode < 48 || event.charCode > 57)){
        event.preventDefault();
    }
});

在这里我们要观察的是keypress事件,这个事件不提供keyCode属性,但提供了charCode属性。

调用preventDefault()方法会阻止浏览器响应相应的事件。

以上是小编为您精心准备的的内容,在的博客、问答、公众号、人物、课程等栏目也有的相关内容,欢迎继续使用右上角搜索按钮进行搜索表单
, 内容
, 数字
, 输入
, event
, 用户
js添加购物车效果
jquery 构建表单、表单构建器、bootstrap表单构建器、bootstrap 表单构建、jq 构建表单提交,以便于您获取更多的相关知识。

时间: 2016-10-16

jquery构建功能型表单(二)的相关文章

jquery构建功能型表单(一)

比较常见的表单验证功能 当在网站中使用jQuery时,我们必须时常提醒自己如果用户禁用了 JavaScript,那么页面看起来会怎样.功能是否还健全(当然,除非我们知道用户是谁,而且知道他们会怎样 配置浏览器).但是,这并不意味着我们不能为JavaScript的用户创建更美观或者功能更强大的网站.渐进增 强 的原则在JavaScript开发者中间如此流行,就是因为它在为多数人提供额外功能的同时,还能照顾到全体 用户的需求. 效果图如下: 如果我上面这个示例用户禁用了js,效果图如下: 此时内容结

jquery实现-JQUERY实现提交表单时的检测

问题描述 JQUERY实现提交表单时的检测 点击提交,验证表单中是否变更类型中有新建类型,如有新建类型的,检测是否上传模板文件,如果上传正常提交,如果没有上传,弹框提醒"请上传模版文件",提交失败. 解决方案 请参考这篇文章"jQuery插件之ajaxFileUpload",http://www.mskj.cc/article/100/204.htm 解决方案二: 这个和jquery没什么关系,都是要自己写js代码来实现检查 想偷懒就用jquery的validate

快速学习jQuery插件 Form表单插件使用方法_jquery

jQuery Form插件是一个优秀的Ajax表单插件,可以非常容易地.无侵入地升级HTML表单以支持Ajax.jQuery Form有两个核心方法 -- ajaxForm() 和 ajaxSubmit(), 它们集合了从控制表单元素到决定如何管理提交进程的功能.另外,插件还包括其他的一些方法: formToArray().formSerialize().fieldSerialize().fieldValue().clearForm().clearFields() 和 resetForm()等.

jquery 构造函数在表单提交过程中修改数据

  这篇文章主要介绍了jquery 构造函数在表单提交过程中修改数据的方法,十分简单实用,有需要的小伙伴可以参考下. 先贴代码 ? 1 2 3 4 5 6 7 <script type="text/javascript"> function appendText(){ var content = $("#textarea").val(); var new_content = content + "wap"; $("#text

Drupal7 form表单二次开发要点与实例

 这篇文章主要介绍了Drupal7 form表单二次开发要点与实例,解决了经常使用的Form表单提交后跳转问题,需要的朋友可以参考下 请记得收藏此文,在你进行Drupal 7 custom module时,经常会用到的form 表单的跳转或重载.   主要汇总三个要点:   1.页面提交后,经过#submit处理后,需要redirect 跳转到另外一个页面. 2.url路径中存在destination参数时,页面直接跳转到destination所指的url,无法控制的问题. 3.form表单如何

Jquery插件easyUi表单验证提交

 本篇文章主要是对Jquery插件easyUi表单验证提交的示例代码进行了介绍,需要的朋友可以过来参考下,希望对大家有所帮助  代码如下: <form id="myForm" method="post">   <table align="center" style="width:400px;height:auto;margin-top: 20px">            <tr>    

jquery提交form表单时禁止重复提交的方法

 这篇文章主要介绍了jquery提交form表单时禁止重复提交的方法,需要的朋友可以参考下    代码如下: $(document).ready(function() {   $('form').submit(function() {     if(typeof jQuery.data(this, "disabledOnSubmit") == 'undefined') {       jQuery.data(this, "disabledOnSubmit", { s

jquery序列化form表单使用ajax提交后处理返回的json数据

 这篇文章主要介绍了jquery序列化form表单,使用ajax提交后处理返回的json数据的示例,需要的朋友可以参考下 1.返回json字符串:    代码如下: /** 将一个字符串输出到浏览器 */     protected void writeJson(String json) {         PrintWriter pw = null;         try {             servletResponse.setContentType("text/plain;cha

jquery提交form表单简单示例分享

 这篇文章主要介绍了jquery提交form表单示例,需要的朋友可以参考下   代码如下: $.ajax({ url : 'deliveryWarrant/update.do', data : $('#myform').serialize(), type : "POST", success : function(data) { var res = eval('(' + data + ')'); if (res && res.success == true) {  ale