Laravel 5.6 Javascript Inputs sum

Question

The problem is how do I increment input id and check all inputs sum if its i<50 it form can be submitted else will give popup. Big problem is its not static inputs can be less or many.

This is my Form 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>

Do you want to do it with plain javascript? Or do you use jQuery? — Matthias S
– Matthias S, Commented Apr 4, 2018 at 9:54
I don't care at all sir. Just need to do it. just don't know how. Please help. — Ruka Xing
– Ruka Xing, Commented Apr 4, 2018 at 9:56

Matthias S · Accepted Answer · 2018-04-05 07:21:43Z

2

If you use jQuery, you can change the submit button to a normal button and trigger the submit event only in case the requirements are met, otherwise you can show your popup.

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

That way it will show a popup if the sum is >= 50 and otherwise submit the form.

JS Fiddle: https://jsfiddle.net/rxz0ndb4/7/

edited Apr 5, 2018 at 7:21

answered Apr 4, 2018 at 10:17

Matthias S

3,5834 gold badges26 silver badges33 bronze badges

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

Comments

athulpraj · Accepted Answer · 2018-04-04 10:04:58Z

1

you can give a common class to the input fields and then call keyup function in jquery to detect input change .. each time a change happens you can calculate the sum of values and enable or disable the submit button accordingly

suppose you give a class numberInput to all input fields that you need to validate

 $('.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);

 });

edited Apr 4, 2018 at 10:04

answered Apr 4, 2018 at 9:57

athulpraj

1,5771 gold badge15 silver badges25 bronze badges

2 Comments

Ruka Xing Over a year ago

Sir i can do like this . but I just don't know how many inputs will be there. that's the point of question sir.

athulpraj Over a year ago

instead of input[type=number] you can also use .numberInput provided you add the class to all input fields that you need to validate

Collectives™ on Stack Overflow

Laravel 5.6 Javascript Inputs sum

2 Answers 2

Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related