用于禁用/启用动态生成的表单字段的函数

Question

I'm no javascript expert and i'm currently trying to create a function for a form that has the same fields repeated depending on a number selected on a previous page.

There could be between 1 and 10 rows of the form fields with each having a radio button selection that will enable/disable each row.

At the moment i've written something but having trouble with concatenating form field names and variable names.

Is anyone able to point me in the right direction please.

Javascript:

        var i = 1;
    var iChildren = 2; //could be any number - depends what user selected.

    function toggle(switchElement) {
        for (i = 1; i = iChildren; i++) {

            var frmSchoolSelected+i = document.getElementById('<%=c_' & i & '_selected.ClientID%>');
            var frmSchoolAge+i = document.getElementById('<%=c_' & i & '_type.ClientID%>');
            var frmSchoolType+i = document.getElementById('<%=c_' & i & '_type1.ClientID%>');
            var frmSchoolAdditional+i = document.getElementById('<%=c_' & i & '_additional.ClientID%>');

            if (switchElement.value == 'Yes') {
                frmSchoolSelected+i.disabled = false;
                frmSchoolAge+i.disabled = true;
                frmSchoolType+i.disabled = true;
                frmSchoolAdditional+i.disabled = true;
            }
            else {
                frmSchoolSelected+i.disabled = true;
                frmSchoolAge+i.disabled = false;
                frmSchoolType+i.disabled = false;
                frmSchoolAdditional+i.disabled = false;
            }
        }
    }

Thanks for any help.

J.

EDITED

Example of generated form HTML.

<form method="post" action="schoolingform.aspx" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'Button1')" id="form1">

    <table id="Table1" cellspacing="0" cellpadding="0" style="border-width:0px;border-collapse:collapse;">
        <tr>
            <td><strong>School Selected</strong></td>
            <td colspan="4"><span id="c_1_school_selected" onlick="javascript:toggle(this);">
                <input id="c_1_school_selected_0" type="radio" name="c_1_school_selected" value="Yes" />
                <label for="c_1_school_selected_0">Yes</label>
                <input id="c_1_school_selected_1" type="radio" name="c_1_school_selected" value="No" />
                <label for="c_1_school_selected_1">No</label>
                </span></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Child</th>
            <th style="border-right:1px solid #dddddd;">School Name</th>
            <th>School Type</th>
            <th>School Type</th>
            <th>Additional Information</th>
        </tr>
        <tr valign="top">
            <td><strong>Fred Wilkinson</strong></td>
            <td style="border-right:1px solid #dddddd;"><input name="c_1_selected" type="text" id="c_1_selected" disabled="disabled" class="aspNetDisabled" style="width:190px;" />
                <input type="hidden" name="c_1_id" id="c_1_id" value="22" /></td>
            <td><select name="c_1_type" id="c_1_type" disabled="disabled" class="aspNetDisabled">
                    <option selected="selected" value="Primary">Primary</option>
                    <option value="Secondary">Secondary</option>
                    <option value="Higher Education">Higher Education</option>
                </select></td>
            <td><select name="c_1_type1" id="c_1_type1" disabled="disabled" class="aspNetDisabled">
                    <option selected="selected" value="State">State</option>
                    <option value="Independent">Independent</option>
                </select></td>
            <td><textarea name="c_1_additional" rows="6" cols="30" id="c_1_additional" disabled="disabled" class="aspNetDisabled" style="width:190px;"></textarea></td>
        </tr>
        <tr>
            <td><strong>School Selected</strong></td>
            <td colspan="4"><span id="c_2_school_selected" onlick="javascript:toggle(this);">
                <input id="c_2_school_selected_0" type="radio" name="c_2_school_selected" value="Yes" />
                <label for="c_2_school_selected_0">Yes</label>
                <input id="c_2_school_selected_1" type="radio" name="c_2_school_selected" value="No" />
                <label for="c_2_school_selected_1">No</label>
                </span></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
        <tr>
            <th>Child</th>
            <th style="border-right:1px solid #dddddd;">School Name</th>
            <th>School Type</th>
            <th>School Type</th>
            <th>Additional Information</th>
        </tr>
        <tr valign="top">
            <td><strong>Sara Wilkinson</strong></td>
            <td style="border-right:1px solid #dddddd;"><input name="c_2_selected" type="text" id="c_2_selected" disabled="disabled" class="aspNetDisabled" style="width:190px;" />
            <input type="hidden" name="c_2_id" id="c_2_id" value="23" /></td>
            <td><select name="c_2_type" id="c_2_type" disabled="disabled" class="aspNetDisabled">
                    <option selected="selected" value="Primary">Primary</option>
                    <option value="Secondary">Secondary</option>
                    <option value="Higher Education">Higher Education</option>
                </select></td>
            <td><select name="c_2_type1" id="c_2_type1" disabled="disabled" class="aspNetDisabled">
                    <option selected="selected" value="State">State</option>
                    <option value="Independent">Independent</option>
                </select></td>
            <td><textarea name="c_2_additional" rows="6" cols="30" id="c_2_additional" disabled="disabled" class="aspNetDisabled" style="width:190px;"></textarea></td>
        </tr>
        <tr>
            <td align="right" colspan="5"></td>
        </tr>
    </table>
    <input type="hidden" name="iChild" id="iChild" value="2" />
    <input type="submit" name="Button1" value="Next" id="Button1" class="submitBtn" />

