0

I'm trying to create a model with dynamic fields... in essence, my page has a few buttons that add text boxes.

I have a variable - "counter"

@{
    ViewBag.Title = "Create";
    var counter = 0;

}

I want to increase it everytime my button is clicked that adds a field..

<div class="form-group">


            <button class="control-label col-md-2" id="btnAddFieldTwo">Add Question with Multiple Answers</button>

            <div class="col-md-10">

                @using (Html.BeginForm())
                {
                    @Html.AntiForgeryToken()

                    <div id="fields2"></div>

                }


                <div style="color:blue"><b>Data:</b> @ViewBag.Data</div>
                <!-- JS includes -->
                <script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>

                <script type="text/javascript">

                $(document).ready(function () {
                    var $fields = $('#fields2');

                    $('#btnAddFieldTwo').click(function (e) {
                        e.preventDefault();
                        @{ counter++ }
                        $(' <input type="text" class="form-control" name="dynamicFieldTwo">Enter the question</input><br/>@Html.TextBox("Question",@counter, new { style="color:red" }) ').appendTo($fields);
                    });
                });

                </script>
            </div>
        </div>

I figured adding @{ counter++} right above the line that adds the dynamic text field would work. But the counter variable is only increased once no matter how many times I click the button. How do I increase counter every time the button is clicked ?

David
  • 31
  • 7
  • Your counter is server-side. You need a *client-side* counter to increment during the client-side click events. – David Dec 08 '18 at 19:52
  • Can you show me how? – David Dec 08 '18 at 19:52
  • I don't have the exact code handy, but start off by taking a look at what `@Html.TextBox("Question",@counter, new { style="color:red" })` outputs in the page source. How is the counter used in that output? In your JavaScript code, replicate that output while incrementing the counter value. – David Dec 08 '18 at 19:53
  • @Html.TextBox("Question", #HERE# , new { style="color:red" }) ---- how do I put the JavaScript variable there, it's named counter? - i put at the top of my page, and just above printing the input type I put counter++; – David Dec 08 '18 at 19:56
  • You don't put a JavaScript variable there, that's C# code. Perhaps you may need to start with some base understanding of the difference between client-side code and server-side code. This question, though in PHP, demonstrates the concept very canonically: https://stackoverflow.com/q/13840429/328193 The server-side language isn't important, the concept is exactly the same here. What you need to do is entirely manipulate the page in client-side code. So you need to start examining what your client-side code looks like. Starting with what `@Html.TextBox()` outputs to the page. – David Dec 08 '18 at 19:58

0 Answers0