Laravel 5.6 Javascript 输入总和

Question

问题是我如何增加输入 id 并检查所有输入总和，如果它的i<50 可以提交表单，否则会弹出。大问题是它的非静态输入可以少也可以多。

这是我的表单exams.blade.php

<form method="post" action="{{ route('exams.custom') }}">
{{ csrf_field() }}

        <h3 class="page-title">Сэдэв</h3>

        <div class="panel panel-default">
            <div class="panel-heading">
                Сэдэв сонголт
            </div>

            <div class="panel-body">
            @foreach ($duplicates as $duplicate)
            {{ $duplicate->topic->title }} нийт {{ $duplicate->total }} асуулт байна.<br>
            <input type="number" name="number[{{ $duplicate->topic->id }}]"></input><br><br>
            @endforeach
            <br/>

            </div>
        </div>  

    <br><button type="submit">Сонгох</button>

</form>

Answer 1

如果你使用jQuery，你可以将提交按钮改为普通按钮，只有在满足要求时才触发提交事件，否则你可以显示你的弹窗。

<form id="examsForm" method="post" action="{{ route('exams.custom') }}">
....
....
    <button type="button" class="sendExamsForm">Сонгох</button>
</form>

<script>
$(document).ready(function() {
            $(".sendExamsForm").click(function() {
                var sum = 0;
                $.each($('input[type=number]'),function(){
                    sum = sum + parseInt($(this).val());
                });
                if (sum < 50) {
                    $("#examsForm").submit();
                } else {
                    alert("Too many points");
                }
            });
        });
</script>

这样，如果总和 >= 50，它将显示一个弹出窗口，否则提交表单。

JS 小提琴： https://jsfiddle.net/rxz0ndb4/7/

Answer 2

您可以给输入字段一个通用类，然后在 jquery 中调用 keyup 函数来检测输入更改。每次发生更改时，您可以计算值的总和并相应地启用或禁用提交按钮

假设您为所有需要验证的输入字段提供一个类 numberInput

 $('.numberInput').keyup(function(e) {
      // check sum of input fields < 50 here and enable or disble the button
      var sum = 0;
      $.each($('input[type=number]'),function(){
        sum = sum+$(this).val();
      });
      if(sum<50) $(':input[type="submit"]').prop('disabled', false);
      else $(':input[type="submit"]').prop('disabled', true);

 });