получить значение из формы select а затем вычислить значение во входных данных


получить значение из формы select а затем вычислить значение во входных данных

03.10.2020 06:34:55 Просмотров 36 Источник

Я пытаюсь вычислить несколько значений на основе нескольких выборок из a, а затем сложить данные и отобразить их в одной и той же форме. Я попробовал кое-что из jquery, но на самом деле это совсем не сработало. Я пробовал использовать некоторые Javascript для выполнения вычислений, но, похоже, ничего не происходит.

Лезвие:

@extends('layout.layouts')

@section('content')

<!DOCTYPE html>
<html lang="en" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title>NCIC - Reports</title>
  </head>
  <body>
    <br>
    <h1>New Report</h1>
    <br>
    <form action="{{ 'storereport' }}" method="POST" enctype="multipart/form-data">
      @csrf
  <div class="form-group">
    <label for="title">Title</label>
    <input type="text" class="form-control" name="title">
  </div>
  <div class="form-group">
    <label for="author">Reporting Officer</label>
    <input type="text" class="form-control" name="author" value="{{ Auth::user()->name }}">
  </div>
  <div class="form-group">
    <label for="profileid">SSN</label>
    <input type="text" class="form-control" name="profileid">
  </div>
  <div class="form-group">
    <label for="report">Report</label>
    <textarea class="form-control" name="report" rows="10"></textarea>
  </div>
  <div class="form-group">
    <label for="selectpicker">Select Offences</label>
    <select class="selectpicker" id="lawspicker" name="laws[]" data-width="100%" data-live-search="true" multiple>
    @foreach($laws as $law)
    <option value="{{ $law->name }} {{ $law->fine }} {{ $law->months }}">Offence: {{ $law->name }} </option>
    @endforeach
  </select>
  </div>
  <div class="form-group">
    <label for="punishment">Punishment</label>
    <input type="text" class="form-control" id="punishment" name="punishment">
  </div>
  <hr style="background-color:white;">
  <button type="submit" class="btn btn-success">Submit</button>
  <a class="btn btn-info float-right" href="{{ route('reports') }}">Main menu</a>
</form>
  </body>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>
  <script>

    $("#lawspicker").keyup(function(){
      $("#punishment").val(parseFloat($("{{ $law->months }}").val()) + parseFloat($('{{ $law->fine }}').val()));
    })

    $("#lawspicker").change(function(){
      $("#punishment").val(parseInt($("#lawspicker").val());
    })

  </script>
  <style>
    body{
      background-color: #353b48;
      color:white;
    }
  </style>
</html>


@endsection

Чтобы уточнить, я хочу, чтобы {{ $law->months }} и {{ $law->fine }} сложились, а затем отображались в #punishment <input>

Спасибо, что посмотрели!

У вопроса есть решение - Посмотреть?

Ответы - получить значение из формы select а затем вычислить значение во входных данных / get value from form select and then calculate value in an input

Является ответом!
Zeeshan Ahmed

03.10.2020 07:12:43

Вы можете сделать что-то вроде этого.

Обновите тег <option> до этого

<option data-fine="{{$law['fine']}}" data-months="{{$law['months']}}" value="{{ $law['name'] }} {{ $law['fine'] }} {{ $law['months'] }}">Offence: {{ $law['name'] }} </option>

и вы можете получить атрибут data выбранного тега <option> в вашем скрипте следующим образом.

`$("#lawspicker").change(function() {
  var fine = $(this).find(':selected').data('fine');
  let months = $(this).find(':selected').data('months');
  $("#punishment").val(parseInt(fine+months));
});`

Спасибо.

Unflux

03.10.2020 07:40:14

Я бы хотел лично заменить ваш элемент select на checkboxes.

Ниже приведен пример использования jquery для вычисления fine и months при нажатии кнопки, но это может быть событие по вашему выбору. Я убрал его обратно из вашего примера, чтобы было легче видеть, что происходит.

Пример флажка

<div class="container mt-4">
  <div class="row">
    <div class="col-12">
      <div class="form-group">
        <h4>Select Offences</h4>
        <div class="d-flex">
          <div class="custom-control custom-checkbox">
            <input type="checkbox" name="laws[]" id="law-a" data-fine="100" data-months="12" class="custom-control-input offence">
            <label for="law-a" class="custom-control-label">Law A</label>
          </div>
          <div class="custom-control custom-checkbox">
            <input type="checkbox" name="laws[]" id="law-b" data-fine="999" data-months="6.5" class="custom-control-input offence">
            <label for="law-b" class="custom-control-label">Law B</label>
          </div>
          <div class="custom-control custom-checkbox">
            <input type="checkbox" name="laws[]" id="law-c" data-fine="123.5" data-months="8" class="custom-control-input offence">
            <label for="law-c" class="custom-control-label">Law C</label>
          </div>
        </div>
      </div>
    </div>
    <div class="col-12">
      <div class="form-group">
        <label for="punishment">Punishment</label>
        <input type="text" class="form-control" id="punishment" name="punishment" readonly>
      </div>
    </div>
    <div class="col-12">
      <button type="submit" id="submit" class="btn btn-primary">Submit</button>
    </div>
  </div>
</div>

Тогда некоторые javascript (jquery)

$(function() {
  $("#submit").click(function() {
    let fine = 0;
    let months = 0;
    $(".offence").each(function(index, obj) {
      if (obj.checked) {
        fine += parseFloat($(obj).data("fine"));
        months += parseFloat($(obj).data("months"));
      }
    })
    $("#punishment").val("Fine: "+ fine + " Months: " + months);
  })
});

Когда вы нажимаете submit, javascript будет циклически проходить через каждый элемент с классом checkbox0, а затем считывать значение checkbox1 и вычислять итоговые значения.

Пример скрипки: https://jsfiddle.net/dbtas60w/

Множественный пример

checkbox2

язык JavaScript

checkbox3

Пример скрипки: https://jsfiddle.net/dbtas60w/1/

Помочь в развитии проекта:
Закрыть X