利用jQuery動態添加input輸入框，並且獲取他的值

本文轉載自查看原文 2019-11-30 02:15 1484

動態添加

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>選項</title>
 
<script type="text/javascript" src="js/jquery.js"></script>
 

 
<style>
    *{
        margin: 0px;
        padding: 0px;
    }
    
    #dv{
        width: 100px;
        height: 100px;
        background-color: yellow;
        margin: 0px auto 0px;
    }
    
</style>
</head>
<body>
<script>
    $(function(){
        // 添加選項
        $("#opbtn").click(function(){
            var n = $("#opts>li").size();
            if(n < 3){// 最多添加6個選項
                if(n == 1)
                    {   
                        var name='按照地區名稱查找';
                        $("#opts").append("<li>"+name+"<input name='area'/></li>");
                    }else if(n == 2)
                        {
                        name = '按照行政區划代碼查找';
                        $("#opts").append("<li>"+name+"<input name='code'/></li>");
                        }
                
            
            }else{// 提示選項個數已經達到最大
                $("#optips").html("選項個數已經達到最大,不能再添加!");
                $("#optips").css({"color":"red"});
            }
            
        });
        
        // 刪除選項
        $("#delbtn").click(function(){
            if($("#opts>li").size() <= 1){
                $("#optips").html("已經沒有選項可以刪除了!");
                $("#optips").css({"color":"red"});
            } else{
                // 刪除選項,每次刪除最后一個
                $("#opts>li").last().remove();
            }
        });
    });
    
    
    function check() {
        alert('123');
        var n = $("#opts>li").size();
        //window.location.href="a.jsp?count=" +n;
        document.form.action = "a.jsp&count=" + n;   //跳轉界面並以表單的形式提交，並且出去輸入框的個數
        document.form.submit();
    }
        
</script>
<form action="" method="post" name="form">
    <div style="margin: 50px;">
        <input id="opbtn" type="button" value="添加選項"/>
        <input id="delbtn" type="button" value="刪除選項"/>
        <!-- <input id="wrapbtn" type="button" value="包圍DIV"/> -->
        <button onclick="check()">點我</button>
        <ol id="opts" type="A" >
        <li>按級別查詢：<input type="text" name="name"></li>
        </ol>
        
        <!-- 提示語 -->
        <span id="optips"></span>
        
    </div>
    </form>
</body>

</html>

用另一個界面獲取值

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">  
<title></title>  
<script type="text/javascript" src="jquery.min.js"></script>  
</head>  
<body>  
    <% String name = request.getParameter("area");
       String id = request.getParameter("name");
       String count = request.getParameter("count");
       out.print("id" + id);
       out.print("name" + name);
       out.print(count + "個");
    %>
</body>  
  
</body>
</html>

效果截圖：

免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。

猜您在找 jQuery獲取各種input輸入框的值 jQuery動態添加、刪除按鈕及input輸入框 HTML+jQuery實現動態添加輸入框如何用jquery獲取input輸入框中的值？ Jquery獲取已經值的方法 checkbox和input輸入框 js與jquery獲取input輸入框中的值如何用jquery獲取input輸入框中的值？ jquery獲取input輸入框中的值獲取 input 輸入框的值 jquery判斷多個input輸入框不能輸入相同的值