使用jquery对话框的两个单选按钮的窗体

时间:2013-03-04 08:29:46

标签: javascript jquery

您好我需要创建一个带有两个单选按钮的表单是和否使用提交按钮,如果用户没有选择任何选项,则应弹出警告说“请选择一个选项'”如果是并提交按钮jquery对话框应弹出对话框中的两个按钮确定并取消 - >如果用户单击确定然后它应该转到不同的页面,如果没有单选按钮和提交按钮,那么还应该弹出一个对话框,具有相同的确定和取消按钮,如果确定则应该转到另一个页面。我已经创建了类似的东西,但却无法提供所选的单选按钮

<form action="" method="get" name="radval">
<table width="100">
<tr>
<td width="41"><input name="xyz" type="radio" id="yes_chk" value="" required>
  Yes</td>
<td width="47"><input name="xyz" type="radio" id="yes_chk" value="" required>
  No</td>

</tr>
<tr>
 <td colspan="4"><input type="submit" value="Submit" id="button"></td>
</tr>
</table></form>

的javascript

<script src="js/jquery.reveal.js"></script>
<script type="text/javascript">
    $(document).ready(function() {

        $('#button').click(function(e) { // Button which will activate our modal
            $('#modal').reveal({ // The item which will be opened with reveal
                animation: 'fade',                   // fade, fadeAndPop, none
                animationspeed: 600,                       // how fast animtions are
                closeonbackgroundclick: true,              // if you click background will modal close?
                dismissmodalclass: 'close'    // the class of a button or element that will close an open modal
            });
        return false;
        });
    });
</script>

如何根据所选的单选按钮重定向页面。我是jquery的新手,有什么帮助吗?

提前致谢。

1 个答案:

答案 0 :(得分:0)

我重新创建了一下,在评论中你可以看到解释的代码:

你的HTML有点调整

<form action="" method="get" name="radval" data-sjaak-module="sjaak.mod.form">
        <input name="yes-no" type="radio" class="yes_chk" value="yes">Yes
        <input name="yes-no" type="radio" class="no_chk" value="no">No
        <input type="submit" value="submit" id="button">
</form>
$('#button').click(function(e) { // Button which will activate our modal

e.preventDefault(); // prevent submitting and go trough the list below
            var x = !$('.yes_chk').is(':checked'), // declaring variables it checks for the class yes_chk if it isn't checked
                y = !$('.no_chk').is(':checked')
            if (x && y) { // the condition if both fields are unchecked
                alert('Make a choice');  // alert box that pops up if there is no choice made
            } else if (x) { // if just x is not checked
                var no = confirm('you checked no'); // putting it in a variable to use it in a later if
                if(no == true) { // if clicked on ok do the following
                    parent.location='http://www.stackoverflow.com/'; 
                } else { // if clicked on cancel what to do
                    console.log('false');
                    parent.location='http://stackoverflow.com/questions/15197403/form-with-two-radio-buttons-using-jquery-dialogbox';
                }

            } else {
                var yes = confirm('you checked yes');
                if(yes == true) { // if condition is met than
                    parent.location='http://www.stackoverflow.com/'; // go to this website
                } else { // if cancel is pressed do the following
                    parent.location='http://stackoverflow.com/questions/15197403/form-with-two-radio-buttons-using-jquery-dialogbox';
                }
            }


// your code just below
$('#modal').reveal({ // The item which will be opened with reveal
animation: 'fade',   // fade, fadeAndPop, none
animationspeed: 600, // how fast animtions are
closeonbackgroundclick: true,   // if you click background will modal close?
dismissmodalclass: 'close' // the class of a button or element that will close an open modal
            });
        return false;
        });