將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> 

玩得開心。