堆栈内存溢出
  简体   繁体   English

如何通过JQuery更改/更改变量名称以保持名称属性不同来添加/删除文本框？

[英]How do I add/remove text boxes with JQuery changing the variable name to keep the name attributes different?

 原文  2015-12-15 08:41:59  0   3    javascript/ jquery

问题描述

I want to make a book catalog with JQuery to add books to a author. 我想使用JQuery制作书籍目录，以将书籍添加到作者。 In the code That I have I am trying to add a author and have his books be in a array with his number only. 在我所拥有的代码中，我试图添加一位作者，并让他的书仅与他的号码一起排列在数组中。 Separated by other authors and their own arrays of books. 与其他作者和自己的书籍分开存放。

For example, when I press the button to add a author a input box appears so that I can add the authors name also a button to add a book that when I press that button I get an input box to add a books name. 例如，当我按下添加作者的按钮时，会出现一个输入框，这样我就可以添加作者的名字，还有一个添加书籍的按钮，当我按下该按钮时，我会得到一个输入框来添加一个书名。

例1

When I press the add author again I want to be able to add another author with the same input boxes as before (adding more books to that author). 当我再次按下添加作者时，我希望能够使用与以前相同的输入框添加另一个作者（向该作者添加更多书籍）。

例2

Also to add multiple books assigned to that author. 还可以添加分配给该作者的多本书。

在此处输入图片说明

I have already done this in the pics but I get an array of everything. 我已经在图片中做到了，但是我得到了很多。 I want it to be separated by author. 我希望它被作者分开。

author1 has an array of {book1, book2, book3...} author1的数组为{book1，book2，book3 ...}

author2 has an array of {book13, book14, book15} author2具有一组{book13，book14，book15}

(i'm a beginner at JQuery) （我是JQuery的初学者）

This is the code that I have so far: 这是我到目前为止的代码： 

<!DOCTYPE html>
<html>
<head>
<title>Add or Remove text boxes with jQuery</title>
<script type="text/javascript" src="//code.jquery.com/jquery-latest.js"></script>
<style type="text/css">
<!--
#main {
    max-width: 800px;
    margin: 0 auto;
}
-->
</style>
</head>
<body>
<div id="main">
    <h1>Add or Remove text boxes with jQuery</h1>
    <div class="my-form">
        <form role="form" method="post">
            <p class="all_fields">

                <button class="add_author">Add Author</button>

                <div id="commonPart" class="commonPart">
                    <label for="author1">Author <span class="author-number">1</span></label>            
                    <br/>
                    <input type="text" name="author" value="" id="author1" />
                    <br/>
                    <button class="add_book">Add book</button>
                    <div>
                        <input type="text" class="bookName" name="authBook[]"/>
                    </div>
                </div>
            </p>
            <p><input type="submit" value="Submit" /></p>
        </form>
    </div>
</div>

<script type="text/javascript">

