问题描述
做项目的时候,有一个页面有这样的需求。
这个页面大概就是下图这样
需求一、动态获取产品名称
需求二、动态获取被选中的复选框的内容
需求三、点击保存按钮时,获取form表单中的数据,成功之后,跳转到其他页面
需求四、只输入产品名称不勾选产品功能时,会提示请勾选功能,同理,只勾选功能,不输入产品名称,会提示输入产品名称,当两者都不输入内容时,会都提示。
需求五、点击重置按钮,勾选的复选框全部变为未选中状态。
需求六、只有产品名称和产品功能都有的时候,点击保存按钮才会跳转到另一个页面。
这些需求都很好写,我就不描述了,我想在这里谈一下需求五,这个需求将近花了一两个小时才研究出来(我也是前端没学多久的小白)。所以在这里说一说遇到的坑,以及最后是怎么解决的。
遇到的坑
我刚开始的想法是给button绑定点击事件,然后在这个点击事件里去写上面部分需求,操作了一番,需求写完了,但就差最后一步,就是点击button时,获取数据的同时,跳转到另一个页面,于是就在网上查了很多资料,都满足不了我想要的效果,比如说
1.在原来的窗体中直接跳转用
代码如下
window.location.href="你所要跳转的页面";
2、在新窗体中打开页面用:
代码如下
window.open(‘你所要跳转的页面’);
window.history.back(-1);返回上一页
代码如下
<input type="submit" name="Submit" value="同意" onclick=window.open(xxx.html)>
JS跳转页面参考代码:
第一种:
<script language="javascript" type="text/javascript">window.location.href="login.jsp?backurl="+window.location.href;</script>
第二种:
<script language="javascript">alert("返回");window.history.back(-1);</script>
第三种:
<script language="javascript">window.navigate("top.jsp");</script>
第四种:
<script language="JavaScript">self.location='top.htm';</script>
第五种:
<script language="javascript">alert("非法访问!");top.location='xx.jsp';</script>
注意
这些方法都解决不了我的需求,上面的这些只是用来进行直接跳转页面,并满足不了我获取到数据之后再跳转的需求。
解决办法
后来突然来了个想法,我在button里面嵌套一个a链接,将点击事件绑定在a的身上,这样就可以利用a本身的href属性,再结合用jquery去编写逻辑代码,控制href属性的变化。这样就能满足需求了,简单的描述一下思路:
1、首先我要获取form表单数据,这个逻辑代码简单我就不赘述了,下面直接看代码,一看就懂。
2、我要实现提示的需求,也就是上面描述的需求四,这个需求思路就是动态添加一个div,通过if…else…去控制其什么时候显示。
3、重置按钮需求也简单,看代码。
4、重点是当点击按钮时,所发生的一系列操作。
1)当点击按钮的时候,会动态获取当前的产品名称,和所勾选的复选框所对应的功能名字。
2)如果正常情况下,即产品名称输入了,功能也勾选了,那么此时点击button按钮,会弹出所获取到的信息(这里是模拟接收数据),当这些警告框弹完之后就会跳转到指定的页面。
3)如果没输入产品名称或者没勾选功能,点击button时,都会给出相应的提示,并且最终也不会发生跳转。
下面直接上代码,希望能帮到有需要的朋友
主要的html代码
<div class=" w createProduct">
<p class="hd_nav">
<a href="productList.html">产品列表</a>
<span class="Separator">/</span>
<span>创建新产品</span>
</p>
<hr>
<form action="" method="get" id="form-sub">
<div class="productName">
<span>产品名称:</span>
<input type="text" placeholder="请填写产品名称" name="product_name" id="product_name" value="">
</div>
<div class="productFun">
<p>产品功能<span>*温馨提示:可选择多个*</span></p>
<ul></ul>
<div class="btn">
<input type="button" name="" id="reset" value="重置">
</div>
</div>
<p class="save">产品保存:
<span>
<button ><a href="productDetails.html" id="sub">保存</a></button>
</span>
</p>
</form>
</div>
主要的js代码
/* 动态创建li */
function createLI() {
for (var i = 0; i < 20; i++) {
var oLi = document.createElement('li');
var oInput = document.createElement('input');
oInput.setAttribute("id", i); //添加input元素属性
oInput.setAttribute("type", "checkbox");
oInput.setAttribute("value",data[i].funName);
var oLable = document.createElement('label');
oLable.setAttribute("for", i);
oLable.innerHTML = data[i].funName;
oLi.appendChild(oInput);
oLi.appendChild(oLable);
var oUl = document.getElementsByTagName('ul')[1];
oUl.appendChild(oLi);
}
}
/* 获取form表单数据 */
/* 获取被选中复选框中对应的数据 */
var type = []; //定义数组用来存放数据
/* 注意:这里是给button中a绑定的点击事件,目的为了实现获取数据的同时跳转页面 */
$('#sub').click(function() {
/* event.preventDefault(); */
//遍历后把值放到数组中,这样type数组就是当前复选框选中的所有数据
$("#form-sub input[type='checkbox']:checked").each(function(){
type.push($(this).val());
});
/* 获取当前输入的产品名称 */
var prodName = $("#form-sub input[name='product_name']").val();
/* 获取a */
var tzLink = $('#sub');
/* 分情况讨论 */
if(($("#product_name").val() == "") && type.length == 0){
addAlertName(); //提示没有输产品名称
addAlertFun(); //提示没有勾选功能
tzLink.attr('href','javascript:void(0);');
}else if($("#product_name").val() == ""){
addAlertName();
/* 写下面这句话的原因是因为没写这句话之前有小bug
bug描述:
进入页面只勾选功能复选框,而不输入产品名称,这时点击保存按钮,页面会提示输入产品名称
与此同时,勾选的功能复选框已经被存放到type数组中了
所以,如果不写type.length=0;这句话,就意味着在刚才有提示的页面补上产品名称,再次点击保存时
type数组会再一次保存刚才勾选的功能复选框的功能
写上这句话,就会更新数组,让其为空
*/
type.length = 0;
tzLink.attr('href','javascript:void(0);'); //这种情况下禁止跳转,因为信息没有输入完整
}else if(type.length == 0){
addAlertFun();
tzLink.attr('href','javascript:void(0);');
}else{
/* console.log(prodName); */
alert(prodName);
for(var i=0; i<type.length;i++){
alert(type[i]);
}
tzLink.attr('href','productDetails.html');
}
})
/* 动态添加提示div */
function addAlertName() {
var alertName = $('<div></div>');
alertName.attr('class','alertName');
alertName.text('*请填写产品名称*');
alertName.appendTo($('.productName'));
}
function addAlertFun() {
var alertName = $('<div></div>');
alertName.attr('class','alertFun');
alertName.text('*请勾选产品功能*');
alertName.appendTo($('.productFun'));
}
/* 点击重置按钮时,被选中的复选框全部变为未选择 */
$("#reset").click(function() {
$("input[type='checkbox']:checked").prop("checked",false);
})
今天的分享就到这里了,但愿不白写,可以帮到有需要的朋友。