функция для отключения / включения динамически генерируемых полей формы - PullRequest
0 голосов
/ 09 мая 2011

Я не эксперт по javascript, и в настоящее время я пытаюсь создать функцию для формы, в которой повторяются одинаковые поля в зависимости от числа, выбранного на предыдущей странице.

Может быть от 1 до10 строк полей формы, каждая из которых имеет выбор переключателя, который будет включать / отключать каждую строку.

В данный момент я написал что-то, но у меня возникли проблемы с объединением имен полей формы и имен переменных.

Кто-нибудь может указать мне правильное направление, пожалуйста.

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;
            }
        }
    }

Спасибо за любую помощь.

J.

РЕДАКТИРОВАНИЕ

Пример сгенерированной формы 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" />

Ответы [ 4 ]

1 голос
/ 09 мая 2011

Неверный синтаксис JavaScript.Вы смешиваете .net и JS
var frmSchoolSelected+i не допускается.
Также ваш цикл назначает i вместо тестирования i (= против ==)

попробуйте

 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;
  }
}
1 голос
/ 09 мая 2011

Вы смешиваете код .NET и код JavaScript.Поскольку сначала запускается .NET, он попытается обработать код так, как вы его написали:

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

, и, скорее всего, сгенерирует сообщение об ошибке, поскольку это неверный код.

Более простое решениеможет быть, использовать имя класса.Затем с помощью jQuery вы можете сжать весь код в один вызов:

$('.ClassName').toggle();
0 голосов
/ 11 мая 2011

В конце концов я попал туда, как только я решил, как добавить атрибут onclick во входной тег вместо тега span, я мог бы сконцентрироваться на функции javascript.

Код позади Добавляет onclick к тэгу ввода.

        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"

Сгенерированная 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"><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 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;
    }
}

Спасибо тем, кто указал мне правильное направление, высоко ценится.

0 голосов
/ 09 мая 2011

Несколько замечаний о вашем подходе.

  • Знайте, как вы используете this, поскольку это означает разные вещи в разных контекстах.В вашем случае было бы лучше передать индекс строки, которую вы переключаете.Ваш код на стороне сервера, скорее всего, знает, какую строку он генерирует в настоящее время, поэтому это должно быть легко выполнить.
  • Как отмечали другие, вы смешиваете сторону клиента и сторону сервера.В этом случае i - это переменная на стороне клиента, которую вы пытаетесь использовать в '<%=c_'..., который является контекстом на стороне сервера
  • Я не совсем уверен, почему вы ставите +в то, что должно быть именем переменной, но использование знака плюс в качестве части имени переменной недопустимо в JavaScript
  • switchElement в этом случае не является CheckboxList, как вы ожидаетеэто всего лишь элемент html span, и поэтому он не будет иметь значимого свойства value.Вы должны взглянуть на фактические входные элементы внутри него и посмотреть, проверен ли, например, элемент yes .

Если бы вы использовали JavaScriptВ этом случае вам понадобится код в следующем формате:

    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;
    }

Если бы вы подошли к этому со стороны jQuery, я бы предложил также внести несколько изменений в ваш HTML.Ваш вывод можно рассматривать как список мини-форм, поэтому вместо одной большой таблицы с разными строками, соответствующими разным частям, создайте список (или таблицу с одним столбцом, если вы не готовы отказаться от таблицына основе макета совсем еще).

Новый 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>

Новый код

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");
    }
}

В этом подходе есть две приятные вещи:

  1. Вы больше не полагаетесь на знание того, что будет ClientID, поскольку вы имеете дело с элементами ввода в качестве элементов ввода
  2. Теперь вы можете преобразовать эту форму ввода в своего рода повторяющийся элемент управления (например,ListView) поэтому, если вы решите изменить форматирование каждой строки, это будет очень легко сделать (поскольку все они будут в одном месте).
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...