stackoom
  简体   繁体   中英

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  5   3    javascript/ jquery

Question

I want to make a book catalog with JQuery to add books to a author. 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...}

author2 has an array of {book13, book14, book15}

(i'm a beginner at 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 answers

solution1
 2 ACCPTED  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>

solution2
 0  2015-12-15 08:56:59

Please try this code and include 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>

solution3
 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>

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question How Do I add 2 text boxes with jquery? 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 How do I remove an existing class name and add a new one with jQuery and cookies? Changing variable name with javascript and jQuery How can I remove name on the select and add the name on the textarea with javascript or jquery? 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 chosen remove attributes by name or id How do I reference text boxes using a variable How do I add text boxes and buttons into a table using Javascript?
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM