Наличие двух форм, которые содержат одинаковую группу переключателей внутри них? - PullRequest
Новая
       3

Наличие двух форм, которые содержат одинаковую группу переключателей внутри них?

1 голос
/ 22 декабря 2010

Мой первый вопрос такой, хотя я сомневаюсь, что это возможно.Однако, если это так, это сделает мою жизнь намного проще.

Можете ли вы иметь группу радиокнопок с 2 формами?Я имею в виду, что одна и та же группа переключателей находится как в форме 1, так и в форме 2.

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

Если это невозможно, я бы использовал одну форму и мне пришлось бы изменить действие формы в зависимости от того, какое радиокнопку я выбираю.Я дам класс для первых двух переключателей, а другой класс - для других двух переключателей.

Если кто-нибудь может дать мне знать, какой метод лучше и как его реализовать в jQuery, это было бы здорово.

Большое спасибо заранее

Ответы [ 3 ]

2 голосов
/ 22 декабря 2010

Нельзя, чтобы одна группа элементов формы была частью двух отдельных форм. Просто невозможно создать действительный документ, подобный этому.

Javascript, который динамически обновляет URL в свойстве «action» родительского элемента <form>, не должен быть слишком сложным для выполнения. Как вы и предлагали, для управления кодом можно использовать атрибут «class» элементов переключателя, что делает его довольно гибким, если вам понадобится добавить одну или несколько кнопок позже.

Поскольку вы включили тег jQuery: 

$(function() {
  var actionMap = {
    key1: 'http://yoursite.com/some/action/1',
    key2: 'http://yoursite.com/some/action/2',
    /* ... */
  };

  $('input:radio').click(function() {
    var $rb = $(this);
    for (var key in actionMap) {
      if ($rb.hasClass(key))
        $rb.closest('form').attr('action', actionMap[key]);
    }
  });
});

или что-то. Вы также можете использовать атрибут «data-» в стиле HTML5 для хранения URL-адресов непосредственно в элементах переключателя или фрагменте ключа URL-адреса. (Также может потребоваться обработать событие «change» таким же образом и т. Д.)

0 голосов
/ 22 декабря 2010

Я реализовал правильное решение с помощью Pointy.Вот мой код: 

$(function() {
    $('input:radio').click(function() {
        var $rb = $(this);

        if ($rb.hasClass('class1')){
            $("#myForm").attr("action", "link1.php");
        }else if($rb.hasClass('class2')){
            $rb.closest('form').attr("action", "link2.php");
        }
    });

    $('#btnProceed').click(function(){
      $('#myForm').submit();
    });
});
0 голосов
/ 22 декабря 2010

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

Живой пример

JavaScript 

// override the action page based on which radio button is checked
$('#someForm').submit( function(e) {
    if($('.useDefault:checked').length == 1) this.action = 'http://www.google.com';
    else this.action = 'http://wikipedia.org';
});

HTML 

<form id="someForm" action="#">
    <input name="rad" type="radio" value="default0" class="useDefault" /><label>default0</label>
    <br />
    <input name="rad" type="radio" value="default1" class="useDefault" /><label>default1</label>
    <br />
    <input name="rad" type="radio" value="alternate0" class="useAlternate" /><label>useAlternate0</label>
    <br />
    <input name="rad" type="radio" value="alternate1" class="useAlternate" /><label>useAlternate1</label>
    <br />
    <input type="submit" value="submit"/>
</form>
...