Enabling text fields on an HTML form

I have a form with over 400 checkbox elements; it’s a list of journal titles where our users can check off titles that they would like our library to keep in our collection. Next to each title is a text field where the user can leave a brief comment as to why they want us to keep the journal subscription.

I would like the comment field next to the titles to be disabled until a checkbox is ticked next to a title. When a title is checked, the corresponding comments field will be enabled. This is to help ensure that a user can’t leave a comment by a title until they check the box.

I tried this code:

<tr><td><input type="checkbox" name="jtitle" onclick="undisableTxt()" value="Journal Title 1">Journal Title 1</td>
            <td><input type="text" id="comments" name="comments" size="30" maxlength="255" disabled></td></tr>

                        </table>
                   <input type="submit" value="Submit your feedback" />
                </form>
<script>
function undisableTxt() {
    document.getElementById("comments").disabled = false;
  }
</script>

This script fails in that whichever checkbox I tick, the first line becomes enabled. In any case it’s invalid HTML since you can’t have multiple occurrences of the same ID in a template.

So I changed the function to document.getElementsByName but now nothing happens at all when I check any of the boxes.

Can someone tell me the proper way to accomplish this?

FWIW, and I don’t think this should matter, the checkboxes are populated from a SQL query.

[[I assume you’re pulling the titles from a database.]] Nevermind… I just saw the last line of your post. :slight_smile: If you can, append the ‘currentRow’ of the output iteration to the ID. So the fourth record, the checkbox ID would be ‘jtitle4’ and the input ID would be ‘comments4’. Then, you can get the currentrow number of the checkbox and enable the comments input for that same number. RegEx would be good, I think. You can also do the function so that it will re-disable the comments input if the checkbox is unticked.

HTH,

:slight_smile:

Thanks, that’s helpful. I added

$row_id = $row[jid]; // where jid is the index column of the table

Then in the echo statement I have <input type="checkbox" id="jtitle$row_id" etc> and <input type="text" id="comments$row_id" etc>

However in the script statement I still have document.getElementById("comments").disabled = false;

So the function isn’t finding a match because they all have a number appended. How can I adjust the JS function?

Apply a class to all the checkboxes and then apply the disabled = false to the entire class. For example if you use ‘comments’ as the class instead of the id (since all the ids will be numbered) then you’d call

[].forEach.call(document.querySelectorAll('.comments'), function(el) {
el.disabled = false;
});

UPDATE: Minor edit… and another edit… should be checking ticked status of checkbox, first. AND, I’m changing the if/else to a switch statement.

You could send this.id as an argument to the function, parse the row from that, and apply disabled true/false based upon that.

In the checkbox, put: onclick="undisableTxt(this.id);"

function undisableTxt(thisID) {
    var thisRow = Number(thisID.match(/\d+$/g)[0]); // Gets number from end of id.
    // match returns an array - get the first position ([0]).
    var thisCkbx = document.getElementById("jtitle" + thisRow);
    var thisComment = document.getElementById("comments" + thisRow); 
    switch(!!thisCkbx.checked){
        case true:
            thisComment.disabled = false;
        break;
        default:
             thisComment.disabled = true;
        break;
        }
  }

If it doesn’t work with onclick, change it to onmouseup.

HTH,

:slight_smile:

It would be better to attach the function to the form rather than each individual form field and then use event delegation to apply it to the one that triggered the event.

Good idea - here’s a simple example that disables the comment fields when the checkbox is not checked, and even clears the appropriate comment when a checkbox is unchecked too.

2 Likes

Thank you, Paul_Wilkins, this solution works great! I appreciate your response very much.

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.