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:

vijayP · Accepted Answer · 2015-12-09 07:03:36Z

1

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>

answered Dec 9, 2015 at 7:03

vijayP

11.5k5 gold badges28 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

learningbyexample Over a year ago

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 Over a year ago

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.

vijayP Over a year ago

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

learningbyexample Over a year ago

won't this overwrite the previous variable with the same index?

musafar006 · Accepted Answer · 2015-12-09 07:06:55Z

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 9, 2015 at 7:06

answered Dec 9, 2015 at 7:01

musafar006

99911 silver badges23 bronze badges

Comments

Community · Accepted Answer · 2017-05-23 11:52:21Z

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'

Collectives™ on Stack Overflow

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

3 Answers 3

4 Comments

Comments

Key changes:

Disclaimer:

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

4 Comments

Comments

Key changes:

Disclaimer:

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related