Trying to add a submit button using jQuery But only on the last page

Question

I am trying for the submit button to show up on the last page, each page has one set of question and to move forward or backward there's the Next and Back buttons. On the last page is where I want my submit button to be placed and when clicked I want some output revealing the submit button was clicked.

Here is my code ....

 if (i.Question_Type == "DROPDOWN")
    {

        <div class="container text-center">


                <div class="row idrow" data-questions="@counter">
                    @{counter++;
                    }




                        <div id="question1" class="form-group">
                            <label class="lab text-center" for="form-group-select">
                                @i.Question_Order @Html.Raw(@i.Question)
                            </label>
                            <select class="form-control" id="form-group-select">
                                @for (int x = 1; x <= Convert.ToInt32(i.Question_SubType); x++)
                                    {
                                        var t = x - 1;
                                        if (i.qOps != null)
                                        {
                                        <option> @i.qOps.options[t]</option>
                                        }
                                        else
                                        {
                                        <option> @x</option>

                                        }
                                    }
                            </select>
                        </div>







                </div>

        </div>

                        }

                        if (i.Question_Type == "RADIO")
                        {




        <div class="container">
            <div class="row idrow" data-questions="@counter">
                @{counter++;
                }
                <div class="form-group">
                    <label class="lab" for="questions">
                       @i.Question_Order @i.Question
                    </label>
                    <div class="row">
                        <div class="col-xs-12">
                            <div id="question1" class="radio-inline">
                                @for (int x = 1; x <= Convert.ToInt32(i.Question_SubType); x++)
                                {
                                    var t = x - 1;
                                    if (i.qOps != null)
                                    {
                                        <label class="radio-inline"><input type="radio" name="question"> @i.qOps.options[t]</label>
                                    }
                                    else
                                    {

                                          <label class="radio-inline"><input type="radio" min="0" max="@x" name="question"></label>

                                    }
                                }
                            </div>

                        </div>

                    </div>
                </div>


            </div>
        </div>

    }
    if (i.Question_Type == "CHECKBOX")
    {
        for (int y = 1; y <= Convert.ToInt32(i.Question_SubType); y++)
        {
            @*<div class="container">
                <div class="row">

                    <label>@y</label>   <input type="checkbox" name="question">

                </div>
            </div>*@
        }
    }

}
<div class="azibsButtons">
    <button type="button" id="previous"  class="btn btn-primary pull-left">Prev</button>

    <button type="button" id="next"  class="btn btn-primary pull-right">Next</button>

    <button type="button" id="submit" class= // what to put here??
</div>



<script>
    $(document).ready(function () {
        ShowTheelement(0);
        $("#previous").addClass('hidden');

        var dataVal = 0;

        $("#next").click(function () {
            dataVal++;
            $("#previous").removeClass('hidden');
            dataVal == $(".idrow[data-questions]").length-1 ? $(this).addClass('hidden') : $(this).removeClass('hidden');
            ShowTheelement(dataVal);
        });

        $("#previous").click(function () {
            dataVal--;
            $("#next").removeClass('hidden');
            dataVal == 0 ? $(this).addClass('hidden') : $(this).removeClass('hidden');
            ShowTheelement(dataVal);
        });
    });

    function ShowTheelement(dataVal) {
        $(".idrow").addClass('hidden');
        $(".idrow[data-questions='" + dataVal + "']").removeClass('hidden');
    }
</script>

Answer 1

When I understood you correctly, you could just use a similar approach as for your other buttons.

basic button setup

<div class="azibsButtons">
  <button type="button" id="previous"  class="btn btn-primary pull-left">Prev</button>

  <button type="button" id="next"  class="btn btn-primary pull-right">Next</button>

  <button type="button" id="submit" class="hidden btn btn-primary pull-right">Submit</button>
</div>

in your document ready function

$("#next").click(function () {
  dataVal++;
  $("#previous").removeClass('hidden');
  dataVal == $(".idrow[data-questions]").length-1 ? $(this).addClass('hidden') : $(this).removeClass('hidden');
  ShowTheelement(dataVal);
  if (dataVal == $(".idrow[data-questions]").length-1) {
    $("#submit").removeClass('hidden');
  }
});

$("#previous").click(function () {
  dataVal--;
  $("#next").removeClass('hidden');
  dataVal == 0 ? $(this).addClass('hidden') : $(this).removeClass('hidden');
  ShowTheelement(dataVal);
  if (dataVal == $(".idrow[data-questions]").length-2) {
    $("#submit").addClass('hidden');
  }
});

This is not a very nice code but should help you with your problem.

good luck

Awesome work dude, but i guess we were just missing one last thing which kept showing the submit button on every page but now its not because of this piece of code ....

<script>
  $(document).ready(function () {
    ShowTheelement(0);
    $("#previous").addClass('hidden');
    $("#submit").addClass('hidden');

    var dataVal = 0;
....