Meteor表单
文本输入
meteorApp/import/ui/meteorApp.html
<head>
<title>meteorApp</title>
</head> <body>
<div>
{{> myTemplate}}
</div>
</body> <template name = "myTemplate">
<form>
<input type = "text" name = "myForm">
<input type = "submit" value = "SUBMIT">
</form>
</template>
在JavaScript文件中,我们将创建 submit 事件。我们需要防止默认事件的行为以停止刷新浏览器。下一步,我们要使用输入字段的内容,并将其文本值赋值给变量 textValue 。 在这个例子中,我们只记录了内容输出到开发者控制台。最后一件事是明确的输入字段。
meteorApp/client/main.js
import { Template } from 'meteor/templating';
Template.myTemplate.events({
'submit form': function(event){
event.preventDefault();
var textValue = event.target.myForm.value;
console.log(textValue);
event.target.myForm.value = "";
}
});
当我们在输入栏中键入“一些文字...”,然后点击提交。控制台将记录下我们输入的文本。
meteorApp/import/ui/meteorApp.html
<head>
<title>meteorApp</title>
</head> <body>
<div>
{{> myTemplate}}
</div>
</body> <template name = "myTemplate">
<form>
<input type = "radio" name = "myForm" value = "form-1">FORM 1
<input type = "radio" name = "myForm" value = "form-2">FORM 2
<input type = "submit" value = "SUBMIT">
</form>
</template>
meteorApp/client/main.js
import { Template } from 'meteor/templating';
Template.myTemplate.events({
'submit form': function(event){
event.preventDefault();
var radioValue = event.target.myForm.value;
console.log(radioValue);
}
});
当我们提交的第一个按钮,控制台会显示以下输出。
Checkbox - 复选框
meteorApp/import/ui/meteorApp.html
<head>
<title>meteorApp</title>
</head> <body>
<div>
{{> myTemplate}}
</div>
</body> <template name = "myTemplate">
<form>
<input type = "checkbox" name = "myForm" value = "form-1">FORM 1
<input type = "checkbox" name = "myForm" value = "form-2">FORM 2
<input type = "submit" value = "SUBMIT">
</form>
</template>
meteorApp/client/main.js
Template.myTemplate.events({
'submit form': function(event){
event.preventDefault();
var checkboxValue1 = event.target.myForm[0].checked;
var checkboxValue2 = event.target.myForm[1].checked;
console.log(checkboxValue1);
console.log(checkboxValue2);
}
});
当提交表单,虽然它们未选中一个那么将会被记录为 false,如果有选中一个检查输入将被记录为 true 。
下拉选项
在这个例子中,我们将展示如何使用select元素。我们将使用更改事件,以每次变化更新数据的选项。
meteorApp/import/ui/meteorApp.html
<head>
<title>meteorApp</title>
</head> <body>
<div>
{{> myTemplate}}
</div>
</body> <template name = "myTemplate">
<select>
<option name = "myOption" value = "option-1">OPTION 1</option>
<option name = "myOption" value = "option-2">OPTION 2</option>
<option name = "myOption" value = "option-3">OPTION 3</option>
<option name = "myOption" value = "option-4">OPTION 4</option>
</select>
</template>
meteorApp/client/main.js
if (Meteor.isClient) { Template.myTemplate.events({
'change select': function(event){
event.preventDefault();
var selectValue = event.target.value;
console.log(selectValue);
}
}); }
Meteor表单的更多相关文章
- ASP.NET Aries 入门开发教程9:业务表单的开发
前言: 经过前面那么多篇的列表的介绍,终于到了大伙期待的表单开发了. 也是本系列的最后一篇文章了! 1:表单页面的权限设置与继承 对于表单页面,权限的设置有两种: 1:你可以选择添加菜单(设置为不显示 ...
- 探索ASP.NET MVC5系列之~~~3.视图篇(下)---包含常用表单和暴力解猜防御
其实任何资料里面的任何知识点都无所谓,都是不重要的,重要的是学习方法,自行摸索的过程(不妥之处欢迎指正) 汇总:http://www.cnblogs.com/dunitian/p/4822808.ht ...
- jQuery学习之路(8)- 表单验证插件-Validation
▓▓▓▓▓▓ 大致介绍 jQuery Validate 插件为表单提供了强大的验证功能,让客户端表单验证变得更简单,同时提供了大量的定制选项,满足应用程序各种需求.该插件捆绑了一套有用的验证方法,包括 ...
- jQuery学习之路(5)- 简单的表单应用
▓▓▓▓▓▓ 大致介绍 接下来的这几个博客是对前面所学知识的一个简单的应用,来加深理解 ▓▓▓▓▓▓ 单行文本框 只介绍一个简单的样式:获取和失去焦点改变样式 基本结构: <form actio ...
- 12、Struts2表单重复提交
什么是表单重复提交 表单的重复提交: 若刷新表单页面, 再提交表单不算重复提交. 在不刷新表单页面的前提下: 多次点击提交按钮 已经提交成功, 按 "回退" 之后, 再点击 &qu ...
- .net erp(办公oa)开发平台架构概要说明之表单设计器
背景:搭建一个适合公司erp业务的开发平台. 架构概要图: 表单设计开发部署示例图 表单设计开发部署示例说明1)每个开发人员可以自己部署表单设计至本地一份(当然也可以共用一套开发环境,但是如 ...
- javascript表单的Ajax 提交插件的使用
Ajax 提交插件 form.js 表单的下载地址:官方网站:http://malsup.com/jquery/form/ form.js 插件有两个核心方法:ajaxForm()和ajaxSubmi ...
- 玩转spring boot——AOP与表单验证
AOP在大多数的情况下的应用场景是:日志和验证.至于AOP的理论知识我就不做赘述.而AOP的通知类型有好几种,今天的例子我只选一个有代表意义的“环绕通知”来演示. 一.AOP入门 修改“pom.xml ...
- from表单提交数据之后,后台对象接受不到值
如果SSH框架下,前段页面通过from表单提交数据之后,在后台对象显示空值,也就是接收不到值得情况下.首先保证前段输入框有值,这个可以在提交的时候用jQuery的id或者name选择器alert弹出测 ...
随机推荐
- Android主题更换换肤
知识总览android主题换肤通常借助LayoutInflater#setFactory实现换肤. 换肤步骤: 通过解析外部的apk压缩文件,创建自定义的Resource对象去访问apk压缩文件的资源 ...
- c++:delete或free报错,语法正常。
#include <stdio.h> #include <iostream> int _tmain(int argc, _TCHAR* argv[]) { ]; memcpy( ...
- Cause: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Unknown error 1146
问题介绍: com.mysql.jdbc.exceptions.jdbc4.MySQLSyntaxErrorException: Unknown error 1146 MySql语法错误, 但是错 ...
- Properties类操作.properties配置文件方法总结
一.properties文件 Properties文件是java中很常用的一种配置文件,文件后缀为“.properties”,属文本文件,文件的内容格式是“键=值”的格式,可以用“#”作为注释,jav ...
- centos7 rsync+inotify软件实现集群服务的数据备份(二)
上一篇文章记录了怎么安装rsync以及怎么使用该服务备份数据,但是在集群中需要实时备份客户发过来的相关数据,这样在使用命令或者定时任务的方式执行备份, 就满足不了整个服务的需求了. inotify是一 ...
- HTML5新增的非主体元素header元素、footer元素、hgroup元素、adress元素
---恢复内容开始--- header header元素是一种具有引导和导航作用的结构元素,通常用来放置整个页面或页面内的一个内容区块的标题,但是也可以包含其他内容,例如数据表格.搜索表单或相关的lo ...
- perl学习之:use & require
相同: 都可以用来引用module(.PM). 不同: 1) 区别在于USE是在当前默认的@INC里面去寻找,一旦模块不在@INC中的话,用USE是不可以引入的,但是require可以指定路径: 2) ...
- c和c++如何把一个整数转化为string
c和c++如何把一个整数转化为string C++: 一.string转int的方式 采用最原始的string, 然后按照十进制的特点进行算术运算得到int,但是这种方式太麻烦,这里不介绍了. 采用标 ...
- Ubuntu16.04 搭建svn
1.安装SVN 安装前先更新一下 sudo apt-get update 接下来安装 sudo apt-get install subversion 2.创建SVN版本库 1.创建home下的svn文 ...
- Spring☞WebApplicationContext的继承关系
spring mvc里的root/child WebApplicationContext的继承关系 在传统的spring mvc程序里会有两个WebApplicationContext,一个是pare ...