JQuery Checkbox with Textbox Validation

Posted by Volrath on Stack Overflow See other posts from Stack Overflow or by Volrath
Published on 2011-01-09T16:44:04Z Indexed on 2011/01/09 18:53 UTC
Read the original article Hit count: 156

Filed under:
|
|

I am using Jorn's validation plugin. I have a a group of checkboxes beside a group of textboxes. The textboxes are disabled by default and will enable when the matching checkbox is checked.

At least 1 checkbox has to be checked which is not a problem. However, when I check more than 2 checkboxes only 1 textbox validates. The form still submits even when the second checkbox is empty.

$count = 0;
while($row = mysql_fetch_array($rs))
{
?>
<tr>
 <td>
 <label>
 <input type="checkbox" name="tDays[]" id="tDays<?php echo $count; ?>" value="<?php echo $row['promoDayID'];?>" onClick="enableTxt();"
 <?php if((isset($arrTDays) && in_array_THours($row['promoDayID'], $arrTDays)) || (!empty($arrSelectedTHours) && in_array_THours($row['promoDayID'], $arrSelectedTHours))) { echo "checked='checked'"; }?> validate="required:true" />
 <?php echo $row['promoDay'];?>:
 </label>
 </td>
 <td align="right">
 <input type="textbox" size="45" style="font-size:12px" name="tHours[]" id="tHours<?php echo $count; ?>"
 <?php if(isset($arrTDays) && in_array_THours($row['promoDayID'], $arrTDays)) { echo "value='" .getHours($row['promoDayID'], $arrTDays) ."'"; } elseif (!empty($arrSelectedTHours) && in_array_THours($row['promoDayID'], $arrSelectedTHours)) { echo "value='" .getHours($row['promoDayID'], $arrSelectedTHours). "'"; } else { echo "value='' disabled='disabled'"; }?> class="required" />
 <label for="tHours[]" class="error" id="tHourserror<?php echo $count; ?>">Please enter the Trading Hour.</label>
 </td>
</tr>

<?php

$count++; }//while ?>

This is done using javascript:

function enableTxt() {
    for (i = 0; i <= 7; i++) {
        if (document.getElementById("tDays" + i) != null && document.getElementById("tDays" + i).checked == true) {
            document.getElementById('tHours' + i).disabled = false;
            document.getElementById('tHourserror' + i).style.visibility = "visible";
        } else if (document.getElementById("tDays" + i) != null) {
            document.getElementById('tHours' + i).disabled = "disabled";
            document.getElementById('tHours' + i).value = "";
            document.getElementById('tHourserror' + i).style.visibility = "hidden";
        }
    }
} 

Please kindly advise in detail as to how this problem can be solved. I am fairly weak in JQuery.

© Stack Overflow or respective owner

Related posts about php

Related posts about JavaScript