您当前的位置： 首页 > 学无止境 > JS经典实例 网站首页JS经典实例

disabled的灵活应用,js添加属性

发布时间：2015-04-28 19:26:03编辑：雪饮阅读（）

 每次使用dede的自定义表单做医院的网站在线预约都是比较麻烦的事情，今天就遇到了一个。如果要提交信息的字段都只是普通的input元素字段还好，可是有时候会有单选框字段的提交这样一来就比较麻烦。首先提交本身没有问题，关键是提交到mail.php后会直接将不想要的多余的信息提交过来。默认我们是将提交信息用js添加前缀方便咨询职位的同事们便于查看。可是加入单选框后再添加前缀就比较麻烦了。以前我的处理办法是：先将单选框独立出来不在表单之内用绝对定位欺骗客户的眼睛，当客户提交信息时将这个独立的元素值赋予一个隐藏的表单元素然后提交。

上面的思路虽然可行，但在使用绝对定位时会出现诸多问题。下面分享下雪饮个人博客的处理办法：

<script>

var list=new Array();

list[0]="姓名";

list[1]="手机";

list[2]="性别";

list[3]="咨询内容";

function check(){

var obj=document.getElementsByName("sex");

for(var i=0;i<obj.length; i++){

if(obj[i].checked){var jxb=obj[i].value;document.getElementById("l2").value=jxb;var bdys=document.getElementById("l2").value;obj[i].setAttribute("disabled","disabled");}

}

for(i in list){document.getElementById("l"+i).value=list[i]+" : "+document.getElementById("l"+i).value;}

return true;

}

</script>

 

  <form name="mail" action="/plus/mail.php" method="post" onsubmit="return check()">

 

    <table width="100%" border="0" cellpadding="0" cellspacing="0">

 

      <tr>

 

        <th width="30%">姓&nbsp;&nbsp;&nbsp;&nbsp;名：</th>

 

        <td width="70%"><input type="text" id="l0" name="0" class="alltxt" />

 

          &nbsp;<span class="fColor-red">*</span></td>

 

      </tr>

 

      <tr>

 

        <th>手&nbsp;&nbsp;&nbsp;&nbsp;机：</th>

 

        <td><input type="text" id="l1" name="1" class="alltxt" />

 

          &nbsp;<span class="fColor-red">*</span></td>

 

      </tr>

 

      <tr>

 

        <th>性&nbsp;&nbsp;&nbsp;&nbsp;别：</th>

 

<input type="hidden" id="l2" name="2" class="alltxt"  />

        <td id="dxk"><input type="radio" name="sex" id="sex_01" value="男"/>

 

          &nbsp;男&nbsp;&nbsp;

 

          <input name="sex" type="radio" id="sex_02" value="女"/>

 

          &nbsp;女 </td>

 

      </tr>     

 

      <tr>

 

        <th valign="top">咨询内容：</th>

 

        <td><textarea  cols="20" rows="4" class="alltxt" id="l3" name="3"></textarea></td>

 

      </tr>

 

      <tr>

 

        <th></th>

 

        <td><input type="submit" name="sub" id="submit" class="GryGrt" value="提交"/>

 

        </td>

 

      </tr>

 

    </table>

 

  </form>

以上为处理的核心源码，主要思路是：我们将单选框仍然处于表单之内，在提交之前先用js将单选框的值赋予一个普通input中，然后将单选框增加一个disabled属性，该属性可以禁止表单提交当前元素值于后端，接下来只需要对所有的普通input元素进行添加前缀即可。这里主要运用了js给html元素添加属性的方法setAttribute。