How do I add input fields with jquery for multiple inputs?

Question

I want to be able to add n number of books to n number of authors. What I want to do is this:

where the light blue boxes are the buttons. I want to add multiple books to a author with the "add book" button.

the code that I have is this:

   <form action="next.php" method="post">
        <div class="input_fields_wrap">
            <button class="add_field_button">Add Author</button>
            <div><input type="text" name="myAuthorText[]"></div>
            <button class="add_sub_field_button">Add Author Books</button>
            <div><input type="text" name="myBooksText[]"></div>
        </div>
    </form>    

<SCRIPT language="javascript">

    $(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    var add_subButton      = $(".add_sub_field_button"); //Add sub button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="myAuthorText[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });

    $(add_subButton).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div><input type="text" name="myBooksText[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

</SCRIPT>

what I'm getting is:

score 1 · Accepted Answer · answered Dec 09 '15 at 07:03

Check this code snippet. I made some chnages in HTML and Javascript too. Please compare it with your original one to see the differences. Hope it will help you a bit:

$(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var commonPart      = $("#commonPart"); 
    var add_button      = $(".add_field_button"); //Add button ID
    var add_subButton      = $(".add_sub_field_button"); //Add sub button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            var htmlToAdd = commonPart.clone().attr("id","commonPart_"+x);
            htmlToAdd.find(".addedDiv").remove();
            $(wrapper).append(htmlToAdd); //add input box
          x++; //text box increment
        }
    });

    $(document).on("click",".add_sub_field_button",function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(this).closest(".commonPart").append('<div class="addedDiv"><input type="text" class="bookname" name="myBooksText[]" placeholder="Book name"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

.bookname{
  margin-left: 30px;
  }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
   <form action="next.php" method="post">
        <div class="input_fields_wrap">
            <button class="add_field_button">Add Author</button>
            <div id="commonPart" class="commonPart">
            <div><input type="text" name="myAuthorText[]" placeholder="Auth name"></div>
            <button class="add_sub_field_button">Add Author Books</button>
            <div><input type="text" class="bookname" name="myBooksText[]" placeholder="Book name"></div>
             </div> 
        </div>
    </form>

How do I access them in the $_POST? `echo $_POST["myAuthorText"][0]; echo $_POST["myBooksText"][1];` for each in their respective books for the author — learningbyexample, Dec 09 '15 at 07:10
how do i know which are assigned to which books and authors. For example in my example I have Dr. Seuss and his books. How do I access only his books. — learningbyexample, Dec 09 '15 at 07:30
in that case i think we will have to give index for each textbox. E.g. instead of `myAuthorText[]`; it will be `myAuthorText[0]`, `myAuthorText[1]` and associated books will also have same index number. Hence all book fields associated with `myAuthorText[0]` will have name = `myBooksText[0]` and so on — vijayP, Dec 09 '15 at 07:59
won't this overwrite the previous variable with the same index? — learningbyexample, Dec 09 '15 at 08:02

musafar006 · Answer 2 · 2015-12-09T07:06:55.017

0

You can use jquery.clone()

Like this:

$( "#id-of-input" ).clone().appendTo( "#id-of-same-div" );

Place this inside button click.

JSFiddle

edited Dec 09 '15 at 07:06

answered Dec 09 '15 at 07:01

musafar006

931
11
22

score 0 · Answer 3 · edited May 23 '17 at 11:52

Not a full answer, but this gives the nesting that you're looking for and lets you add books to multiple authors. I couldn't get the "saving" to work properly, I suspect the script in your question is not the complete script.

Key changes:

added styling to indent books
don't show the add book button until there is an author
add the "add book" button below each author
add books inside the author block, not the top level wrapper block

Disclaimer:

As I mentioned above, I wasn't able to test this fully. This answer is "you might find something like this helpful" rather than "I have fully and completely solved your problem, please copy+paste+deploy".

  <form action="next2.php" method="post">
        <div class="input_fields_wrap">
            <button class="add_field_button">Add Author</button>
            <div><input type="text" name="myAuthorText[]"></div>
        </div>
    </form>    

<style>
.author_wrap button,
.author_wrap input { 
  margin-left: 10px;
} 
</style>
<script type="text/javascript">

    $(document).ready(function() {
    var max_fields      = 10; //maximum input boxes allowed
    var wrapper         = $(".input_fields_wrap"); //Fields wrapper
    var author_wrapper  = $(".author_wrap"); // Author's book fields wrapper
    var add_button      = $(".add_field_button"); //Add button ID
    var add_subButton      = $(".add_sub_field_button"); //Add sub button ID

    var x = 1; //initlal text box count
    $(add_button).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(wrapper).append('<div class="author_wrap"><input type="text" name="myAuthorText[]"/><a href="#" class="remove_field">Remove</a><br/><button class="add_sub_field_button">Add Author Books</button><div><input type="text" name="myBooksText[]"></div></div>'); //add input box
        }
    });

    $(add_subButton).click(function(e){ //on add input button click
        e.preventDefault();
        if(x < max_fields){ //max input box allowed
            x++; //text box increment
            $(author_wrapper).append('<div><input type="text" name="myBooksText[]"/><a href="#" class="remove_field">Remove</a></div>'); //add input box
        }
    });
    $(wrapper).on("click",".remove_field", function(e){ //user click on remove text
        e.preventDefault(); $(this).parent('div').remove(); x--;
    })
});

</script>

Note: I took the liberty of replacing the depracated language attribute on the script tags with type='text/javascript'

How do I add input fields with jquery for multiple inputs?

3 Answers3

Key changes:

Disclaimer: