基於單選按鈕和複選框的表單重定向？

-2

我如何創建一個表單，根據他們選擇的內容將用戶重定向到不同的URL？基於單選按鈕和複選框的表單重定向？

該表格與https://www.dropbox.com/upgrade非常相似，其中您有3個主要的單選按鈕，每月或每年的單選按鈕和一個加載項的複選框。

該表單還會計算選擇。

2013-04-24 Doug Dennison

你試過了什麼？你可以發佈你的代碼嗎？ – 2013-04-24 07:49:40

你沒有提到你希望如何實現這一點或語言，例如PHP的？或者你需要一些東西來爲客戶端工作？注意：不能嵌套表單，但可以使用java將選擇複製到表單之間的隱藏字段中。就我個人而言，我會在PHP中做這個，然後用它來構建一個合適的響應頁面。 – 2013-04-24 08:00:25

對不起，我曾嘗試並根據本網站上的其他帖子將一些基本代碼放在一起，但經過幾次嘗試後，我無法使其工作。我想爲表單使用HTML，但如果可能的話通過PHP傳遞... – 2013-04-24 08:23:05

沒有看到任何代碼，最簡單的方法是使用單選按鈕的onclick事件來更新表單動作屬性。粗例子是：

<html> 
<head></head> 
<body> 
<form onsubmit="submitForm();" id="myForm" type="get"> 
<input type="radio" name="myRadio1" data-op="0" value="10" onclick="calcNow();" selected />Monthly&nbsp; 
<input type="radio" name="myRadio1" data-op="1" value="120" onclick="calcNow();" />Annually<br/> 
<input type="radio" name="myRadio2" data-op="0" value="10" onclick="calcNow();" selected />Option A&nbsp; 
<input type="radio" name="myRadio2" data-op="1" value="20" onclick="calcNow();" />Option B<br/> 
<input id="myCheckbox" name="myCheckbox" type="checkbox" value="10" onclick="calcNow();" />Add-on<br/> 
<input id="myTotal" name="myTotal" type="text" value="" disabled="disabled" /><br/> 
<input type="button" id="myButton" onclick="submitForm();" value="Continue" /> 
</form> 
<script type="text/javascript"> 
var pages = [[["page1.html","page2.html"],["page3.html","page4.html"]],[["page5.html","page6.html"],["page7.html","page8.html"]]]; 

function calcNow() 
{ 
    var cb = document.getElementById("myCheckbox"); 
    var cost1 = getRadioValue("myRadio1"); 
    var cost2 = getRadioValue("myRadio2"); 
    var cost3 = cb.checked ? parseInt(cb.value) : 0; 
    var costTotal = cost1 + cost2 + cost3; 
    document.getElementById("myTotal").value = costTotal; 

    var op1 = getRadioData("myRadio1", "op"); 
    var op2 = getRadioData("myRadio2", "op"); 
    var op3 = cb.checked ? 1 : 0; 

    if (op1 != undefined && op2 != undefined && op3 != undefined) 
    { 
     return pages[op1][op2][op3]; 
    } 
    return undefined; 
} 

function submitForm() 
{ 
    var page = calcNow(); 
    if (page != undefined) 
    { 
     // ---- To popup ---- 
     //alert(page); 
     // ---- To navigate ---- 
     location.href = page; 
     // ---- To alter post ---- 
     //var form = document.getElementById("myForm"); 
     //form.action = page; 
     //form.submit(); 
    } 
    else 
    { 
     alert("Please answer all questions."); 
    } 
} 

function getRadioValue(name) 
{ 
    var controls = document.getElementsByName(name); 
    for (var i = 0; i < controls.length; i++) { 
     if (controls[i].checked) { 
      return parseInt(controls[i].value); 
     } 
    } 
    return 0; 
} 

function getRadioData(name, attribute) 
{ 
    var controls = document.getElementsByName(name); 
    for (var i = 0; i < controls.length; i++) { 
     if (controls[i].checked) { 
      return parseInt(controls[i].dataset[attribute]); 
     } 
    } 
    return undefined; 
} 
</script> 
</body> 
</html>

注意，這是很基本的HTML和JavaScript，所以如果你有這個麻煩，你可能需要在接觸與一個網頁設計師。這部分是容易的一點！

來源

2013-04-24 07:57:56 Sav

謝謝Sav，我需要更改以添加更多按鈕和複選框。例如，如果用戶選擇收音機1，收音機B，然後選擇複選框，另一個收音機2，收音機A並且沒有複選框。這有道理嗎？ – 2013-04-24 08:25:35

代碼已更新以添加其他控件。 – Sav 2013-04-25 12:34:18

問題的第二部分是：我如何根據這些值重定向到一個URL？例如，如果有人點擊每月和選項a它會去pagea.html，如果他們點擊每月與選項B它會去pageb.html等等... 再次感謝 – 2013-04-28 14:52:01

基於單選按鈕和複選框的表單重定向？

回答

相關問題