Question

如何根据用户选择的内容创建一个将用户重定向到其他网址的表单？

表单与https://www.dropbox.com/upgrade非常相似，你有3个主要的单选按钮，月刊或年度单选按钮以及附加组件的复选框。

表单还会计算选择。

Answer 1

在没有看到任何代码的情况下，最简单的方法是使用单选按钮的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，因此如果您遇到麻烦，可能需要与网页设计师联系。这部分很容易！

基于单选按钮和复选框的表单重定向？

1 个答案: