2013-05-09 42 views
-2

我需要創建一個單選按鈕表單,當按下「繼續」按鈕時,選擇會將您重定向到不同的index.html鏈接。我似乎找不到一個簡單的方法來做到這一點。幫幫我!!重定向到不同鏈接的HTML/Javascript單選按鈕表單

基本上如下:

<form> 
<input type="RADIO" name="button" value="^button1^" checked>this button goes to index1.html (Default)<BR></BR> 
<input type="RADIO" name="button" value="^button2^">this button goes to index2.html<BR> </BR> 
<input type="RADIO" name="button" value="^button3^">this button goes to index3.html<BR> </BR> 
<input type="submit" value="Continue"> 
</form> 
+1

的StackOverflow是不是一個定製的服務,您可以告訴該社區你想要什麼,我們爲你開發代碼。證明你至少通過展示你迄今爲止編寫的JavaScript代碼來做出努力,我們將幫助你理清哪些是錯誤的。 – 2013-05-09 18:31:00

+0

我想不出有這樣的需求的商業需求。我會爲你保留3個錨定標記,以保持它的乾淨和簡單。你爲什麼要使用多點擊? – Tushar 2013-05-09 18:38:49

回答

1

在HTML中添加一個數據href屬性爲每個按鈕和ID來提交按鈕

<form> 
<input type="RADIO" name="button" value="^button1^" data-href="index1.html" checked>this button goes to index1.html (Default)<BR></BR> 
<input type="RADIO" name="button" value="^button2^" data-href="index2.html">this button goes to index2.html<BR> </BR> 
<input type="RADIO" name="button" value="^button3^" data-href="index3.html">this button goes to index3.html<BR> </BR> 
<input type="submit" value="Continue" id="btnFormSubmit"> 
</form> 

使用Javascript:

var submit = document.getElementById('btnFormSubmit'); 
submit.addEventListener('click', submitForm); 

function submitForm(event){ 
event.preventDefault(); 
event.stopPropagation(); 

var href = '', 
inputs = this.parentNode.getElementsByTagName('input') 
    for(var i=0;i<inputs.length;i++){ 
     if(inputs[i].getAttribute('name') == 'button' && inputs[i].checked){ 
      href = inputs[i].getAttribute('data-href'); 
      window.location = href; 
     } 
    } 
} 
0

使用jQuery將就像那樣,將url添加到收音機的值字段。

<form method="post"> 
    <input type="RADIO" name="button" value="index1.html" checked>this button goes to index1.html (Default)<BR> 
    <input type="RADIO" name="button" value="index2.html">this button goes to index2.html<BR>   
    <input type="RADIO" name="button" value="index3.html">this button goes to index3.html<BR> 
    <input type="submit" value="Continue"> 
</form> 

jQuery代碼:

$(function(){ 
    $("form").submit(function(e) { 
     e.preventDefault(); 
     window.location = $(this).find('input[type="radio"]:checked').val(); 
    }); 
}); 

活生生的例子:

http://jsfiddle.net/nnEny/

0

這可能是太明顯了,但

<form> 
<input type="RADIO" name="button" value="^button1^" checked>this button goes to index1.html (Default)<BR></BR> 
</form> 
<form> 
<input type="RADIO" name="button" value="^button2^">this button goes to index2.html<BR> </BR> 
</form> 
<form> 
<input type="RADIO" name="button" value="^button3^">this button goes to index3.html<BR> </BR> 
<input type="submit" value="Continue"> 
</form> 
+0

這不行。只有一個提交按鈕,但有3個表格 – Tushar 2013-05-09 18:35:50

+0

有人知道這是否會收集這些數據的頁面?你可以創建一個重定向頁面來獲取數據並重定向瀏覽器 – internetgho5t 2013-05-09 18:46:42

相關問題