Adding more input fields after button using knockout

Question

So i have displayed two input fields the user can enter information in them. I also have another button "add" that allows the user to add another set of two input fields to enter data.

This is my current view of the what i have but i need to add the functionality of adding input fields into my viewModel so it is available upon user click.

jsFiddle of html

I would like to add the functionality of clicking the add button to be placed in like:

self.addName = function(){//return new input fields to user}

and in my html i would have <a href="#" onclick="addName()">

You didn't share any of your viewModel code... What have you tried? — webketje
– webketje, Commented Oct 21, 2015 at 17:17

Anton F · Accepted Answer · 2015-10-21 08:46:27Z

2

The thing is, you need to have observables in array to bind to multiple inputs. You do it like this:

<div class="addNames">
    <!-- ko foreach: ViewModel.values -->
    <div class="fname" >
        <input data-bind="value: $data.value" placeholder="Add your fname..." contenteditable/>
    </div>
    <!-- /ko -->
</div>
<div class="addBtn">
    <a data-bind="click: ViewModel.addValue"> Add Name</a>
</div>

And JS:

 ViewModel = {
        values: ko.observableArray([
            {value: ko.observable('initial value')}
        ]),
        addValue: function(){
            ViewModel.values.push({ value: ko.observable('')});
            ViewModel.values().forEach(function(data){
                console.log(data.value());
            });
        }
    }

    ko.applyBindings();

https://jsfiddle.net/x5wu7gsy/

answered Oct 21, 2015 at 8:46

Anton F

3281 silver badge8 bronze badges

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

Collectives™ on Stack Overflow

Adding more input fields after button using knockout

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