将变量框值保存在变量中

时间:2017-11-01 10:38:09

标签: javascript jquery radio-button

我想保存单选框的选中值但是当我尝试提交按钮并根据3个选项重定向到网址时它不起作用。我调试了它,显然问题是我的程序只保存变量中的最后一个值而不保存之前的值。如何保存3个不同变量中的所有选项?

HTML:

    <div id="schritt1">
        <p stlye="text-align:center;">frage 1</p>
        <input id="1a" type="radio" name="a" value="eins" onclick="checkedvalue('a')"/>
        <label for="1a">1</label><br/>
        <input id="1b" type="radio" name="a" value="zwei" onclick="checkedvalue('a')"/>
        <label for="1b">2</label></br>
        <input id="1c" type="radio" name="a" value="drei" onclick="checkedvalue('a')"/>
        <label for="1c">3</label>

    </div>

    <div id="schritt2" style="display:none;">
        <p stlye="text-align:center;">Frage 2</p>
        <input id="2a" type="radio" name="b" value="zweieins" onclick="checkedvalue('b')"/>
        <label for="2a">1</label><br/>
        <input id="2b" type="radio" name="b" value="zweizwei" onclick="checkedvalue('b')"/>
        <label for="2b">2</label></br>
        <input id="2c" type="radio" name="b" value="zweidrei" onclick="checkedvalue('b')"/>
        <label for="2c">3</label>
    </div>

    <div id="schritt3" style="display:none;">
        <p stlye="text-align:center;">Frage 3</p>
        <input id="2a" type="radio" name="c" value="dreieins" onclick="checkedvalue('c')"/>
        <label for="2a">1</label><br/>
        <input id="2b" type="radio" name="c" value="dreizwei" onclick="checkedvalue('c')"/>
        <label for="2b">2</label></br>
        <input id="2c" type="radio" name="c" value="dreidrei" onclick="checkedvalue('c')"/>
        <label for="2c">3</label>
    </div>

    <div id="finish-button" style="display:none;">
        <a class="btn btn-buy" onclick="checkedvalue('finish')">Ergebnis</a>

    </div>

JS:

<script>
 function checkedvalue(choice){
var eins;
var zwei;
var drei;

if(choice == "a") {


    eins = (jQuery('input[name=a]:checked').val());
    window.alert(eins);
document.getElementById('schritt1').style.display = 'none';
document.getElementById('schritt2').style.display = 'block';
}


else if(choice == "b") {


    zwei = (jQuery('input[name=b]:checked').val());
    window.alert(zwei);
    window.alert(eins + zwei);
    document.getElementById('schritt2').style.display = 'none';
    document.getElementById('schritt3').style.display = 'block';
    document.getElementById('finish-button').style.display = 'block';
}



else if(choice == "c") {


    drei = (jQuery('input[name=c]:checked').val());

}

else if(choice == "finish") {
    window.alert(eins + zwei + drei);

    if(eins == "eins" && zwei == "zweieins" && drei == "dreieins" )
    {
    console.log("If 2 works");
    window.location.href = "//";
    }
}

}

1 个答案:

答案 0 :(得分:2)

每次这个onclick()方法调用并刷新Javascript方法时都会出现问题。因此,它将丢失以前保存的值。

您可以使用

收集表单提交时的所有单选按钮组值
 var eins;
 var zwei;
 var drei;

全局声明这些变量(在所有函数之外)并在表单提交方法中添加以下代码(在提交按钮中编写OnSubmit方法并在其中编写代码)

$('input:radio').each(function() {
 if($(this).is(':checked')) {
  // You have a checked radio button here...
 var val = $(this).val();
 var name = $(this).attr('name');
if(name=="a")
{
  eins=val;
}
else if(name=="b")
 {
zwei=val;
}
else
{
drei=val;
}
 } 
else {
// Or an unchecked one here...
}
});

我没有测试代码,因此请根据您的要求进行修改。