有两个表单,其中包含相同的单选按钮组?

时间:2010-12-22 15:41:18

标签: javascript jquery forms radio-button

我的第一个问题是,虽然我怀疑是否可能。但是,如果是这样,它将使我的生活更轻松。

你有一个带2个表格的单选按钮组吗?我的意思是在form1和form2中都找到了相同的单选按钮组。

我需要这个的原因是,如果我点击前2个单选按钮,表单操作将是一个页面,而如果我点击最后2个单选按钮,操作将是另一个页面。

如果无法做到这一点,我会使用一个表单,并且必须根据我选择的单选按钮更改表单操作。我将为前两个单选按钮提供一个课程,为另外两个单选按钮提供另一个课程。

如果有人能告诉我哪种方法更好以及如何在jQuery中实现它,那就太棒了。

非常感谢提前

3 个答案:

答案 0 :(得分:2)

您不能将一组表单元素作为两个单独表单的一部分。只是不可能构建这样的有效文档。

动态更新父<form>的“action”属性中的URL的Javascript不应该太难。正如您所建议的那样,单选按钮元素的“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]);
    }
  });
});

或者其他什么。您还可以使用HTML5样式的“data-”属性将URL直接存储在单选按钮元素或URL的关键片段上。 (也可能想以同样的方式处理“更改”事件等。)

答案 1 :(得分:0)

一种形式,备用行动页面似乎是要走的路。如果你打算使用单选按钮,那么这样的东西就可以了。

<强> Live example

的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>

答案 2 :(得分:0)

我在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();
    });
});