$(document).ready(function($){
    var wrapper         = $(".all_fields"); //Fields wrapper
    var commonPart      = $("#commonPart"); 
    var add_author      = $(".add_author"); //Add button ID
    var add_subButton   = $(".add_book"); //Add sub button ID
    $('.my-form .add-box').click(function(){

        var n = $('.all_fields').length + 1;
        if( 15 < n ) {
            alert('Stop it!');
            return false;
        }


    $(add_author).click(function(e){
       e.preventDefault();
        var htmlToAdd = $('<label for="author' + n + '">Author <span class="author-number">' + n + '</span></label><br/><input type="text" name="author' + n + '" value="" id="author' + n + '" /><br/><button class="add_book">Add book</button><a class="add-book" href="#">Add Book</a><div><input type="text" class="bookName" name="authBook' + n + '[]"/></div>');
        htmlToAdd.hide();
        $('.my-form p.all_fields:last').after(htmlToAdd);
        box_html.fadeIn('slow');
        return false;
    });

    $(add_book).click(function(e){
       e.preventDefault();
        var htmlToAdd = $('<div><input type="text" class="bookName" name="authBook' + n + '[]"/></div>');
        htmlToAdd.hide();
        $('.my-form p.all_fields:last').after(htmlToAdd);
        box_html.fadeIn('slow');
        return false;
    });

    $('.my-form').on('click', '.remove-box', function(){
        $(this).parent().css( 'background-color', '#FF6C6C' );
        $(this).parent().fadeOut("slow", function() {
            $(this).remove();
            $('.box-number').each(function(index){
                $(this).text( index + 1 );
            });
        });
        return false;
    });
});
</script>
</body>
</html>

3 个解决方案

解决方案1
 2 已采纳  2015-12-15 09:27:53

updated code(fixed some bugs..), try this.... 更新了代码（修复了一些错误。），请尝试此。 

  <!DOCTYPE html> <html> <head> <title>Add or Remove text boxes with jQuery</title> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <style type="text/css"> <!-- #main { max-width: 800px; margin: 0 auto; } --> </style> </head> <body> <div id="main"> <h1>Add or Remove text boxes with jQuery</h1> <div class="my-form"> <button onclick="addAuthor()" >Add Author</button><br><br> <div id="addAuth"></div> <br><br> <button onclick="submit()" >Submit</button> </div> <div id="result" ></div> </div> <script type="text/javascript"> var authors = 0; function addAuthor(){ authors++; var str = '<div id="auth'+authors+'"><input type="text" name="author" id="author'+authors+'" />' +'<button onclick="addMore(\\'auth'+authors+'\\')" >Add Book</button>' +'</div>'; $("#addAuth").append(str); } var count=0; function addMore(id){ count++; var str = '<div id="bookDiv'+count+'">' +'<input class="'+id+'" type="text" name="book'+id+'" />' +'<span onclick="addMore(\\''+id+'\\')" style="font-size: 20px; background-color: green; cursor:pointer;">+</span>' +'<span onclick="removeDiv(\\'bookDiv'+count+'\\')" style="font-size: 20px; background-color: red; cursor:pointer; margin-left:1%;">-</span>' +'</div>'; $("#"+id).append(str); } function removeDiv(id){ var val = confirm("Are you sure ..?"); if(val){ $("#"+id).slideUp(function(){$("#"+id).remove();}); } } function submit(){ var arr = []; for(i=1; i<=authors; i++){ var obj = {}; obj.name = $("#author"+i).val(); obj.books = []; $(".auth"+i).each(function(){ var data = $(this).val(); obj.books.push(data); }); arr.push(obj); } $("#result").html(JSON.stringify(arr)); } </script> </body> </html>

解决方案2
 0  2015-12-15 08:56:59

Please try this code and include jquery min js : 请尝试以下代码，并包括jquery min js： 

<div class="my-form">
    <form role="form" method="post">
        <p class="all_fields">



            <div id="commonPart" class="commonPart">
                <label for="author1">Author <span class="author-number"></span></label>            

                <input type="text" name="author" value="" id="author1" />
                <br/>

                <div>
                    <label for="author1">book <span class="author-number"></span></label>      
                    <input type="text" class="bookName" name="authBook[]"/>
                </div>

            </div>
        <button type="button" class="add_author" onclick="AddCustomMOre();">Add More</button>

        </p>
        <p><input type="submit" value="Submit" /></p>
    </form>
</div>
   <script> function AddCustomMOre(){
   $(".all_fields ").append('<div id="commonPart" class="commonPart"><label for="author1">Author <span class="author-number"></span></label> <input type="text" name="author" value="" id="author1" /> <br/> <div><label for="author1">book <span class="author-number"></span></label>  <input type="text" class="bookName" name="authBook[]"/></div>   <a href="javascript:void(0)" onclick="$(this).parent().remove();">Remove</a></div>');  
} </script>

解决方案3
 0  2015-12-15 09:13:07

You can try this.... 你可以试试这个。 

<p class="all_fields">

    <button class="add_author">Add Author</button>

  <div class="commonPart">
    <label for="author1">Author <span class="author-number">1</span></label>            
    <br/>
    <input type="text" name="author1" value="" id="author1" />
    <br/>
    <button div-id="1" class="add_book">Add book</button>
    <div id="books1">
        <input type="text" class="bookName" name="authBook[]"/>
    </div>
  </div>
</p>

<script>
    var c=1;
    $(".add_author").on("click",function(){
        c++;
        $(".all_fields").append('<div class="commonPart"><label for="author'+c+'">Author <span class="author-number">'+c+'</span></label><br/><input type="text" name="author'+c+'" value="" id="author'+c+'" /><br/><button class="add_book" div-id="'+c+'">Add book</button><div id="books'+c+'"><input type="text" class="bookName" name="authBook[]"/></div></div>');
    });
    $(".add_book").on("click",function(){
        var id=$(this).attr("div-id");
        $("#books"+id).append('<input type="text" class="bookName" name="authBook[]"/>');
    });
</script>

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 如何使用jquery添加2个文本框？ - How Do I add 2 text boxes with jquery? 如何在Javascript中创建变量，并在变量名称中添加一个不断变化的数字？ - How do I create a variable in Javascript, and add a changing number to the variable's name? 如何使用更改变量名称添加固定变量名称 - How to add fixed variable name with changing variable name 如何删除现有的类名并添加一个带有jQuery和cookie的新名称？ - How do I remove an existing class name and add a new one with jQuery and cookies? 使用javascript和jQuery更改变量名称 - Changing variable name with javascript and jQuery 如何删除选择的名称，并使用javascript或jquery在textarea上添加名称？ - How can I remove name on the select and add the name on the textarea with javascript or jquery? 当所有 select 框都有一个名称时，我如何从 DOM 添加/删除 select 框，以便在提交时我从活动的 select 框中获取值？ - How can I add/remove select boxes from DOM when all select boxes have one name so that upon Submit I get value from active select box? Jquery 选择按名称或 ID 删除属性 - Jquery chosen remove attributes by name or id 如何使用变量引用文本框 - How do I reference text boxes using a variable 如何使用Javascript将文本框和按钮添加到表中？ - How do I add text boxes and buttons into a table using Javascript?
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM