HTML如何在提交之前驗證數組中的任何複選框

以下是HTML/PHP代碼，其中我需要在提交表單之前驗證5中的任何複選框。HTML如何在提交之前驗證數組中的任何複選框

function checkAddress(checkbox) 
 
{ 
 
    if (checkbox.checked) 
 
    { 
 
document.frmUser.action = "edit_user.php"; 
 
document.frmUser.submit(); 
 
    } 
 

 
else {alert("checkbox");} 
 
}

<!DOCTYPE html> 
 
<head> 
 
<meta charset="utf-8"> 
 
<title>Details Form</title> 
 
<script language="javascript" type="text/javascript"> 
 

 
function checkAddress(checkbox) 
 
{ 
 
    if (checkbox.checked) 
 
    { 
 
document.frmUser.action = "edit_user.php"; 
 
document.frmUser.submit(); 
 
    } 
 

 
else {alert("checkbox");} 
 
} 
 
</script>  
 
</head> 
 

 
<body> 
 

 
<div class="form-style-1"> 
 
<form name="frmUser" method="post" action=""> 
 
<?php 
 
i=0; 
 
while(i=5){ 
 
?> 
 
<input type="checkbox" name="users[]" value="<?php echo i; ?>" > 
 
<input type="button" name="update" class="button" value="Update" onClick="checkAddress(this);" /> 
 
<?php 
 
$i++;} 
 
?> 
 
</form></div></body></html>

來源

2016-09-13 Prayag

你的意思是你要測試檢查的複選框的至少一個，如果不能阻止提交？ – nnnnnn

'while（i = 5）'是什麼？一個條件永遠不會這樣。它被稱爲'while（i <= 5）'。 –

是的，至少有一個複選框被選中，如果不阻止提交？ – Prayag

我認爲你正在嘗試做這個

function checkAddress(checkbox) { 
 
    if (checkbox.checked) { 
 
    document.frmUser.action = "edit_user.php"; 
 
    //document.frmUser.submit(); 
 
    } else { 
 
    document.frmUser.action = "#"; 
 
    alert("checkbox"); 
 
    } 
 
}

<div class="form-style-1"> 
 
    <form name="frmUser" method="post" action=""> 
 
    <?php $i=0; while($i<=5){ ?> 
 
    <input type="checkbox" name="users[]" onClick="checkAddress(this);" value="<?php echo $i; ?>"> 
 

 
    <?php $i++;} ?> 
 
    <input type="submit" name="update" class="button" value="Update" /> 
 
    </form> 
 
</div>

代碼中的一些錯誤

同時表示變量i
你正在服用的button的while循環中，因此也與重複你沒有使用$複選框。

來源

2016-09-13 07:39:16

是我的更新代碼。它工作得很好!! ..謝謝你們幫助我。 – Prayag

您從按鈕調用onClick="checkAddress(this);"，所以this指按鈕，不一個複選框，這樣的話在你的函數checkbox.checked如果按鈕是正在測試檢查 - 這顯然永遠不會。

爲了測試至少一個複選框是否被選中，你可以通過他們循環輪流測試他們，但你也可以做到在一個步驟如下：

if (document.querySelector('form[name="frmUser"] input[name="users[]"]:checked')) { 
    // at least one is checked 
}

的.querySelector() method返回第一個匹配元素（這是在if測試中使用的真值），或者如果未找到匹配元素（這是在if測試中使用的錯誤值），則返回null。

（如果頁面只有一個形式與一組複選框，那麼你可以簡化選擇喜歡的東西.querySelector(':checked')，但我認爲這是最好要明確你要測試的項目。）

在上下文：

function checkAddress() 
 
{ 
 
    if (document.querySelector('form[name="frmUser"] input[name="users[]"]:checked')) { 
 
     alert("Success! (form would be submitted here)"); 
 
     //document.frmUser.action = "edit_user.php"; 
 
     //document.frmUser.submit(); 
 
    } else { 
 
     alert("You must select at least one checkbox"); 
 
    } 
 
}

<div class="form-style-1"> 
 
<form name="frmUser" method="post" action=""> 
 
<input type="checkbox" name="users[]" value="1" > 
 
<input type="checkbox" name="users[]" value="2" > 
 
<input type="checkbox" name="users[]" value="3" > 
 
<input type="checkbox" name="users[]" value="4" > 
 
<input type="checkbox" name="users[]" value="5" > 
 
<input type="button" name="update" class="button" value="Update" onClick="checkAddress();" /> 
 
</form> 
 
</div>

來源

2016-09-13 07:36:51 nnnnnn

有與發佈的代碼另一個問題 - 變量i沒有正確定義〜它應該是$i

而不是直接分配功能的按鈕，你可以創建一個事件偵聽這樣。

<!DOCTYPE html> 
<html> 
    <head> 
     <meta charset="utf-8"> 
     <title>Details Form</title> 
     <script language="javascript" type="text/javascript"> 
      function validate(e){ 
       var form=e.target.parentNode; 
       var col=form.querySelectorAll('input[type="checkbox"]'); 
       var checked=[]; 
       if(col)for(var n in col)if(col[n].nodeType==1){ 
        if(col[n].checked) checked.push(col[n].name); 
       } 
       if(checked.length > 0){ 
        form.action='edit_user.php'; 
        form.submit(); 
       } else { 
        alert('You MUST tick at least one checkbox'); 
       } 
      } 
      function bindEvents(){ 
       var bttn=document.forms['frmUser'].querySelectorAll('input[type="button"]')[0]; 
        bttn.addEventListener('click', validate, false); 
      } 
      document.addEventListener('DOMContentLoaded', bindEvents, false); 
     </script>  
    </head> 
    <body> 
     <div class="form-style-1"> 
      <form name="frmUser" method="post" action=""> 
      <?php 
       $i=0; 
       while($i <= 5){ 
        echo "<input type='checkbox' name='users[]' value='{$i}' >"; 
        $i++; 
       } 
       echo "<input type='button' name='update' class='button' value='Update' />"; 
      ?> 
      </form> 
     </div> 
    </body> 
</html>

來源

2016-09-13 07:42:51 RamRaider

<html> 
 
<head> 
 
<script language="javascript" type="text/javascript"> 
 
function checkAddress() 
 
{ 
 
    if (document.querySelector('form[name="frmUser"] input[type="checkbox"]:checked')) { 
 
     alert("Success! (form would be submitted here)"); 
 
     //document.frmUser.action = "edit_user.php"; 
 
     //document.frmUser.submit(); 
 
    } else { 
 
     alert("You must select at least one checkbox"); 
 
    } 
 
} 
 
</script>  
 
</head> 
 

 
<body> 
 

 
<div class="form-style-1"> 
 
<form name="frmUser" method="post" action=""> 
 
<?php 
 
$i=0; 
 
while($i<=5){ 
 
?> 
 
<input type="checkbox" name="users[]" value="<?php echo $i; ?>" > 
 
<input type="button" name="update" class="button" value="Update" onClick="checkAddress(this);" /> 
 
<?php 
 
$i++;} 
 
?> 
 
</form></div></body></html>

來源

2016-09-13 07:51:29 Prayag

這是我的更新代碼。 – Prayag

HTML如何在提交之前驗證數組中的任何複選框

回答

相關問題