Отображение других элементов формы на основе выбора радио - PullRequest
Новая
       17

Отображение других элементов формы на основе выбора радио

0 голосов
/ 10 ноября 2009

Я пытаюсь отобразить определенный блок HTML с некоторыми элементами формы, основанными на том, что выбрано в переключателе.

Ниже приведена структура того, что у меня есть, я не включил JQUERY, которые я пробовал, потому что я не мог заставить что-либо работать. Есть ли шанс, что кто-нибудь поможет мне заполнить пробелы?

ТИА! 

<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script src="/js/jquery.chainedSelects.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
$(document).ready(function() {
    showValBox = function(data) {

    };  
});
</script>


<form action="" method="post" id="SomeForm" />
<table>
    <tr>
        <td class="td-ctr">Size</td>
        <td class="td-ct"><input type="radio" name="Radio" value="Value1" onChange="showValBox(this.value)" /> Value <input type="radio" name="Radio" value="Value2" onChange="showValBox(this.value)" /> Value</td>
    </tr>
    <div id="Value1" style="display:none">
    <tr>
        <td class="td-ctr">Only if Value 1</td>
        <td class="td-ct"><input type="text" name="SomeName" value="" /></td>
    </tr>
    </div>          
    <div id="Value2" style="display:none">
    <tr>
        <td colspan="2" class="td-ct">Online if Value 2</td>
    </tr>
    <tr>
        <td class="td-ctr">SomeName1</td>
        <td class="td-ct"><input type="text" name="SomeName1" value="" /></td>
    </tr>   
    <tr>
        <td class="td-ctr">SomeName2</td>
        <td class="td-ct"><input type="text" name="SomeName2" value="" /></td>
    </tr>
    <tr>
        <td class="td-ctr">SomeName3</td>
        <td class="td-ct"><input type="text" name="SomeName3" value="" /></td>
    </tr>
    <tr>
        <td class="td-ctr">SomeName4/td>
        <td class="td-ct"><input type="text" name="SomeName4" value="" /></td>
    </tr>
    <tr>
        <td class="td-ctr">SomeName5</td>
        <td class="td-ct"><input type="text" name="SomeName5" value="" /></td>
    </tr>
    <tr>
        <td class="td-ctr">SomeName6</td>
        <td class="td-ct"><input type="text" name="SomeName6" value="" /></td>
    </tr>
    <tr>
        <td class="td-ctr">SomeName7</td>
        <td class="td-ct"><input type="text" name="SomeName7" value="" /></td>
    </tr>                                                                               
    </div>
</table>
</form>

Ответы [ 4 ]

1 голос
/ 10 ноября 2009

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

Вы также не можете поместить тег DIV в середину ТАБЛИЦЫ, поэтому я немного переформулировал код для вас. 

