尝试使用 jQuery 添加提交按钮但仅在最后一页

Question

我正在尝试让提交按钮显示在最后一页上，每页都有一组问题，向前或向后移动有下一步和返回按钮。在最后一页是我希望放置提交按钮的位置，单击时我想要一些显示提交按钮已被单击的输出。

这是我的代码....

 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

当我理解正确时，您可以使用与其他按钮类似的方法。

基本按钮设置

<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>

在你的文档中准备好函数

$("#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');
  }
});

这不是一个很好的代码，但应该可以帮助您解决问题。

祝你好运

伙计，干得真棒，但我想我们只是错过了最后一件事，它一直在每个页面上显示提交按钮，但现在不是因为这段代码....

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

    var dataVal = 0;
....

尝试使用 jQuery 添加提交按钮但仅在最后一页

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

javascript

jquery

html

button

submit-button