-2

我需要创建一个单选按钮表单，当按下 Continue 按钮时，选择会将您重定向到不同的 index.html 链接。我似乎找不到一个简单的方法来做到这一点。帮助！！

基本上如下：

<form>
<input type="RADIO" name="button" value="^button1^" checked>this button goes to index1.html (Default)<BR></BR>
<input type="RADIO" name="button" value="^button2^">this button goes to index2.html<BR>   </BR>
<input type="RADIO" name="button" value="^button3^">this button goes to index3.html<BR>  </BR>
<input type="submit" value="Continue">
</form>
4

3 回答 3

1

使用 jQuery 会是这样，将 url 添加到收音机的 value 字段中。

<form method="post">
    <input type="RADIO" name="button" value="index1.html" checked>this button goes to index1.html (Default)<BR>
    <input type="RADIO" name="button" value="index2.html">this button goes to index2.html<BR>         
    <input type="RADIO" name="button" value="index3.html">this button goes to index3.html<BR>
    <input type="submit" value="Continue">
</form>

jQuery代码：

$(function(){
    $("form").submit(function(e) {
        e.preventDefault();
        window.location = $(this).find('input[type="radio"]:checked').val();
    });
});

现场示例：

http://jsfiddle.net/nnEny/

于 2013-05-09T18:30:25.587 回答
1

在 html 中为每个按钮和 ID 添加一个 data-href 属性以提交按钮

<form>
<input type="RADIO" name="button" value="^button1^" data-href="index1.html" checked>this button goes to index1.html (Default)<BR></BR>
<input type="RADIO" name="button" value="^button2^" data-href="index2.html">this button goes to index2.html<BR>   </BR>
<input type="RADIO" name="button" value="^button3^" data-href="index3.html">this button goes to index3.html<BR>  </BR>
<input type="submit" value="Continue" id="btnFormSubmit">
</form>

Javascript：

var submit = document.getElementById('btnFormSubmit');
submit.addEventListener('click', submitForm);

function submitForm(event){
event.preventDefault();
event.stopPropagation();

var href = '',
inputs = this.parentNode.getElementsByTagName('input')
    for(var i=0;i<inputs.length;i++){
         if(inputs[i].getAttribute('name') == 'button' && inputs[i].checked){
             href = inputs[i].getAttribute('data-href');
             window.location = href;
         }
    }
}
于 2013-05-09T18:25:41.703 回答
0

这可能太明显了，但是

<form>
<input type="RADIO" name="button" value="^button1^" checked>this button goes to index1.html (Default)<BR></BR>
</form>
<form>
<input type="RADIO" name="button" value="^button2^">this button goes to index2.html<BR>   </BR>
</form>
<form>
<input type="RADIO" name="button" value="^button3^">this button goes to index3.html<BR>  </BR>
<input type="submit" value="Continue">
</form>
于 2013-05-09T18:32:10.650 回答