[英]Radio buttons validation while clicking on “continue” button Javascript
I have create a template containing 4 radio buttons and 1 "continue" button with effects as shown below 我创建了一个模板,其中包含4个单选按钮和1个“继续”按钮,效果如下所示
I am trying to add a javascript code while clicking on "continue" : 我试图在单击“继续”时添加一个javascript代码:
I was following some tutorials and test it on basic examples, it works for me but usually I see 我正在关注一些教程并在基本示例上对其进行测试,它对我有用,但通常我会看到
<form onsubmit="return validateSubmit();" action="#">
and 和
<input type="submit" value="Submit">
When i change my button to submit type i lose the effect i added with css. 当我更改按钮以提交类型时,我失去了使用CSS添加的效果。
Here is my code snippet 这是我的代码片段
@import url('https://fonts.googleapis.com/css?family=Lato'); .container{ font-family: 'Lato', sans-serif; display: block; position: relative; margin: 40px auto; height: auto; width: 500px; padding: 20px; } h1 { color: #000000; } .container ul{ list-style: none; margin: 0; padding: 0; overflow: auto; } ul li{ color: #696969; display: block; position: relative; float: left; width: 100%; height: 100px; border-bottom: 1px solid #333; } ul li input[type=radio]{ position: absolute; visibility: hidden; } ul li label{ display: block; position: relative; font-weight: 300; font-size: 1.35em; padding: 25px 25px 25px 80px; margin: 10px auto; height: 30px; z-index: 9; cursor: pointer; -webkit-transition: all 0.25s linear; } ul li:hover label{ color: #1E90FF; } ul li .check{ display: block; position: absolute; border: 5px solid #696969; border-radius: 100%; height: 25px; width: 25px; top: 30px; left: 20px; z-index: 5; transition: border .25s linear; -webkit-transition: border .25s linear; } ul li:hover .check { border: 5px solid #1E90FF; } ul li .check::before { display: block; position: absolute; content: ''; border-radius: 100%; height: 15px; width: 15px; top: 5px; left: 5px; margin: auto; transition: background 0.25s linear; -webkit-transition: background 0.25s linear; } input[type=radio]:checked ~ .check { border: 5px solid #1E90FF; } input[type=radio]:checked ~ .check::before{ background: #1E90FF; } input[type=radio]:checked ~ label{ color: #1E90FF; } @import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:700"; .flex { font-family: "Source Sans Pro", sans-serif; -webkit-font-smoothing: antialiased; min-height: 50vh; display: flex; align-items: center; justify-content: center; } a.bttn { color: #1E90FF; text-decoration: none; -webkit-transition: 0.3s all ease; transition: 0.3s ease all; } a.bttn:hover { color: #FFF; } a.bttn:focus { color: #FFF; } .bttn { font-size: 18px; letter-spacing: 2px; text-transform: uppercase; display: inline-block; text-align: center; width: 270px; font-weight: bold; padding: 14px 0px; border: 3px solid #1E90FF; border-radius: 2px; position: relative; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1); } .bttn:before { -webkit-transition: 0.5s all ease; transition: 0.5s all ease; position: absolute; top: 0; left: 50%; right: 50%; bottom: 0; opacity: 0; content: ''; background-color: #1E90FF; z-index: -2; } .bttn:hover:before { -webkit-transition: 0.5s all ease; transition: 0.5s all ease; left: 0; right: 0; opacity: 1; } .bttn:focus:before { transition: 0.5s all ease; left: 0; right: 0; opacity: 1; } a.bttn{ top: -110px; }
<div class="container"> <h1 lign="center">Select the Type :</h1> <br/> <ul> <li> <input type="radio" id="f-option" name="selector"> <label for="f-option">Shipment</label> <div class="check"></div> </li> <li> <input type="radio" id="s-option" name="selector"> <label for="s-option">Canceled</label> <div class="check"><div class="inside"></div></div> </li> <li> <input type="radio" id="t-option" name="selector"> <label for="t-option">Ordered</label> <div class="check"><div class="inside"></div></div> </li> <li> <input type="radio" id="u-option" name="selector"> <label for="u-option">Other</label> <div class="check"><div class="inside"></div></div> </li> </ul> </div> <div class="flex"> <a class="bttn" >Continue</a> </div>
can anyone help me please how to keep the same design of "continue" button and add to it the javascript part. 任何人都可以帮助我如何保持“继续”按钮的相同设计并将其添加到javascript部分中。
Thank you very much. 非常感谢你。
If you just want to switch to a different page instead of submitting a form you can simply perform a check for the value of the radio button and then redirect to the specific page directly like this: 如果您只想切换到其他页面而不是提交表单,则只需检查单选按钮的值,然后直接重定向到特定页面,如下所示:
When you uncomment the window.location.href
line you would be redirected to the file that you see in the console output. 取消注释
window.location.href
行时,将重定向到控制台输出中看到的文件。
$(function(){ $('.bttn').on('click', function(){ if($('input[name="selector"]').groupVal() === undefined){ alert('Please select an option!'); } else { console.log('choice' + $('input[name="selector"]').groupVal() + '.php'); //window.location.href = 'order' + $('input[name="selector"]').groupVal() + '.php'; } }); }); jQuery.fn.extend({ groupVal: function() { return $(this).filter(':checked').val(); } });
@import url('https://fonts.googleapis.com/css?family=Lato'); .container{ font-family: 'Lato', sans-serif; display: block; position: relative; margin: 40px auto; height: auto; width: 500px; padding: 20px; } h1 { color: #000000; } .container ul{ list-style: none; margin: 0; padding: 0; overflow: auto; } ul li{ color: #696969; display: block; position: relative; float: left; width: 100%; height: 100px; border-bottom: 1px solid #333; } ul li input[type=radio]{ position: absolute; visibility: hidden; } ul li label{ display: block; position: relative; font-weight: 300; font-size: 1.35em; padding: 25px 25px 25px 80px; margin: 10px auto; height: 30px; z-index: 9; cursor: pointer; -webkit-transition: all 0.25s linear; } ul li:hover label{ color: #1E90FF; } ul li .check{ display: block; position: absolute; border: 5px solid #696969; border-radius: 100%; height: 25px; width: 25px; top: 30px; left: 20px; z-index: 5; transition: border .25s linear; -webkit-transition: border .25s linear; } ul li:hover .check { border: 5px solid #1E90FF; } ul li .check::before { display: block; position: absolute; content: ''; border-radius: 100%; height: 15px; width: 15px; top: 5px; left: 5px; margin: auto; transition: background 0.25s linear; -webkit-transition: background 0.25s linear; } input[type=radio]:checked ~ .check { border: 5px solid #1E90FF; } input[type=radio]:checked ~ .check::before{ background: #1E90FF; } input[type=radio]:checked ~ label{ color: #1E90FF; } @import "https://fonts.googleapis.com/css?family=Source+Sans+Pro:700"; .flex { font-family: "Source Sans Pro", sans-serif; -webkit-font-smoothing: antialiased; min-height: 50vh; display: flex; align-items: center; justify-content: center; } a.bttn { color: #1E90FF; text-decoration: none; -webkit-transition: 0.3s all ease; transition: 0.3s ease all; } a.bttn:hover { color: #FFF; } a.bttn:focus { color: #FFF; } .bttn { font-size: 18px; letter-spacing: 2px; text-transform: uppercase; display: inline-block; text-align: center; width: 270px; font-weight: bold; padding: 14px 0px; border: 3px solid #1E90FF; border-radius: 2px; position: relative; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.16), 0 3px 6px rgba(0, 0, 0, 0.1); } .bttn:before { -webkit-transition: 0.5s all ease; transition: 0.5s all ease; position: absolute; top: 0; left: 50%; right: 50%; bottom: 0; opacity: 0; content: ''; background-color: #1E90FF; z-index: -2; } .bttn:hover:before { -webkit-transition: 0.5s all ease; transition: 0.5s all ease; left: 0; right: 0; opacity: 1; } .bttn:focus:before { transition: 0.5s all ease; left: 0; right: 0; opacity: 1; } a.bttn{ top: -110px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="container"> <h1 lign="center">Select the Type :</h1> <br> <ul> <li> <input type="radio" id="f-option" value="1" name="selector"> <label for="f-option">Shipment</label> <div class="check"></div> </li> <li> <input type="radio" id="s-option" value="2" name="selector"> <label for="s-option">Canceled</label> <div class="check"><div class="inside"></div></div> </li> <li> <input type="radio" id="t-option" value="3" name="selector"> <label for="t-option">Ordered</label> <div class="check"><div class="inside"></div></div> </li> <li> <input type="radio" id="u-option" value="4" name="selector"> <label for="u-option">Other</label> <div class="check"><div class="inside"></div></div> </li> </ul> </div> <div class="flex"> <a class="bttn" >Continue</a> </div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.