Answer 1

You are mixing .NET code and JavaScript code. Because .NET runs first, it will try to process the code as you have written it:

<%=c_' & i & '_selected.ClientID%>

and most likely generate an error message because that is invalid code.

A simpler solution might be to use a class name. Then with jQuery, you could condense all of your code into a single call:

$('.ClassName').toggle();

Answer 2

Illegal javascript syntax. You ARE mixing .net and JS
var frmSchoolSelected+i is not allowed.
Also your loop is assigning i instead of testing i (= versus ==)

try this

 function toggle(switchElement) {
   var clientId = '<%=c_1_selected.ClientID%>';
   var isYes = switchElement.value == 'Yes';
   for (var i=1; i==iChildren; i++) {
     var frmSchoolSelected = document.getElementById(clientId.replace('_1_selected','_'+i+'_selected'));
     var frmSchoolAge = document.getElementById(clientId.replace('_1_selected','_'+i+'_type'));
     var frmSchoolType = document.getElementById(clientId.replace('_1_selected','_'+i+'_type1'));
     var frmSchoolAdditional = document.getElementById(clientId.replace('_1_selected','_'+i+'_additional'));
     frmSchoolSelected.disabled = !isYes;
     frmSchoolAge.disabled = isYes;
     frmSchoolType.disabled = isYes;
     frmSchoolAdditional.disabled = isYes;
  }
}

Answer 3

A few notes on your approach.

• Be aware of how you're using this as it means different things in different contexts. In your case it would be better to pass in the index of the row you're toggling. Your server side code most likely knows what row it's currently generating so this should be easy to accomplish.
• As others pointed out, you are mixing client side and server side. In this case i is a client side variable that you're trying to use in a '<%=c_'... which is a server side context
• I'm not quite sure why you're putting a + into what should be a variable name, but using a plus sign as part of a variable name isn't legal in JavaScript
• switchElement in this case isn't a CheckboxList as you're expecting it to be, it's just an html span element and as such won't have a meaningful value property. You have to look at the actual input elements inside it and see if the yes element is checked (for example).

---

If you were to go with a JavaScript solution you would need code along these lines

    function toggle(i) {

        var schoolSelected = document.getElementById('c_' + i + '_school_selected_0').checked;

        // client side names of variables will be predictable so to an extent you can get away with
        // hard-coding them.  Not the best practice, but it'd work
        var frmSchoolSelected = document.getElementById('c_' + i + '_selected');
        var frmSchoolAge = document.getElementById('c_' + i + '_type');
        var frmSchoolType = document.getElementById('c_' + i + '_type1');
        var frmSchoolAdditional = document.getElementById('c_' + i + '_additional');

        // JavaScript, like some other languages lets you chain assignments like this
        frmSchoolSelected.disabled =
        frmSchoolAge.disabled = 
        frmSchoolType.disabled =
        frmSchoolAdditional.disabled = !schoolSelected;
    }

---

