2013-05-10 196 views
1

這是我想要實現的:我想創建一個HTML頁面的表單,當您提交表單時,它將轉到4個位置之一。在頁面加載時會自動選擇一個默認的隱藏主選項,以及兩個可選的子選項。表單重定向複選框選擇

哦,它計算選擇的金額!

這裏是我到目前爲止的代碼:

<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> 

回答

0

試試這個

編輯:

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."); 
    } 
} 
+0

'undefined'應該是'null',肯定? – imulsion 2013-05-10 09:42:41

+0

謝謝,但一旦勾選複選框就會重定向,一旦提交被擊中,我想創建4個重定向選項。加上theres問題的複選框計算不正確!我看不出我要去哪裏錯了。 – dougninja 2013-05-10 09:49:35

+0

'window.location.assign(pages [op1]);'是給出的,所以你可以瞭解如何重定向頁面。你可以在'submitForm()'中添加它,如果你需要它的話。 – shabeer90 2013-05-10 09:57:08