有兩種形式，其中包含相同的單選按鈕組？

我的第一個問題是這個，儘管我懷疑它是否可能。但是，如果是這樣，它會讓我的生活變得更容易。有兩種形式，其中包含相同的單選按鈕組？

你可以有一個單選按鈕組和2個表單嗎？我的意思是在form1和form2中都有相同的單選按鈕組。

我需要這個的原因是，如果我點擊前2個單選按鈕，表單動作將會到一個頁面，而如果我點擊最後2個單選按鈕，動作將會到另一個頁面。

如果這是不可能的，我會使用一種形式，並將不得不根據我選擇的單選按鈕來更改表單動作。我會給前兩個單選按鈕授課，另一個授課另外兩個單選按鈕。

如果任何人都可以讓我知道哪種方法更好，以及如何在jQuery中實現它，那會很棒。

非常感謝提前

來源

2010-12-22 seedg

不，這是不可能的（考慮如何構建該標記）。你必須改變行動。 – annakata 2010-12-22 15:46:49

我已經實現了從尖一些幫助的解決方案。這是我的代碼：

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

來源

2010-12-22 16:32:00 seedg

您不能有一組表單元素作爲兩個單獨的窗體的一部分。僅僅構建一個這樣的有效文檔是不可能的。

動態更新父代<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的關鍵片段上。（也可能想要以同樣的方式處理「更改」事件等）

來源

2010-12-22 15:44:05 Pointy

一種形式，替代動作頁面似乎是要走的路。如果你打算使用單選按鈕的類，那麼類似這樣的東西就可以工作。

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>

來源

2010-12-22 16:09:10 subhaze

有兩種形式，其中包含相同的單選按鈕組？

回答

相關問題