将jQuery数组值提交为隐藏输入

Question

按钮按下面的代码将显示一个消息，其中包含从所有复选框收集的值。但我想在提交时将这些值（由函数返回）作为隐藏输入。

<form action="script.php" method="post"> 
<input type="checkbox" name="chb1" value="html" />HTML<br/> 
<input type="checkbox" name="chb2" value="css" />CSS<br/> 
<input type="checkbox" name="chb3" value="javascript" />JavaScript<br/> 
<input type="checkbox" name="chb4" value="php" />php<br/> 
<input type="checkbox" name="chb5" value="python" />Python<br/> 
<input type="checkbox" name="chb6" value="net" />Net<br/> 
<input type="button" value="Click" id="btntest" /> 
</form> 

<script type="text/javascript"><!-- 
function getSelectedChbox(frm) { 
    var selchbox = [];   
    var inpfields = frm.getElementsByTagName('input'); 
    var nr_inpfields = inpfields.length; 
    for(var i=0; i<nr_inpfields; i++) { 
    if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) selchbox.push(inpfields[i].value); 
    } 
    return selchbox; 
} 


document.getElementById('btntest').onclick = function(){ 
    var selchb = getSelectedChbox(this.form); 
    alert(selchb); 
} 
//--> 

</script> 

Answer 1

我见过像你这样的人试图编码我的路由器接口，所以我会帮忙的。

1. 给你的表格一个id，因为你会需要它后来

   <form action="script.php" method="post" id="the_form"> 
   

2. 添加隐藏的输入形式

   <input type="hidden" name="values" id="values" value="" /> 
   

3. 形式按钮成熟的真实提交（惊人）

   <input type="submit" ... 
   

4. 你的“getSelectedChbox（）”功能是惊人的;不要改变任何东西，只是想给你一个祝贺，这是一个很棒的功能

5. 现在，它说document.getElementById('btntest').onclick - 摆脱所有，并添加此代码，而不是;这段代码将完成剩下的工作。

   document.getElementById('the_form').onsubmit = function(){ 
       var selchb = getSelectedChbox(this); 
       var values = selchb.join(', '); 
   
       if(!values.length){ 
        alert('There was an error. You have to select some checkboxes. '); 
        return false; 
       } 
   
       document.getElementById('values').value = values; 
       if(!confirm(" Are you interested in submitting this form now? If not, click accordingly. ")) 
        return false; 
   } 
   

---

或者干脆复制粘贴这整个事情在一个名为script.php文件：

<?php echo var_dump(isset($_POST['values']) ? $_POST['values'] : 'Submit first.'); ?> 

<form action="script.php" method="post" id="the_form"> 
    <input type="checkbox" name="chb1" value="html" />HTML<br/> 
    <input type="checkbox" name="chb2" value="css" />CSS<br/> 
    <input type="checkbox" name="chb3" value="javascript" />JavaScript<br/> 
    <input type="checkbox" name="chb4" value="php" />php<br/> 
    <input type="checkbox" name="chb5" value="python" />Python<br/> 
    <input type="checkbox" name="chb6" value="net" />Net<br/> 

    <input type="hidden" name="values" id="values" value="" /> 
    <input type="submit" value="Click" id="btntest" /> 

</form> 

<script type="text/javascript"><!-- 
function getSelectedChbox(frm) { 
    var selchbox = [];   
    var inpfields = frm.getElementsByTagName('input'); 
    var nr_inpfields = inpfields.length; 
    for(var i=0; i<nr_inpfields; i++) { 
     if(inpfields[i].type == 'checkbox' && inpfields[i].checked == true) 
      selchbox.push(inpfields[i].value); 
    } 
    return selchbox; 
} 


document.getElementById('the_form').onsubmit = function(){ 
    var selchb = getSelectedChbox(this); 
    var values = selchb.join(', '); 

    if(!values.length){ 
     alert('There was an error. You have to select some checkboxes. '); 
     return false; 
    } 

    document.getElementById('values').value = values; 
    if(!confirm(" Are you interested in submitting this form now? If not, click accordingly. ")) 
     return false; 
} 
//--> 

</script> 

玩得开心。