精华内容
下载资源
问答
  • 当前页面有一个查询框,当该input框按下回车键时,希望默认走查询方法,从列表中查询符合条件的成员,但是浏览器默认的情况下,在input框按下回车键,会触发表单提交(保存按钮)。 解决思路: 阻止表单上按下回车...

    需求描述:

    当前页面有一个查询框,当该input框按下回车键时,希望默认走查询方法,从列表中查询符合条件的成员,但是浏览器默认的情况下,在input框按下回车键,会触发表单提交(保存按钮)。
    在这里插入图片描述

    解决思路:

    1. 阻止表单上按下回车键时自动提交;
    2. 给input框绑定事件,指定当按下回车键时触发查询;

    实现代码

    <form id="search_form" class="form-horizontal clearfix" role="form" method="post">
        <div class="col-sm-7 form-group">
            <label class="col-xs-4 control-label">姓名</label>
            <div class="col-xs-8">
                <input type="text" class="form-control" name="name" onkeydown="gosearch(event);" autocomplete="off"/>
            </div>
        </div>
        <div class="col-sm-5 form-group text-right">
            <div class="col-xs-12">
                <a class="btn btn-info" href="javascript:submitSearchForm()"><i class="fa fa-search"></i>查询</a>
                <a class="btn btn-default" href="javascript:resetForm('search_form')"><i
                        class="fa fa-undo"></i>重置</a>
            </div>
        </div>
    </form>
    
    1. 阻止表单上按下回车键时自动提交;
    function init() {
        function keydownFn(e) {
            if(e.which===13){
                e.preventDefault();
            }
        }
        var $f = document.getElementById('search_form');
        $f.addEventListener('keydown', keydownFn);
    }
    init();
    
    2. 给input框绑定事件,指定当按下回车键时触发查询;
    function gosearch(e) {
        var evt = window.event || e;
        if (evt.keyCode == 13){
             //回车事件
           submitSearchForm();
        }
    }
    
    function submitSearchForm(){
        var params = $("#search_form").serializeJSON();
        $("#user_table").datagrid("load", params);
    }
    
    展开全文
  • Angular的特点即为数据绑定,利用angular这特点,可以减少传统表单提交获取表单数据繁琐的dom操作。 方法:form里的每个表单控件绑定angular对象:使用ng-model &lt;form name="envForm" ...

    Angular的特点即为数据绑定,利用angular这一特点,可以减少传统表单提交获取表单数据繁琐的dom操作。

    方法:给form里的每个表单控件绑定angular对象:使用ng-model

     <form name="envForm" novalidate>
                    <div >
                        <div class="row">
                             <div class="col-xs-offset-1 col-xs-4">
                                 <div class="form-group" ng-class="error.newItem.environmentName?'':'has-error'">
                                     <label class="control-label">环境名称
                                         <input type="text" class="form-control" ng-model="env.newItem.environmentName" ></label>
                                 </div>
                             </div>
    
                             <div class="col-xs-offset-2 col-xs-4" style="height:74px">
                             		
                             	<div class="form-group">
                                    <label class="control-label">项目名称
    	                                    <div class="dropdown" style="height:33px">
    						                    <input class="btn btn-default dropdown-toggle" ng-model="env.newItem.projectKey" 
    						                            id="newPageDropdownMenu" data-toggle="dropdown" aria-haspopup="true"
    						                            aria-expanded="true" style="width: 270px" readonly/>
    						                     <span class="caret" style="margin-left: 247px;margin-top: -55px"></span>
    						                    <ul class="dropdown-menu" aria-labelledby="newPageDropdownMenu">
    						                    	<li ng-repeat="x in configs"><a href="javascript:void(0)" ng-click="selectAndFill(x.constName)">{{x.constName}}</a></li>
    						                    </ul>
    					              		 </div>
                                      </label>
    
                                 </div>
                             </div>
                       </div>
                       
    				   <div class="row">
                             <div class="col-xs-offset-1 col-xs-4">
                                 <div class="form-group">
                                     <label>svn地址
                                         <input type="text" class="form-control" ng-model="env.newItem.svnAddress" id="svnAddress" name="svnAddress"></label>
                                 </div>
                             </div>
    
                             <div class="col-xs-offset-2 col-xs-4">
                                 <div class="form-group">
                                     <label>入口地址
                                         <input type="text" class="form-control" ng-model="env.newItem.entryAddress" id="entryAddress" name="entryAddress" ></label>
                                 </div>
                             </div>
                       </div>
                       
                        <div class="row">
                        	<div class="col-xs-offset-1 col-xs-4">
                                    <div class="form-group">
                                        <label>运行jdk
                                            <input type="text" class="form-control" ng-model="env.newItem.jdkVersion" id="jdkVersion" name="jdkVersion"></label>
                                    </div>
                                </div>
                                <div class="col-xs-offset-2 col-xs-4">
                                    <div class="form-group">
                                        <label>数据库地址
                                            <input type="text" class="form-control" ng-model="env.newItem.dbAddress" id="dbAddress" name="dbAddress"></label>
                                    </div>
                                </div>
                        </div>
    					<div class="row">
    						 <div class="col-xs-offset-1 col-xs-4">
                                    <div class="form-group">
                                        <label>容器版本
                                            <input type="text" class="form-control" ng-model="env.newItem.containerVersion" id="containerVersion" name="containerVersion"></label>
                                    </div>
                              </div>
    						   
                                <div class=" col-xs-offset-2 col-xs-4">
                                    <div class="form-group">
                                        <label>debug端口号
                                            <input type="text" class="form-control" ng-model="env.newItem.debugPortId" id="debugPortId" name="debugPortId"></label>
                                    </div>
                                </div>
    					</div>
                                
                        <div class="row">
                        	 <div class="col-xs-offset-1 col-xs-4">
                                    <div class="form-group">
                                        <label>Profile端口号
                                            <input type="text" class="form-control" ng-model="env.newItem.profilePort" id="profilePort" name="profilePort"></label>
                                    </div>
                                </div>
                                
    						 <div class="col-xs-offset-2 col-xs-4">
                                    <div class="form-group">
                                        <label>run端口号
                                            <input type="text" class="form-control" ng-model="env.newItem.runPort" id="runPort" name="runPort" ></label>
                                    </div>
                              </div>
    						
                                
                        </div>
                         
                          <div class="row">
    
                             <div class="col-xs-offset-1 col-xs-4">
                                    <div class="form-group">
                                        <label>jvm参数
                                            <input type="text" class="form-control" ng-model="env.newItem.jvmParams" id="jvmParams" name="jvmParams" placeholder="-xms,-xmx,年轻代,持久代"></label>
                                    </div>
                             </div>
                        </div>   
                            
                        </div>
                    
                    </form>

    然后在js代码里将其初始化:

    var myApp=angular.module("App",[]);
    	    myApp.controller('pannelCtrl',['$scope',"$http",function ($scope,$http) {
    
            $scope.env={
    	    		newItem:{
    	    			environmentName:'',// 环境名
    	    			projectKey:'----请选择----',// 所属项目
    	    			containerVersion:'',// 容器版本
    	    			debugPortId:'',
    	    			jdkVersion:'',
    	    			entryAddress:'',
    	    			dbAddress:'',
    	    			jvmParams:'',
    	    			profilePort:'',
    	    			runPort:'',
    	    			svnAddress:''
    	    	}}
    }])// ng-module 结束标签

    在提交表单的点击事件里添加如下代码:使用ajax请求传输json数据

    $.ajax({
    	url : 'saveEnv',
    	type : "POST",
    	data :$scope.env.newItem,
    	dataType : "JSON",
            success : function(data) {
    	    //do something....				
    	 });

     

    展开全文
  • .prevent 表示提交以后不刷新页面,阻止表单提交的默认行为,不要用默认提交,用我们的ajax新方法去提交表单内容。 <template> <div class="about"> <h1>新建分类</h1>

    视频教程:https://www.bilibili.com/video/BV1A4411Y7fi?p=5

    上一次做到category,这次记录一下
    @submit.native.prevent
    .native 表示对一个组件绑定系统原生事件
    .prevent 表示提交以后不刷新页面,阻止表单提交的默认行为,不要用默认提交,用我们给的ajax新方法去提交表单内容。

    <template>
      <div class="about">
        <h1>新建分类</h1>
        <el-form-item label-width="120px" @submit.native.prevent="save">
          <el-form-item label="名称">
          <el-input v-model="model.name"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" native-type="submit">保存</el-button>
        </el-form-item>
      </div>
    </template>
    
    <script >
    export default {
      data(){
        return{
          model:{}
        }
      }
    }
    </script>
    
    

    要使用axios,新建一个http.js引入
    npm install vue-axios --save
    在这里插入图片描述在这里插入图片描述

    import aixos from 'axios'
    const http = axios.create({
      baseURL:'http://localhost:3000/admin/api'
    })
    
    export default http;
    

    导入到main.js入口中,挂载到vue原型上,之后就可以使用$http在任意位置访问接口。
    在这里插入图片描述
    然后就能在组件中直接引用了,目前还没有写后台的提交方法,所以先空着。
    在这里插入图片描述
    报错记录:
    vue.runtime.esm.js?2b0e:619 [Vue warn]: Injection “elForm” not found
    1、
    原因:在使用< el-form-item>标签时,外层没有加< el-form>,导致出现报错
    修改后:
    在这里插入图片描述
    界面目前长这样:
    在这里插入图片描述

    展开全文
  • 基于vue.js这里写了一个小列子;涉及到 vue.js动态添加css样式 ,tab切换 ,touch,表单提交,验证,toast...1.先整个div绑定 v-bind &lt;div class="rz-notice" v-bind:style="{ display: ...

     

    基于vue.js这里写了一个小列子;涉及到 vue.js动态添加css样式 ,tab切换 ,touch,表单提交,验证,toast,数据双向绑定等。

    先上效果图再一一讲解:

     

    一、首先用到的是动态修改css

    点击X将隐藏温馨提示:

    1.先给整个div绑定 v-bind

    <div class="rz-notice" v-bind:style="{ display: isno}">
                <p>名片用来鉴别是相关人员,温馨提示:<img src="../assets/static/img-icon/lan_cha.png" @click="hiddenwords"></p>
      </div>

    注释:图片地址为你自己的地址 

    <div class="rz-notice" v-bind:style="{ display: isno}">
        <p>名片用来鉴别是相关人员,温馨提示:
         <img src="../assets/static/imgicon/lan_cha.png" @click="hiddenwords"></p>
    </div>

    2.在data里定义

    isno:'block',:

    3.写click事件方法

    methods: {
          hiddenwords() {
            this.isno = 'none'
            },
    
    }

    一个简单的点击设置样式为none便写好了。

    根据你的业务需求写你动态添加的样式;方法都是一样的。

    二、下面写提交时最常见验证

    Toast样式 我根据自己的主题色进行了修改

    Toast引入import { Toast } from 'vant'

    2.1 这里涉及到了v-modal 数据双向绑定

    <div class="my-content-list">
    	<div class="color-black"><span style="margin-right: 0.6rem;">
         真实姓名:</span><input v-model="yoursname" placeholder="请输入您的真实姓名" /></div>
    </div>
    <div class="my-content-list">
    	<div class="color-black"><span style="margin-right: 0.6rem;">手机号码:</span>
        <input v-model="yoursphone" placeholder="请输入您的手机号码" /></div>
    </div>
    <div class="yzbtn" @click="submitBtn">立即认证</div>

    2.2在data定义 yoursname和yoursphone的初始值

    yoursname: '   ',
    yoursphone: '   ',

     

    2.3写方法z

    submitBtn() {
    	var reg = /^1[3|4|5|8][0-9]\d{4,8}$/;
    	if(this.yoursname == '') {
    	Toast("请填写你的真实姓名");
    	return;
    	}
    	if(this.yoursphone == '' || this.yoursphone == null) {
    	Toast("请填写你的手机号码");
    	return;
    	}
        if(!reg.test(this.yoursphone)) {
    	Toast('手机号码格式不正确');
    	return;
    	}
    },

    图片上传以及预览图片将在下一篇文章中讲到 每周都会更新一些小列子以及插件方法

    最后附上整个代码

    欢迎提出你宝贵的意见 一同进步 

    ​
    <template>
    	<div class="renzheng">
    		<div class="rz-notice" v-bind:style="{ display: isno}">
    			<p>名片用来鉴别是相关人员,温馨提示:<img src="../assets/static/img-icon/lan_cha.png" @click="hiddenwords"></p>
    		</div>
    		<van-tabs v-model="active" swipeable>
    			<van-tab v-for="(item,index) in navArr" :title="item.name" class="v-tab">
    				<div v-if="index==0">
    					<div class="color-black" style="text-align: center;margin-top: 0.4rem;">请上传本人名片照片</div>
    					<div class="rz-picter">
    						<img src="../assets/jia.jpg" />
    						<p><input type="file"  style="display: none;" >上传图片</p>
    					</div>
    					<div class="cuxian"></div>
    
    					<!--
                        	作者:1150801771@qq.com
                        	时间:2018-08-24
                        	描述:form表单
                         -->
                   
    					<div class="my-content-list">
    						<div class="color-black"><span style="margin-right: 0.6rem;">真实姓名:</span><input v-model="yoursname" placeholder="请输入您的真实姓名" /></div>
    					</div>
    					<div class="my-content-list">
    						<div class="color-black"><span style="margin-right: 0.6rem;">手机号码:</span><input v-model="yoursphone" placeholder="请输入您的手机号码" /></div>
    					</div>
    					<div class="yzbtn" @click="submitBtn">
    						立即认证
    					</div>
    				</div>
    				<div v-if="index==1">
    
    					<div class="color-black" style="text-align: center;margin-top: 0.4rem;">请上传本人身份证照片</div>
    					<div class="rz-picter">
    						<img src="../assets/jia.jpg" />
    						<p>上传人像页</p>
    					</div>
    					<div class="rz-picter">
    						<img src="../assets/jia.jpg" />
    						<p>上传国辉页</p>
    					</div>
    					<div class="cuxian"></div>
    					<div class="my-content-list">
    						<div class="color-black"><span style="margin-right: 0.6rem;">真实姓名:</span><input placeholder="请输入您的真实姓名" /></div>
    					</div>
    					<div class="my-content-list">
    						<div class="color-black"><span style="margin-right: 0.6rem;">手机号码:</span><input type="number" placeholder="请输入您的手机号码" /></div>
    					</div>
    					<div class="yzbtn">
    						立即认证
    					</div>
    				</div>
    			</van-tab>
    		</van-tabs>
    
    	</div>
    </template>
    
    <script>
        import { Tab, Tabs } from 'vant';
    	import { Toast } from 'vant'
    	export default {
    		name: 'renzheng',
    		data() {
    			return {
    				yoursname: '',
    				yoursphone: '',
    			
    				isno:'block',
    				active: 0,
    				navArr: [{
    						name: "身份认证"
    					},
    					{
    						name: "实名认证"
    					}
    				],
    
    			}
    		},
    		methods: {
    			hiddenwords() {
    				this.isno = 'none'
     			},
    			submitBtn() {
    				var reg = /^1[3|4|5|8][0-9]\d{4,8}$/;
    				if(this.yoursname == '') {
    					Toast("请填写你的真实姓名");
    					return;
    				}
    				if(this.yoursphone == '' || this.yoursphone == null) {
    					Toast("请填写你的手机号码");
    					return;
    				}
    				if(!reg.test(this.yoursphone)) {
    					Toast('手机号码格式不正确');
    					return;
    				}
    			},
    			
    		}
    	}
    </script>
    
    <style>
    	.rz-notice {
    		padding: 0.2rem 0.3rem;
    		display: flex;
    		flex-direction: row;
    		justify-content: space-between;
    		align-items: center;
    		background: #F0F5FB;
    		color: #28D9EF;
    	}
    	
    	.rz-notice img {
    		height: 0.22rem;
    		width: 0.22rem;
    	}
    	
    	.rz-picter {
    		height: 3rem;
    		width: 6rem;
    		margin: 0.3rem auto;
    		border: 0.01rem solid #ededed;
    		display: flex;
    		flex-direction: column;
    		align-items: center;
    		justify-content: center;
    	}
    
    	/*立即验证*/
    	
    	.yzbtn {
    		width: 90%;
    		height: 0.8rem;
    		background: #FF6600;
    		border-radius: 0.06rem;
    		margin: 30px auto;
    		text-align: center;
    		line-height: 0.8rem;
    		color: #FFFFFF
    	}
    	/*修改原有tab样式*/
    	
    	.van-tab {
    		color: #A3A3A3!important;
    	}
    	
    	.van-tab--active {
    		color: #000!important;
    	}
    	
    	.van-tabs__line {
    		background-color: #FF6600!important;
    		width: 0.7rem!important;
    		text-align: center!important;
    		align-items: center;
    		margin-left: 1.5rem;
    	}
    	
    	.van-toast {
    		background-color: #FF6600;
    		color: #FFFFFF
    	}
    	
    	.my-content-list {
    		padding: 0.3rem;
    		display: flex;
    		flex-direction: row;
    		justify-content: space-between;
    		border-bottom: 0.01rem solid #EDEDED;
    	}
    </style>
    
    ​

     

    展开全文
  • 在实现一个点击div就向后端发送一个请求的功能时,将div的onclick事件绑定事件写在js中,在js中调用一个form的提交(submit)方法。 在设置form.action(路径)时,如果设置form的method-get,不可以通过action中?...
  • 应用场景: ...这校验中,最关键的问题在于如何el-form-item 动态绑定prop。 :prop=”‘tableData.’ + scope.$index + ‘.字段名'” 方法: <div class=app-container> <el-table-colum
  • 应用场景: 在实际使用中经常会遇到需要...这校验中,最关键的问题在于如何el-form-item 动态绑定prop。 :prop="'tableData.' + scope.$index + '.字段名'" 方法: <template> <div class="app-con...
  • 注册绑定事件之后,需要URL部分只是 location.href得到的是整个链接 ,将跳转的页面内容赋给div ,使用定时器倒计时实现时间的变化。 手机短信的倒计时 案例分析:获取URL参数数据 数据在不同页面的相互传递 1、第...
  • 刚自学jQuery进行表单验证 就第一个用户名就失败了 按钮提交后直接就跳转了  <code><!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <...
  • --我们做了优化,现在要使一个Asp.net的按钮能够AJAX提交,你不需要做任何设置(PageManager的属性EnableAjax为true即可,这是默认属性)。 +PageManager的实例方法AddAjaxUpdateControl改名为...
  •  每一个页面顶部都存在一个搜索输入框,用户通过输入模糊的商品信息,后台数据库通过查询过滤相关的商品信息,并且显示出来用户查看,显示出来的商品点击之后可以显示商品的详细信息。 2.1.5 发布商品  用户...
  • ExtAspNet_v2.3.2_dll

    2010-09-29 14:37:08
    -修正extjs最新版本(v3.2.2)中的一个bug,如果下拉列表中存在两个相同的Text,则SelectedValue返回值永远是第一个Text的值(feedback:ben.zhou)。 -应用补丁#6593, #6621(feedback:vbelyaev)。 +修正IE7下Grid分页...
  • 6.5 从一个下拉列表往另一个下拉列表添加内容 6.6 改变列表项的上下顺序 6.7 下拉框数据分组 6.8 获取列表框的选择 6.9 类IE下拉框 6.10 下拉框式邮件发送 6.11 获取多选框的选择项 6.12 手动调整的列表框 6.13 ...
  • 循环弹出窗口:页面打开时同时弹出一个窗口,在同一窗口内循环显示广告位中的正常广告,这样,每刷新一次就会在弹出窗口中更替显示一个新的广告条 只需后台修改广告即可更新广告;可设置广告过期时间,通用于站内...
  • 3.3 把静态参数传递给一个动作 41 3.4 ActionSupport类 41 3.5 结果 42 3.5.1 Chain 43 3.5.2 Dispatcher 44 3.5.3 FreeMarker 44 3.5.4 HttpHeader 44 3.5.5 Redirect 45 3.5.6 Redirect Action 46 3.5.7 ...
  • 12.1.3 建立一个表单并添加XHTML 控件 557 12.1.4 从表单提交数据 562 12.1.5 使用、和 <label> 565 12.1.6 XForms 566 12.2 解决方案 567 12.2.1 ─建立XHTML表单 567 12.2.2 ─建立 按钮 570 12.2.3 ─建立 复选...
  • 同时 qiankun 是一个开放式微前端架构,支持当前三大前端框架甚至 jq 等其他项目无缝接入。 此项目为了尽可能的简单易上手,以及方便文章讲解,大部分逻辑都在主应用和子应用的 main.js 来回施展, 实际项目应用可...
  • ASP.NET的网页代码模型及生命周期

    热门讨论 2009-07-28 14:22:11
    当创建对象完成,生成创建对象后的代码并生成一个ASPX页面代码,该页面代码反馈IIS,IIS再反馈成HTML页面的形式客户端。 4.3 代码隐藏页模型的事件驱动处理 在传统的ASP开发中,ASP的事件都是按照网页的顺序来...
  • //ajax的post方式提交表单 //$("#itemAddForm").serialize()将表单序列号为key-value形式的字符串 $.post("/item/save",$("#itemAddForm").serialize(), function(data){ if(data.status == 200){ ...
  • 解答学生问题--一个ip绑定多个域名 8-19 2.php运行过程时序图 php书写规范 8-19 3.php基本语法介绍 php数据类型介绍 8-19 4.整型细节说明 8-19 5.布尔细节 浮点数细节 字符串细节 算术运算符① 8-19 6.算术运算符② ...
  • 解答学生问题--一个ip绑定多个域名 8-19 2.php运行过程时序图 php书写规范 8-19 3.php基本语法介绍 php数据类型介绍 8-19 4.整型细节说明 8-19 5.布尔细节 浮点数细节 字符串细节 算术运算符① 8-19 6.算术运算符② ...
  • 解答学生问题--一个ip绑定多个域名 8-19 2.php运行过程时序图 php书写规范 8-19 3.php基本语法介绍 php数据类型介绍 8-19 4.整型细节说明 8-19 5.布尔细节 浮点数细节 字符串细节 算术运算符① 8-19 6.算术运算符② ...

空空如也

空空如也

1 2
收藏数 22
精华内容 8
关键字:

给一个div绑定提交表单