AJAX表单用POST方式提交Checkbox复选框

<form action="submit.php" onsubmit="sendPostRequest(); return false;"  
  method="post" encType="multipart/form-data"> 
  <input type="checkbox" name="values[]" value="1" >post1<br> 
  <input type="checkbox" name="values[]" value="2" >post2<br> 
  <input type="checkbox" name="values[]" value="3" >post3<br> 
  <input id="submit" type="submit" value="Submit" name="submit"> 
  </form>
上面的form要无刷新提交表单,服务器端的$_POST['values']只有选中项的值,但用sendPostRequest()提交,不管是否选中选项,$_POST['values]永远包含所有选项的值。
既然AJAX总是提交所有选项的值,那就把选项的值默认设为空,当选中的时候再赋值,就能保证服务器端只接收到选中项的值了。
方法是用一个函数来设置选项的值,把选项的值先保存在alt属性中,当选中时再把值赋值给value就可以了。
<form action="submit.php" onsubmit="sendPostRequest(); return false;"  
  method="post" encType="multipart/form-data"> 
  <input type="checkbox" name="values[]" value="" alt="1" onclick="checkboxValue(this);">post1<br> 
  <input type="checkbox" name="values[]" value="" alt="2" onclick="checkboxValue(this);">post2<br> 
  <input type="checkbox" name="values[]" value="" alt="3" onclick="checkboxValue(this);">post3<br> 
  <input id="submit" type="submit" value="Submit" name="submit"> 
  </form> 
<script language="JavaScript"> 
    function checkboxValue(obj) 
    { 
     if(obj.checked) 
     { 
      obj.value = obj.alt; 
     } 
     else 
     { 
      obj.value = ""; 
     } 
    } 
    </script>

JavaScript页面,post.js保存文件
function createXMLHttp() 
    { 
     var xmlhttp = false; 
     try 
     { 
      xmlhttp = new ActiveXObject("Msxml2.XMLHTTP"); 
     } 
     catch (e) 
      { 
      try 
      { 
       xmlhttp = new ActiveXObject("Microsoft.XMLHTTP"); 
      } 
      catch (E) 
      { 
       xmlhttp = false; 
      } 
     } 

     if (!xmlhttp && typeof XMLHttpRequest != 'undefined') 
     { 
      xmlhttp = new XMLHttpRequest(); 
     } 

     return xmlhttp; 
    } 

    function getRequestBody(oForm) 
    { 
     var aParams = new Array(); 

     for (var i=0 ; i < oForm.elements.length; i++) 
     { 
      var sParam = encodeURIComponent(oForm.elements[i].name); 
      sParam += "="; 
      sParam += encodeURIComponent(oForm.elements[i].value); 
      aParams.push(sParam); 
     } 

     return aParams.join("&"); 
    } 

    function sendPostRequest() 
    { 
     var oForm = document.forms[0]; 
     var sBody = getRequestBody(oForm); 

     var xmlhttp = createXMLHttp(); 
     xmlhttp.open("POST", oForm.action, true); 

     xmlhttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded"); 

     xmlhttp.onreadystatechange = function() 
     { 
      if (xmlhttp.readyState == 4) 
      { 
       if (xmlhttp.status == 200) 
       { 
        // success 
       } 
       else 
       { 
        // failed 
       } 
      } 
     }; 

     xmlhttp.send(sBody); 
    }

这样就可以实现无刷新,就可以把表单的值提交
  • 下载列表

目前有 2 条评论

avatar

游客  2016-03-18 18:03 2楼

谢谢你,问题解决了,真的非常感谢!!! 回复
avatar

cb  2012-12-04 14:42 1楼

checkboxValue()应该用在哪里也说一下啊 回复
昵称
邮箱
主页
提交
订阅