jquery添加删除input在jsp页面中无效

qq_15591383 2017-09-18 03:58:36

请教大家一个问题

我从网上找到一段代码，用jquery自动添加或者删除一行input，这个效果在html下完全没有问题，但是在jsp页面中，点击这个+的时候，总是跳转到登录页面去，这是为什么呢，怎么能在jsp页面中，点击+自动增加一行input，不跳转到其他页面，只有表单提交以后，才进行处理

代码如下
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@page import="java.util.*"%>
<!DOCTYPE html>
<html lang="en">
<head>
<base href="<%=basePath%>">
<meta charset="UTF-8">
<title>添加信息</title>
<link rel="stylesheet" type="text/css" href="<%=basePath%>/css/w3-2.5.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/css/font-awesome-4.4.0.min.css" />
<link rel="stylesheet" type="text/css" href="<%=basePath%>/css/bootstrap-3.3.6.min.css" />
<script src="../js/jquery-1.12.0.min.js"></script>
<script src="../js/bootstrap-3.3.6.min.js"></script>
<script>
$(document).ready(function() {

var MaxInputs = 5; //maximum input boxes allowed
var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID
var AddButton = $("#AddMoreFileBox"); //Add button ID

var x = InputsWrapper.length; //initlal text box count
var FieldCount=5; //to keep track of text box added

$(AddButton).click(function (e) //on add input button click
{
if(x <= MaxInputs) //max input box allowed
{
FieldCount++; //text box added increment
//add input box
$(InputsWrapper).append('<div class="w3-margin-bottom"><span class="w3-16 w3-padding-right-28"><b>议题'+FieldCount+'：</b></span><input type="text" name="yitititle" id="field_'+ FieldCount +'" value=""/><a href="#" class="removeclass">删除</a></div>');
x++; //text box increment
}
return false
});

$("body").on("click",".removeclass", function(e){ //user click on remove text
if( x > 1 ) {
$(this).parent('div').remove(); //remove text box
x--; //decrement textbox
}
return false;
})

});
</script>
<body>
<form class="form-horizontal" role="form" id="form" action="CafeController.do?method=addTask" method="post">

<div class="form-group">
<label class="control-label col-sm-2" for="yitimingcheng"></label>
<div class="col-sm-10 w3-left-align" style="margin-left: -100px;">
<div id="InputsWrapper">
<div class="w3-margin-bottom"><span class="w3-16 w3-padding-right-28"><b>议题1：</b></span><input type="text" name="content" id="field_1" value=""/></div>
<div class="w3-margin-bottom"><span class="w3-16 w3-padding-right-28"><b>议题2：</b></span><input type="text" name="content" id="field_2" value=""/></div>
<div class="w3-margin-bottom"><span class="w3-16 w3-padding-right-28"><b>议题3：</b></span><input type="text" name="content" id="field_3" value=""/></div>
<div class="w3-margin-bottom"><span class="w3-16 w3-padding-right-28"><b>议题4：</b></span><input type="text" name="content" id="field_4" value=""/></div>
<div class="w3-margin-bottom"><span class="w3-16 w3-padding-right-28"><b>议题5：</b></span><input type="text" name="content" id="field_5" value=""/></div>
</div>
</div>
</div>

<div class="form-group">
<label class="control-label col-sm-2" for="tianjianyiti"></label>
<div class="col-sm-10 w3-left-align">
<a href="#" id="AddMoreFileBox"><span class="badge w3-medium">+</span></a>
</div>
</div>
<div class="form-group">
<div class="col-sm-offset-2 col-sm-10">
<button type="submit" class="w3-btn w3-green w3-round">创建</button> <button type="reset" class="w3-btn w3-red w3-round">取消</button>
</div>
</div>
</form>
</body>
</html>

...全文

228 7 打赏收藏转发到动态举报

写回复

用AI写文章

7 条回复

切换为时间正序

请发表友善的回复…

发表回复

qq_38984067 2017-09-19

打赏
举报

改成<a href="javascript:;" id="AddMoreFileBox" class="btn btn-info">添加更多的input输入框</a>试试？

Go 旅城通票 2017-09-19

打赏
举报

