常用的JavaScript或jQuery对form表单的操作代码总结

常用的JavaScript或jQuery对form表单的操作代码总结

cokonet 发表于2010-11-07 03:00 浏览(285) 评论(0) 分类：技术交流      举报

(转载，仅供交流)

1.javascript去空格

function trim(text) {   
    return (text || "").replace(/^s+|s+$/g, "");   
}
2.检查复选框是否选值

     var count=document.form.role.length;
   var j=0;
   for(var i=0;i<count;i++)
   {
    if (document.form.role[i].checked)
   ++j;
   }
   if(j==0)
   {
   alert("请选择角色"); return false;
   }

3.使按钮变灰
<INPUT   TYPE="button"   value="变灰"   name=button   onclick="javascript:aa.disabled=true;bb.disabled=true;">  
<INPUT   TYPE="button"   value="变亮"   name=button   onclick="javascript:aa.disabled=false;bb.disabled=false;">

循环变灰或变亮（bu1为按钮id）
    function   turndisable(){  
      bu1.disabled   =   !bu1.disabled;
    }  
4.js往空白的select列表框中添加值

//select 添加

//obj1 为用于输入添加值的input域id， obj2 为空白的多选列表框id
function funAdd(obj1,obj2){
   var objLeft=document.getElementById(obj1);
   var obj=trim(objLeft.value);
   if(obj==""){
   alert("不能添加空值");
   return false;
   }
   var objRight=document.getElementById(obj2);
     var value=new Option(obj,obj);
     objRight.options[objRight.length]=_value;
          objLeft.value="";  
   }
//selsect 删除
   function funDelete(obj){
   var objRight=document.getElementById(obj);
        for(var i=0;i<objRight.length;i++){
            if(objRight[i].selected==true){
                objRight.options.remove(objRight.selectedIndex);
            }
        }
    }

5.js控制的多选列表框提交值到后台（即上面4的空白select添加完值后，提交）。

//此JavaScript为提交两个select（id分别是phonelist，phonelist1）多选列表框
function addList(){
    
var list=document.getElementById('list');

   var phonelist=document.getElementById('phonelist');
  
   var phonelist1=document.getElementById('phonelist1');
   var html='';
  
   for(var i=0;i<phonelist.length;i++){
    html+='<input type="hidden" value="'+phonelist[i].value+'" name="phone" />';
   }
   for(var j=0;j<phonelist1.length;j++){
    html+='<input type="hidden" value="'+phonelist1[j].value+'" name="black" />';
   }
    //list为div层的id
   list.innerHTML=html;
  
   document.form1.action="pew.do?method=ModifyPaw";
   document.form1.submit();
   
}   

6.多选列表框，把左边列表中的值，转移到右边的空白多选列表框然后提交
把左边的列表值转移到右边的JavaScript为

// obj1 ,obj2为左右select多选列表框id

//添加
function funAdd(obj1,obj2){
   var objLeft=document.getElementById(obj1);
   var objRight=document.getElementById(obj2);
   for(var i=0;i<objLeft.length;i++){
    if(objLeft[i].selected==true){
     //alert(objLeft[i].value);
     var value=new Option(objLeft[i].text,objLeft[i].value);
  
     objRight.options[objRight.length]=_value;
                objLeft.options.remove(objLeft.selectedIndex);
    }
   }
    }
    //移除
    function funDelete(obj1,obj2){
        var objLeft=document.getElementById(obj1);
   var objRight=document.getElementById(obj2);
        for(var i=0;i<objRight.length;i++){
            if(objRight[i].selected==true){
                var _value =new Option(objRight[i].text,objRight[i].value);
                objLeft.options[objLeft.length]=_value;
                objRight.options.remove(objRight.selectedIndex);
            }
        }
    }
    //全部移除
    function AllDelete(obj1,obj2){
        var objLeft=document.getElementById(obj1);
   var objRight=document.getElementById(obj2);
        for(var i=0;i<objRight.length;i++){
             var _value =new Option(objRight[i].text,objRight[i].value);
             objLeft.options[objLeft.length]=_value;
        }
        objRight.innerHTML="";
    }
    //全部加入
    function AllAdd(obj1,obj2){
        var objLeft=document.getElementById(obj1);
        var objRight =document.getElementById(obj2);
        for(var i=0;i<objLeft.length;i++){
             var _value =new Option(objLeft[i].text,objLeft[i].value);
             objRight.options[objRight.length]=_value;
        }
        objLeft.innerHTML="";
    }
