Dynamically adding controls to a form in ASP.NET MVC5

Question

OK, I've looked around and while I've found a few spots that offer some useful suggestions, none are quite right as I can tell. I'm making a book database site on ASP.NET MVC 5. For the edit site to edit individual books, my form contains a list of textboxes containing the names of all the book's authors. I want to be able to add or remove these dynamically, so that with a click of a button a new empty box will be added or the current box will be removed. I tried using jQuery, writing a pair of functions as follows:

    function addAuthor() {
        var div = $('<div class="form-group author-input"></div>');
        var cnt = $('<label for="Author" class="control-label col-md-2">Author</label>');
        div.append(cnt);
        cnt = $('<div class="col-md-10"></div>');
        cnt.append('<input type="text" name="authorList" />');
        div.append(cnt);
        div.append('<button class="glyphicon-plus-sign" onclick="addAuthor"></button>');
        div.append('<button class="glyphicon-minus-sign" onclick="removeAuthor"></button>');
        $(this).parent().after(div);
    }

    function removeAuthor() {
        if ($('#AuthorSet > div').length > 1)
            $('#AuthorSet').remove($(this).parent());
        else
            alert("Must have at least one author");
    }

The part of the view being modified looks like this:

    <div id="AuthorSet">
        @foreach (Bookshelf.Models.Author auth in Model.Authors.OrderBy(a=>a.LastName)
                                                               .ThenBy(a=>a.FirstMidName))
        {
            <div class="form-group author-input">
                @Html.Label("Author", new { @class = "control-label col-md-2" })
                <div class="col-md-10">
                    @Html.TextBox("authorList", auth.FullName)
                </div>
                <button class="btn btn-default glyphicon-plus-sign text-center" onclick="addAuthor">+</button>
                <button class="btn btn-default glyphicon-minus-sign text-center" onclick="removeAuthor">-</button>
            </div>
        }
    </div>

EDIT: I accidentally posted the wrong version a few minutes ago; I had a version without an onclick fuction but instead used a class to set it in jQuery, and I accidentally posted that version earlier. This has been corrected. However, this is not working at all. Any time I click on the buttons it sends me to the post method as if I'd clicked the "submit" button at the end of the form. Is there any way I can make this dynamic list of textboxes using just MVC 5 and jQuery? Is there a way to do it with AJAX?

The previous comment to add a preventDefault command to the functions works for a single addition, but if I try to add more than one new author to the list it still submits instead of just calling the function. I'm sorry if there are a lot of problems with my code as someone said, I'm still new and learning.

Make your buttons type="button" (by default they will be submit buttons). But why are you adding multiple addAuthor buttons?) — user3559349
– user3559349, Commented Aug 2, 2016 at 22:29
There are multiple problems with your code as it stands, but it'd be easier to point them all out if you show the full form from your view that you're trying to modify with these functions, and the model you're attempting to bind it to. — Jakotheshadows
– Jakotheshadows, Commented Aug 2, 2016 at 22:30
Courtesy of @StephenMuecke - Have a look at this: dotnetfiddle.net/UjxtUW - I had a pretty similar issue with dynamically adding/removing elements, then using them to post to my MVC controller. Fortunately, Stephen saved the day! :) — Geoff James
– Geoff James, Commented Aug 2, 2016 at 22:40

StriplingWarrior · Accepted Answer · 2016-08-02 22:28:29Z

3

By default, buttons will cause a form submit. You need to prevent the default behavior in your click handler like so:

function addAuthor(e) {
    e.preventDefault();
    ...
}

answered Aug 2, 2016 at 22:28

StriplingWarrior

158k29 gold badges261 silver badges326 bronze badges

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

Collectives™ on Stack Overflow

Dynamically adding controls to a form in ASP.NET MVC5

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related