你这个代码也没用问题啊。。你是直接访问的这个页面还是通过其他方法加载的，如对话框+ajax加载到当前页面的

qq_15591383 2017-09-19

打赏
举报

我把完整的html先贴出来 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>创建课题</title> <link rel="stylesheet" type="text/css" href="../css/w3-2.5.css" /> <link rel="stylesheet" type="text/css" href="../css/font-awesome-4.4.0.min.css" /> <link rel="stylesheet" type="text/css" href="../css/bootstrap-3.3.6.min.css" /> <script src="../js/jquery-1.12.0.min.js"></script> <script src="../js/bootstrap-3.3.6.min.js"></script> <script> $(document).ready(function() { var MaxInputs = 5; //maximum input boxes allowed var InputsWrapper = $("#InputsWrapper"); //Input boxes wrapper ID var AddButton = $("#AddMoreFileBox"); //Add button ID var x = InputsWrapper.length; //initlal text box count var FieldCount=5; //to keep track of text box added $(AddButton).click(function (e) //on add input button click { if(x <= MaxInputs) //max input box allowed { FieldCount++; //text box added increment //add input box $(InputsWrapper).append('<div class="w3-margin-bottom"><span class="w3-16 w3-padding-right-28"><b>议题'+FieldCount+'：</b></span><input type="text" name="yitititle" id="field_'+ FieldCount +'" value=""/><a href="#" class="removeclass">删除</a></div>'); x++; //text box increment } return false }); $("body").on("click",".removeclass", function(e){ //user click on remove text if( x > 1 ) { $(this).parent('div').remove(); //remove text box x--; //decrement textbox } return false; }) }); </script> </head> <body> <div class="container w3-center"> <form class="form-horizontal" role="form" id="form" action="CafeController.do?method=addCoffeeTask" method="post"> <div class="form-group"> <label class="control-label col-sm-2" for="yitimingcheng"></label> <div class="col-sm-10 w3-left-align" style="margin-left: -100px;"> <div id="InputsWrapper"> <div class="w3-margin-bottom"><span class="w3-16 w3-padding-right-28"><b>议题1：</b></span><input type="text" name="yitititle" id="field_1" value=""/></div> <div class="w3-margin-bottom"><span class="w3-16 w3-padding-right-28"><b>议题2：</b></span><input type="text" name="yitititle" id="field_2" value=""/></div> <div class="w3-margin-bottom"><span class="w3-16 w3-padding-right-28"><b>议题3：</b></span><input type="text" name="yitititle" id="field_3" value=""/></div> <div class="w3-margin-bottom"><span class="w3-16 w3-padding-right-28"><b>议题4：</b></span><input type="text" name="yitititle" id="field_4" value=""/></div> <div class="w3-margin-bottom"><span class="w3-16 w3-padding-right-28"><b>议题5：</b></span><input type="text" name="yitititle" id="field_5" value=""/></div> </div> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="tianjianyiti"></label> <div class="col-sm-10 w3-left-align"> <a href="#" id="AddMoreFileBox" class="btn btn-info">添加更多的input输入框</a> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="xunhuancishu">循环次数：</label> <div class="col-sm-10 w3-left-align"><span class="w3-text-blue w3-right w3-padding-top">暂时设置循环三次就好</span> <select class="form-control" id="xunhuancishu" style="width: 10%;"> <option value="3">3次</option> <option value="4" disabled>4次</option> <option value="5" disabled="">5次</option> </select> </div> </div> <div class="form-group"> <label class="control-label col-sm-2" for="xunhuankongzhi">循环控制：</label> <div class="col-sm-10 w3-left-align"> <label class="radio-inline"><input type="radio" name="xunhuankongzhi" checked>手动控制</label> <label class="radio-inline"><input type="radio" name="xunhuankongzhi" disabled>时间控制</label> </div> </div> <div class="form-group"> <div class="col-sm-offset-2 col-sm-10"> <button type="submit" class="w3-btn w3-green w3-round">创建</button> <button type="reset" class="w3-btn w3-red w3-round">取消</button> </div> </div> </form> </div> </body> </html>

Go 旅城通票 2017-09-18