在選中複選框內填充詳細信息

當我選中任何複選框時，無論在選中的複選框內，它都會給出所有詳細信息的錯誤消息。在我的代碼中，如果我選擇第一個複選框，那麼它顯示一個文本框和一個下拉列表，希望進行驗證以填充文本框和下拉列表值，直到它不檢查另一個選項&與所有複選框相同。現在，我只將文本框和下拉列表僅用於第一個複選框，但它適用於每個複選框。簡而言之，除非我不填寫文本框的值和下拉值，否則不允許檢查下一個選項。我不知道要做什麼。任何人都可以請告訴我如何做到這一點。在選中複選框內填充詳細信息

<script> 
function validate() 
{ 
    document.getElementById("error").innerHTML="atleast check one checkbox."; 
    //alert(""); 
    var chk=document.getElementsByName("chkbox"); 
    var hasChecked = false; 
    for(var i=0; i<chk.length; i++) 
     { 
      if(chk[i].checked) 
      { 
       hasChecked= true; 

       break; 
      } 
     } 
return true; 
} 

function toggle(source) { 
    checkboxes = document.getElementsByName('a[]'); 
    for(var i=0, n=checkboxes.length;i<n;i++) 
    { 
    checkboxes[i].checked = source.checked; 
    } 
} 
</script> 
</head> 
<body> 
<form method="post" name="form"> 
<table> 
<tr><td><div id="error"></div></td></tr> 
<tr><td style="padding:10px;padding-top:0; padding-bottom:0" >1 .What does the scope of test include?</td></tr> 
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" value="a) selected 1"> &nbsp;&nbsp;&nbsp;a)select 1<br /><br /> 
Name : <input type="text" name="fname" /><br /><br /> 
Country : <select><option value="1">india</option><option value="2">usa</option></select> 
</td></tr> 
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" value="b) selected 2"/>&nbsp;&nbsp;&nbsp;b)select 2</td></tr> 
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" value="c)selected 3"/>&nbsp;&nbsp;&nbsp;c select 3</td></tr> 
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" value="d)selected 4"/>&nbsp;&nbsp;&nbsp;d)select 4</td></tr> 
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" onClick="toggle(this)" value="e)Or all of the above"/>&nbsp;&nbsp;&nbsp;e)Or all of the above </td></tr> 
</table> 
<input type="submit" onclick="validate()" name="submit" value="Submit" /> 
</form> 
</body> 
</html> 

<?php 
if(isset($_POST['submit'])) 
{ 
    [email protected]$_POST['a']; 

    $supplies = @implode(',',$_POST['a']); 
    echo $supplies; 
} 


?>

來源

2015-03-02 sandy sharma

對不起，它太混亂，請描述確切的問題 – 2015-03-02 08:59:51

你有這麼大的複選框，你可以顯示一個文本框和一個下拉菜單_在一個複選框_？ – Teemu 2015-03-02 09:01:02

我更新了我的問題，請檢查它。 @Arunprasanth KV – 2015-03-02 09:17:46

下面是解決方案：

<script> 
function validate() 
{ 
    var inputTags = document.getElementsByTagName('input'); 
    var checkboxCount = 0; 
    for (var i=0, length = inputTags.length; i<length; i++) { 
     if (inputTags[i].type == 'checkbox') { 
      if(inputTags[i].checked){ 
       checkboxCount++; 
      }  
     } 
    } 

    if(checkboxCount == 0){ 
     document.getElementById("error").innerHTML="atleast check one checkbox."; 
     return false; 
    }else{ 
     checkboxesahas = document.getElementsByClassName('aopt');   
     for(var i=0, n=checkboxesahas.length;i<n;i++) 
     { 
      if(checkboxesahas[i].checked){ 
       ahaselements = document.getElementsByClassName('ahaselement'); 
       for(var j=1;j<=ahaselements.length;j++) { 
       ahaselementid = 'ahaselement'+j; 
       if(document.getElementById(ahaselementid).value == ''){ 
        document.getElementById("error").innerHTML="value missing in one or more of checked checkbox element."; 
        return false;      
       } 
       } 
      } 
     }   
    } 
return true; 
} 

function toggle(source) { 
    checkboxes = document.getElementsByClassName('aopt'); 
    for(var i=0, n=checkboxes.length;i<n;i++) 
    { 
    checkboxes[i].checked = source.checked; 
    } 
} 
</script> 
</head> 
<body> 
<form method="post" name="form"> 
<table> 
<tr><td><div id="error"></div></td></tr> 
<tr><td style="padding:10px;padding-top:0; padding-bottom:0" >1 .What does the scope of test include?</td></tr> 
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" class="aopt" value="a) selected 1"> &nbsp;&nbsp;&nbsp;a)select 1<br /><br /> 
Name : <input type="text" name="fname" id="ahaselement1" class="ahaselement" /><br /><br /> 
Country : <select name="country" id="ahaselement2" class="ahaselement"><option value="">no</option><option value="1">india</option><option value="2">usa</option></select> 
</td></tr> 
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" class="aopt" value="b) selected 2"/>&nbsp;&nbsp;&nbsp;b)select 2</td></tr> 
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" class="aopt" value="c)selected 3"/>&nbsp;&nbsp;&nbsp;c select 3</td></tr> 
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" class="aopt" value="d)selected 4"/>&nbsp;&nbsp;&nbsp;d)select 4</td></tr> 
<tr><td style="padding-left:5%;padding-bottom:0"><input type="checkbox" name="a[]" class="aopt" onClick="toggle(this)" value="e)Or all of the above"/>&nbsp;&nbsp;&nbsp;e)Or all of the above </td></tr> 
</table> 
<input type="submit" onclick="return validate()" name="submit" value="Submit" /> 
</form> 
</body> 
</html> 

<?php 
if(isset($_POST['submit'])) 
{ 
    [email protected]$_POST['a']; 

    $supplies = @implode(',',$_POST['a']); 
    echo $supplies; 
} 


?>

PS：我在error ID通過innerHTML的一樣充滿驗證像你一樣。在複選框和其他元素中也有一些變化。請檢查一下。

讓我知道是否有任何問題。謝謝！ :)

來源

2015-03-02 10:24:09

哦，是的，它的工作。非常感謝你@Prashant Gadhvi – 2015-03-03 12:13:50

@sandysharma - My Pleasure Bro！ – 2015-03-04 10:24:50

在選中複選框內填充詳細信息

回答

相關問題