如何设置为打开基于

Question

这里是代码我写

<form> 
 
    <input type="radio" name="cand" value="fr" onclick="alert('You Have Selected Fresher Level \nPlease Click Next To Proceed');"> Fresher<br><br> 
 
    <input type="radio" name="cand" value="ex" onclick="alert('You Have Selected Experienced Level \nPlease Click Next To Proceed');"> Experienced<br><br> 
 
    <input type="button" onclick="location.href='http://google.com';" value="Next" /> 
 
</form>

的2个独立的单选按钮上的提交按钮的特定链接如果假设用户选择选项1（比如：新生）然后链接1（新鲜形式的链接）应该是开放的。 或如果选择选项2即经历过，则有经验的链接应该打开。

请解释提供答案，我是新来的HTML和JavaScript。

Answer 1

在下面的示例中，我为每个radio添加一个属性。当用户点击按钮时，我们获取该属性（data-href），并使用window.location.href在那里传输用户。如果你觉得更好，你可以使用value。请注意，我删除了内联点击功能并为其instad使用了一个事件。

$('#clickButton').click(function(){ 
 
    var url = $('input[name=cand]:checked').data('href'); 
 
    //Goto url 
 
    window.location.href = url; 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form> 
 
    <input type="radio" name="cand" value="fr" data-href="https://www.stackoverflow.com" onclick="alert('You Have Selected Fresher Level \nPlease Click Next To Proceed');" > Fresher<br><br> 
 
    <input type="radio" name="cand" value="ex" data-href="https://stackoverflow.com/q/45627889/4949005" onclick="alert('You Have Selected Experienced Level \nPlease Click Next To Proceed');" > Experienced<br><br> 
 
    <input type="button" id="clickButton" value="Next" /> 
 
</form>

Answer 2

做这样的。

1. 尝试提交表单，并防止利用e.preventDefault()
2. 然后换用submit
3. 输入按钮类型并添加data-link ATTR每个输入。对于有窗有针对性的链接应用形式的默认行为提交后

如何工作

，如果你提交表单。它的发现被检查的单选按钮，数据链路层，然后用 申请window.location其.Finaly重定向的URL推崇

$('from').on('submit',function(e){ 
 
e.preventDefault(); 
 
window.location.href = $('input:checked').attr('data-link'); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script> 
 
<form> 
 
    <input type="radio" name="cand" value="fr" data-link="Fresher"onclick="alert('You Have Selected Fresher Level \nPlease Click Next To Proceed');" > Fresher<br><br> 
 
    <input type="radio" name="cand" data-link="Experienced" value="ex" onclick="alert('You Have Selected Experienced Level \nPlease Click Next To Proceed');" > Experienced<br><br> 
 
    <input type="submit"/> 
 
</form>

Answer 3

你需要脚本来更新location.href' . Trigger a function on selecting radio button and update the onclick property using setAttribute`方法

function updateLink(value) { 
 
    if (value === "fr") { 
 
    document.getElementById("next").setAttribute('onclick', "location.href='www.google.com'") 
 

 
    } else { 
 
    document.getElementById("next").setAttribute('onclick', "location.href='www:wikipedia.com'") 
 

 
    } 
 

 
}

<form> 
 
    <input type="radio" name="cand" value="fr" onclick="updateLink(this.value)"> Fresher<br><br> 
 
    <input type="radio" name="cand" value="ex" onclick="updateLink(this.value)"> Experienced<br><br> 
 
    <input id="next" type="button" onclick="location.href='www.google.com';" value="Next" /> 
 
</form>

此演示仅基于您的代码。使用addEventListener比使用内联事件处理程序更好。