JavaScript与 HTML表单的交互过程,想要学习动态网页但是无从下手的新手看看。

最近开始了 java  web的学习在学习中学到了很多有用的东西 比如说 html 表单如何 和 javascript进行交互的  读完本篇文章后相信初学者会有一个

清晰的理解 。。。  对应下面的代码看我写的问题   。

 

    其实表单的交互操作很简单  就是在 提交表单数据的时候调用一个   javascript  所写的函数 ,  注意看我下面所给的代码

 

 这一行    <form name="Form1"onSubmit=" return on_submit() ;"method="post" action="register.jsp" >     

 

注意看阴影地方 有一个 onSubmit 属性 这里将 这个属性设置为     return on_submit() ; 意思就是调用 on_submit() 函数  

 

这个函数就在 <script></script> 中定义        这就是表单提交的原理  ,注意我这里只是说表单整体的提交 ,  如果我们想要判断 表单中

的某个元素 例如   text 也就是文本框的内容是否为  空也就是 "" 那么可以这样 判断在我们 自己写的javascript 函数中 

<script language="javascript">
 function on_submit()
 {  
       
  if (Form1.user_name.value == "")            
  /*  这句就是检测文本区输入是否为空如果为空那么返回false 意思就是取消表单的提交注意表单元素name属性区分大小写一定不要写错   */
    {
     alert("用户名不能为空,请输入用户名!");
     return false;
    }

 }
 </script>

 

 

 

具体细节大同小异 ,基本上有一点html基础的 朋友 都能看懂这个交互的过程吧,,,,,希望能帮助 像我一样的新手 。。。写的不好 高手 不要喷我 

对于 html文件表单书写 以及事件的响应建议到 Dreamweaver中 书写    可以有事件提示可以更高效的写程序

<html>
 <script language="javascript">
 function on_submit()
 {  
       
  if (Form1.user_name.value == "")
    {
     alert("用户名不能为空,请输入用户名!");
     return false;
    }

 }
 </script>
 <head>
 <title>this  is my first  java script page</title>
 </head>
 <body>用户信息提交 
    <form name="Form1" onSubmit=" return on_submit() ;" method="post" action="register.jsp" >
   用户名:&nbsp;
     <input name="user_name" type="text" maxlength="255" >
     <br>
     密码: &nbsp;&nbsp;
     <input name="user_password" type="text" maxlength="255"   ><br>
     出生日期:<input name="year" size="3" maxlength="4" >年<select> 
     <option selected="selected"> 1</option>
     <option > 2</option>
     <option > 3</option>
     <option > 4</option>
     <option> 5</option>
     <option> 6</option>
     <option> 7</option>
     <option > 8</option>
     <option > 9</option>
     <option > 10</option>
     <option > 11</option>
     <option > 12</option>
     </select>月<input name="day" size="3" maxlength="4"> <br> 
     性别:&nbsp;&nbsp;&nbsp;&nbsp;<input type="radio" name="radio1" >男&nbsp;&nbsp;<input type="radio" name="radio2">女   <br>
     &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<input type="submit" name="button_sub" value="提  交"> &nbsp;<input type="reset" name="button_reset" value="重  置" >
 </form>
 </body>
 </html>

