【问题标题】:Form redirect on checkbox selection复选框选择时的表单重定向
【发布时间】:2013-05-10 09:15:38
【问题描述】:

这是我想要实现的目标:我想创建一个带有表单的 HTML 页面,当您提交表单时,它会转到 4 个位置中的 1 个。有一个在页面加载时自动选择的默认隐藏主选项和 2 个可选的子选项。

哦,它会计算选择的数量!

到目前为止,这是我的代码:

<html>
<head></head>
<body>

<form onSubmit="submitForm();" id="myForm" type="get">
<input id="myCheckbox1" name="myCheckbox1" type="checkbox" value="20" onClick="calcNow();" />Default option<br/>
<input id="myCheckbox2" name="myCheckbox2" type="checkbox" value="30" onClick="calcNow();" />Add-on option 1<br/>
<input id="myCheckbox2" name="myCheckbox2" type="checkbox" value="40" onClick="calcNow();" />Add-on option 2<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 = [[["http://mysite.com/page1.html"],["http://mysite.com/page2.html"],["http://mysite.com/page3.html","http://mysite.com/page4.html"]]];

function calcNow()
{
    var cb = document.getElementById("myCheckbox1");
    var cb = document.getElementById("myCheckbox2");
    var cost1 = cb.checked ? parseInt(cb.value) : 0;
    var cost2 = cb.checked ? parseInt(cb.value) : 0;
    var costTotal = cost1 + cost2;
    document.getElementById("myTotal").value = costTotal;

    var op1 = cb.checked ? 1 : 0;

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

function submitForm()
{
    var page = calcNow();
    if (page != undefined)
    {
        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>

【问题讨论】:

    标签: javascript html forms redirect


    【解决方案1】:

    试试这个

    编辑:

    function submitForm()
    {
        //The code goes inside here, you have to decide where to redirect from if or the else 
        window.location.assign("http://www.w3schools.com/");   
    
        var page = calcNow();
        if (page != undefined)
        {
            alert(page);
        }
        else
        {
            alert("Please answer all questions.");
        }
    }
    

    【讨论】:

    • undefined 应该是null,确定吗?
    • 谢谢,但是一旦选中复选框就会重定向,我想在点击提交后创建 4 个重定向选项。另外还有复选框计算不正确的问题!我看不出哪里出错了。
    • window.location.assign(pages[op1]); 已给出,以便您了解如何重定向页面。如果需要,可以将其添加到 submitForm()
    • 上述js中那一行到哪里去了?
    • 对这项工作的任何帮助都会很棒。有人可以调整代码并粘贴吗?
    猜你喜欢
    • 1970-01-01
    • 2015-02-26
    • 2011-11-25
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2020-09-10
    • 2020-07-30
    • 1970-01-01
    相关资源
    最近更新 更多