<html>
    <head>
        <script type="text/javascript" src="jquery-1.3.2.min.js"></script>
        <script type="text/javascript">
            $(document).ready(function() {
                $("tbody[id^='Value']").hide();
                $("input[name='Radio']").click(function(){
                    change_selection();
                });
                change_selection();
            });

            function change_selection() {
                var selected_value = $("input[name='Radio']:checked").val();
                $("tbody[id^='Value']").hide();
                $("#" + selected_value).show();
            }
        </script>
    </head>
    <body>
        <form action="" method="post" id="SomeForm" />
            <table>
                <tbody>
                    <tr>
                        <td class="td-ctr">Size</td>
                        <td class="td-ct"><input type="radio" name="Radio" value="Value1" checked="checked"/> Value <input type="radio" name="Radio" value="Value2" /> Value</td>
                    </tr>
                </tbody>
                <tbody id="Value1">
                    <tr>
                        <td class="td-ctr">Only if Value 1</td>
                        <td class="td-ct"><input type="text" name="SomeName" value="" /></td>
                    </tr>
                </tbody>
                <tbody id="Value2">
                    <tr>
                        <td colspan="2" class="td-ct">Only if Value 2</td>
                    </tr>
                    <tr>
                        <td class="td-ctr">SomeName1</td>
                        <td class="td-ct"><input type="text" name="SomeName1" value="" /></td>
                    </tr>       
                    <tr>
                        <td class="td-ctr">SomeName2</td>
                        <td class="td-ct"><input type="text" name="SomeName2" value="" /></td>
                    </tr>
                    <tr>
                        <td class="td-ctr">SomeName3</td>
                        <td class="td-ct"><input type="text" name="SomeName3" value="" /></td>
                    </tr>
                    <tr>
                        <td class="td-ctr">SomeName4</td>
                        <td class="td-ct"><input type="text" name="SomeName4" value="" /></td>
                    </tr>
                    <tr>
                        <td class="td-ctr">SomeName5</td>
                        <td class="td-ct"><input type="text" name="SomeName5" value="" /></td>
                    </tr>
                    <tr>
                        <td class="td-ctr">SomeName6</td>
                        <td class="td-ct"><input type="text" name="SomeName6" value="" /></td>
                    </tr>
                    <tr>
                        <td class="td-ctr">SomeName7</td>
                        <td class="td-ct"><input type="text" name="SomeName7" value="" /></td>
                    </tr>                                                                                                                                                               
                </tbody>
            </table>
        </form>

    </body>
</html>

Cheers, Декан

1 голос
/ 10 ноября 2009

Ваш HTML-код недопустим, поскольку элементы DIV должны находиться внутри столбца, если вы включаете их в таблицу. То, что вы действительно хотите сделать, это дать вашим строкам разные классы в зависимости от того, к какому набору они принадлежат, а затем показать / скрыть в зависимости от класса. Вы можете рассмотреть возможность использования «скрытого» класса для управления «display: none;» стиль, затем просто добавьте / удалите этот класс.

Я бы, наверное, запустил его по клику и использовал jQuery: 

$('[name=Radio]').click( function() {
   var klass = '.' + $(this).val();
   $('.class1,.class2').addClass('hidden');
   $(klass).removeClass('hidden');
});

<form action="" method="post" id="SomeForm" />
<table>
    <tr>
        <td class="td-ctr">Size</td>
        <td class="td-ct">
            <input type="radio" name="Radio" value="class1" /> Value
            <input type="radio" name="Radio" value="class2"  /> Value
        </td>
    </tr>
    <tr class="class1 hidden">
        <td class="td-ctr">Only if Value 1</td>
        <td class="td-ct"><input type="text" name="SomeName" value="" /></td>
    </tr>
    <tr class="class2 hidden">
        <td colspan="2" class="td-ct">Online if Value 2</td>
    </tr
    ...
1 голос
/ 10 ноября 2009

Не совсем ответ на ваш вопрос, но комментарий к двум уже присутствующим ответам, в котором отмечается, что вы не можете помещать DIV между вашими строками ...

Для этой цели, то есть, группируя связанные строки в один элемент, вас может заинтересовать элемент TBODY, 

<table>
    <tbody id="somegroup">
        <tr><td>...</td></tr>
        <tr><td>...</td></tr>
    </tbody>
    <tbody id="someOthergroup">
        <tr><td>...</td></tr>
        <tr><td>...</td></tr>
        <tr><td>...</td></tr>
        <tr><td>...</td></tr>
    </tbody>
</table>
0 голосов
/ 10 ноября 2009

Прежде всего, вы не можете семантически иметь DIV между строками таблицы. Они должны содержаться в ваших элементах TD. Я бы посоветовал вам применить свой идентификатор к элементу TR , который скроет всю строку Во-вторых, я бы посоветовал всем вашим классам ТР класс легко скрыть элементы при смене радио.

  1. скрытые строки совместно используют класс hiddenContainers

CODE 

$(ready(function() {
    $("input[name='Radio']").click(function() {
        var val = $(this).val();
        $('.hiddenContainers').hide();
        $('#'+val).show();
    });
});
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...