自己常用的js库和写的一个交互型可编辑表格: new BaseJs.EditTable({ // 表对象 table : BaseJs.$("tab"), // 从第几行第几列开始可编辑 start : [2, 1], // 到哪一行哪一列结束编辑 不写默认所有,写一个参数代表列,行不限 end : [], // 新增操作 addAction : { // (button)执行操作的按钮, button : BaseJs.$('add'), // callback:执行操作后的回调函数,能够加入一些自定义操作 callback : function(tr) { tr.onclick = function() { var trs = BaseJs.getByTagName("tr",BaseJs.$("tab")); for (var i = 0; i < trs.length; i++) { trs[i].style.background = '#FAFCFE'; } tr.style.background = '#B8CCF0'; } } }, // 保存新增或更新操作 saveOrUpdateAction : { button : BaseJs.$('save'), // 提交更新url,后台取参数data,为json字符串 url : 'saveOrUpdateActionUrl', //返回true执行保存操作 beforeCallback:function(data){ alert("提交给后台url:saveOrUpdateActionUrl?data="+BaseJs.encode(data)); return false; }, afterCallback : function(mo) { alert("提交修改后的数据:"+mo); //document.location.reload(); } }, // 删除操作 delAction : { button : BaseJs.$('delete'), // 删除url 可用函数返回动态url url : function() { return 'delActionUrl&mid=' + document.getElementById("mid").value; }, //返回true执行删除操作 beforeCallback:function(){ alert("提交给后台url:delActionUrl?sids="+document.getElementById("mid").value); return false; }, afterCallback : function() { document.location.reload(); } }, // id名(记录的id值需要保存在tr.id上) primaryKey : 'id', // 要全并的列数集合 [0]代表第一列要执行合并操作,[0,1]代表1,2列有合并操作 mergeColumn : [], // 列描述对象 ,包含一个数组,数组中每一个对象说明一个列编辑对象和相关处理 column : [ { name : 'year', // 选择型 editorType : 'select', // 加载select数据url,返回json数据,格式应为:[{display:'',value:''},{display:'',value:''}] dataUrl : 'WaterQualityAction?method=AjaxSelect&para=LEVEL', //可以动态返回 //dataUrl : function(me){ // return 'WaterQualityAction?method=AjaxSelect&para=LEVEL'; //}, //本地数据 有此选项时dataUrl无效 data:"[{display:'2005年',value:'2005'},{display:'2004年',value:'2004'},{display:'2003年',value:'2003'},{display:'2002年',value:'2002'},{display:'2001年',value:'2001'}]", // 新增默认值,不写使用默认 defaultValue : '2008年', // 检验输入数据正确性,返回true通过验证 validate : function(v, obj) { alert("现在检验输入数据合法性!"); return true; } }, { name : 'com', editorType : 'text', defaultValue : '请输入', validate : function(v, obj) { if (!/^[0-9]+$/.test(v)){alert("必须是数字");return false}; return true; } }, { name : 'cn', editorType : 'text', defaultValue : '请输入', validate : function(v, obj) { if (!/^[0-9]+$/.test(v)){alert("必须是数字");return false}; return true; } }, { name : 'date_month', // 日期型 editorType : 'date', // 格式化日期样式,默认yyyy-MM format : 'yyyy年MM月份', //自定义默认值 defaultValue : BaseJs.Utils.format .date(new Date(), 'yyyy年MM月份') }] });
自己常用的js库和写的一个交互型可编辑表格: BaseJs库的一点源码: /** * 自定义javascript常用基础库 author zhang_jhai 创建时间 2010/04/10 最后修改时间 2010/05/03 * version 2.0 */ // Base库基础类 BaseJs = function() { // 判断浏览器类型 userAgent = navigator.userAgent.toLowerCase(); check = function(r) { return r.test(userAgent); }; isOpera = check(/opera/); isIE = !isOpera && check(/msie/); isIE7 = isIE && check(/msie 7/); isIE8 = isIE && check(/msie 8/); isIE6 = isIE && !isIE7 && !isIE8; var base = { isIE : isIE, // 动态添加事件 addEvent : function(oTarget, sEventType, funName) { if (oTarget.addEventListener) { oTarget.addEventListener(sEventType.substring(2, sEventType.length), funName, false); } else if (oTarget.attachEvent) { oTarget.attachEvent(sEventType, funName); } else { oTarget[sEventType] = funName; } }, // 删除事件 removeEvent : function(oTarget, sEventType, funName) { if (oTarget.removeEventListener) { oTarget.removeEventListener(sEventType.substring(1, sEventType.length), funName, false); } else if (oTarget.detachEvent) { oTarget.detachEvent(sEventType, funName); } else { oTarget[sEventType] = null; } }, // 阻止事件冒泡行为 stopBubble : function(ev) { // 如果传入了事件参数,则说明不是ie浏览器 if (ev && ev.stopPropagation) { ev.stopPropagaton(); } else { window.event.cancelBubble = true; } }, // 阻止事件默认浏览器行为 stopDefault : function(ev) { // w3c标准 if (ev && ev.preventDefault) { ev.preventDefault(); } // ie window.event.returnValue = false; return false; }, ........................... ........................... 可编辑表格用法示例: var buttons = BaseJs.getByTagName("img"); for (var i=0;i -1){ add = buttons[i]; }else if(src.indexOf('del')>-1){ del = buttons[i]; }else if(src.indexOf('save')>-1){ save = buttons[i]; } } EidtTable = new BaseJs.EditTable({ /
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

UsherYue

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值