If you were to approach this from jQuery side I would suggest making a few changes to your HTML as well. Your output can be thought of as a list of mini-forms so instead of having one large table with different rows corresponding to different parts, create a list (or a table with a single column if you aren't ready to give up on table based layout quite yet).

New HTML

<ul>
    <li class="school1">
        <!-- school information form goes here -->
        ...
        <span id="c_1_school_selected" class="toggle" onclick='toggle("school1")'>
        ...
    </li>
    <li class="school2">
        <!-- school information form goes here -->
        ...
        <span id="c_1_school_selected" class="toggle" onclick='toggle("school2")'>
        ...
    </li>
    ...
</ul>

New code

function toggle(row) {

    var allInputs = $("#" + row + " :input")
                        .not(".toggle input:radio");

    var state = $(".toggle :checked").val();

    if (state == "Yes") {
        allInputs.removeAttr("disabled");
    } else {
        allInputs.attr("disabled", "disabled");
    }
}

There are two nice things about this approach:

1. You are no longer relying on knowing what the ClientID will be as you're dealing with input elements as input elements
2. You can now refactor this input form into some sort of a repeating control (like a ListView ) so if you decide you'd like to change how each row is formatted, it'll be very easy to do (since it'll all be in one place).

Answer 4

I got there eventually, once I had worked out how to add the onclick attribute to the input tag instead of the span tag I could then concentrate on the javascript function.

Code behind Adds onclick to input tag.

        Dim newRadioYes As New RadioButton
        newRadioYes.Text = "Yes"
        newRadioYes.ID = "c_" & childID & "_school_selected_0"
        newRadioYes.Attributes.Add("onclick", "javascript:toggle(this, " & childID & ");")
        newRadioYes.Attributes.Add("value", "Yes")
        newRadioYes.GroupName = "c_" & childID & "_school_selected"

        Dim newRadioNo As New RadioButton
        newRadioNo.Text = "No"
        newRadioNo.ID = "c_" & childID & "_school_selected_1"
        newRadioNo.Attributes.Add("onclick", "javascript:toggle(this, " & childID & ");")
        newRadioNo.Attributes.Add("value", "No")
        newRadioNo.GroupName = "c_" & childID & "_school_selected"

Generated HTML form

<form method="post" action="schoolingform.aspx" onkeypress="javascript:return WebForm_FireDefaultButton(event, 'Button1')" id="form1">
<table id="Table1" cellspacing="0" cellpadding="0" style="border-width:0px;border-collapse:collapse;">
    <tr>
        <td><strong>School Selected</strong></td>
        <td colspan="4"><input id="c_1_school_selected_0" type="radio" name="c_1_school_selected" value="Yes" onclick="javascript:toggle(this, 1);" />
            <label for="c_1_school_selected_0">Yes</label>
            <input id="c_1_school_selected_1" type="radio" name="c_1_school_selected" value="No" onclick="javascript:toggle(this, 1);" />
            <label for="c_1_school_selected_1">No</label></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>Child</th>
        <th style="border-right:1px solid #dddddd;">School Name</th>
        <th>School Type</th>
        <th>School Type</th>
        <th>Additional Information</th>
    </tr>
    <tr valign="top">
        <td><strong>Fred Wilkinson</strong></td>
        <td style="border-right:1px solid #dddddd;"><input name="c_1_selected" type="text" id="c_1_selected" disabled="disabled" class="aspNetDisabled" style="width:190px;" />
            <input type="hidden" name="c_1_id" id="c_1_id" value="26" /></td>
        <td><select name="c_1_type" id="c_1_type" disabled="disabled" class="aspNetDisabled">
                <option selected="selected" value="Primary">Primary</option>
                <option value="Secondary">Secondary</option>
                <option value="Higher Education">Higher Education</option>
            </select></td>
        <td><select name="c_1_type1" id="c_1_type1" disabled="disabled" class="aspNetDisabled">
                <option selected="selected" value="State">State</option>
                <option value="Independent">Independent</option>
            </select></td>
        <td><textarea name="c_1_additional" rows="6" cols="30" id="c_1_additional" disabled="disabled" class="aspNetDisabled" style="width:190px;"></textarea></td>
    </tr>
    <tr>
        <td><strong>School Selected</strong></td>
        <td colspan="4"><input id="c_2_school_selected_0" type="radio" name="c_2_school_selected" value="Yes" onclick="javascript:toggle(this, 2);" />
            <label for="c_2_school_selected_0">Yes</label>
            <input id="c_2_school_selected_1" type="radio" name="c_2_school_selected" value="No" onclick="javascript:toggle(this, 2);" />
            <label for="c_2_school_selected_1">No</label></td>
        <td></td>
        <td></td>
        <td></td>
    </tr>
    <tr>
        <th>Child</th>
        <th style="border-right:1px solid #dddddd;">School Name</th>
        <th>School Type</th>
        <th>School Type</th>
        <th>Additional Information</th>
    </tr>
    <tr valign="top">
        <td><strong>Sara Wilkinson</strong></td>
        <td style="border-right:1px solid #dddddd;"><input name="c_2_selected" type="text" id="c_2_selected" disabled="disabled" class="aspNetDisabled" style="width:190px;" />
            <input type="hidden" name="c_2_id" id="c_2_id" value="27" /></td>
        <td><select name="c_2_type" id="c_2_type" disabled="disabled" class="aspNetDisabled">
                <option selected="selected" value="Primary">Primary</option>
                <option value="Secondary">Secondary</option>
                <option value="Higher Education">Higher Education</option>
            </select></td>
        <td><select name="c_2_type1" id="c_2_type1" disabled="disabled" class="aspNetDisabled">
                <option selected="selected" value="State">State</option>
                <option value="Independent">Independent</option>
            </select></td>
        <td><textarea name="c_2_additional" rows="6" cols="30" id="c_2_additional" disabled="disabled" class="aspNetDisabled" style="width:190px;"></textarea></td>
    </tr>
    <tr>
        <td align="right" colspan="5"></td>
    </tr>
</table>
<input type="hidden" name="iChild" id="iChild" value="2" />
<input type="submit" name="Button1" value="Next" id="Button1" class="submitBtn" />

Javascript function

    function toggle(switchElement, childID) {

    var frmSelected = document.getElementsByName('c_' + childID + '_school_selected');

    var frmSchoolSelected = document.getElementById('c_' + childID + '_selected');
    var frmSchoolAge = document.getElementById('c_' + childID + '_type');
    var frmSchoolType = document.getElementById('c_' + childID + '_type1');
    var frmSchoolAdditional = document.getElementById('c_' + childID + '_additional');

    if (switchElement.value == 'Yes') {
        frmSchoolSelected.disabled = false;
        frmSchoolAge.disabled = true;
        frmSchoolType.disabled = true;
        frmSchoolAdditional.disabled = true;
    }
    else {
        frmSchoolSelected.disabled = true;
        frmSchoolAge.disabled = false;
        frmSchoolType.disabled = false;
        frmSchoolAdditional.disabled = false;
    }
}

Thanks to those who pointed me in the right direction, much appreciated.