7. Ajax 从后台提取信息 把值放入到select多选列表框中

//ajax提取修改信息；

     function updateShow(id){
   
    $.ajax({
    url:'${pageContext.request.contextPath}/pew.do?method=ajaxGetPaw',
     type:'post',
     dataType:'xml',
     data:'pewid='+id,
     error:function(json){
        alert( "数据读取错误!");
      },
     success: function(xml){
    
     /× *******************赋值到禁播电话select中去***************************/
      
      $("＃phonelist1").html("");
      
          //取到xml phone集合
          var objRight=document.getElementById('phonelist1');
        
          $(xml).find("black").each(function(){
             var value=new Option($(this).text(),$(this).text());
        objRight.options[objRight.length]=_value;
            });
         
     
         
          /× ***************赋值到黑名单select中去*******************/
          $("＃phonelist").html("");
              var objRight1=document.getElementById('phonelist');
          $(xml).find("phone").each(function(){
             var value=new Option($(this).text(),$(this).text());
        objRight1.options[objRight1.length]=_value;
            });
      
  

      }
    });
   }
8.JavaScript 或jQuery 取值赋值例子 总结

      //input 域赋值
       $("＃company").val('${company}');       
   //从XML中取值
     $(xml).find("code").text()
   //html标签赋值    code为<td id="code"></td>
    $("＃code").html($(xml).find("code").text());
   
   //往一个td标签中替换值 name为参数
   document.getElementById('namej').innerHTML=name;  
   attr text
  

  
9.jQuery Ajax提交
function showFileInfo(id){
    $.ajax({
    url:'${pageContext.request.contextPath}/user.do?method=getFileInFo',
     type:'post',
     dataType:'xml',
     data:'id='+id,
     error:function(json){
        alert( "没有选择档案号!");
      },
     success: function(xml){
      $(xml).find("name").each(function(){
      var id=$(this).attr("id");
      var name=$(this).text();
            });
           
     
      //往HTML标签中赋空值  
         $("＃eName").html("");   
      //往HTML标签中追加值
     
        $("＃eName").append($(xml).find("cName").text());
    
       
     }}
     )}    

10.Ajax提交form表单 需引入jquery.form.js

             $(function(){
   $("＃sub").click(function(){
   $("＃form").attr("action","${pageContext.request.contextPath}/user.do?method=toModifyUserArchiveRight");
               if(addList()==false){
               return false;
               }
     $("＃form").submit();
    });
    $("＃form").submit(function(){
     $(this).ajaxSubmit({
      type:"post",
      clearForm:true,
      success:showResponse
     });
     return false;
    });
    function showResponse(responseText, statusText){
     if(statusText){
      alert("操作成功！");
     }
     else{
      alert("操作失败！");
     }
    }
   });         
11.给单选框赋值
         var state =document.form1.state
              for(var i =0;i<state.length;i++ ){
             if(state[i].value==$(xml).find("state").text()){
              state[i].checked=true;
               }
             }
         
     $("＃state option[value='${state1}']").attr("selected","selected");
  
12.给复选框赋值
          var role=document.form1.role
            for (var k = 0; k< role.length; k++){
               role[k].checked=false;
               }
       $(xml).find("role").each(function(l){

            for (var i = 0; i < role.length; i++){
           
               if(role[i].value==$(this).text()){
              
               role[i].checked=true;
               }
             }
        })     
12.给下拉菜单赋值与取值

//赋值
$("＃statis1 option[value='company']").attr("selected","selected");
//取值
$('＃statis1 option:selected').val();

$('＃statis1 option:selected').text();

//取消下拉菜单中其中一个值
$("＃statis1 option[value='company']").remove();
13.判断页面中是否有某个DOM对象

if(typeof(eval(document.getElementsByName('ersuser')))== "undefined")  
        {  
            alert("没有这个对象");
            return false;
        }