创建一个新功能

Question

我有一个新的“订单”页面，在该页面中，用户应选择类别，然后选择服务，然后为订单填写数量字段。

我想创建一个更改，我想用@if和@else定义一个函数

在此功能中，假设未选择服务，则不显示数量字段 但是，如果选中它，则数量字段将会出现

但是我不知道如何定义这个功能。 这是我的代码：

@extends('user.layouts.master')
@section('site_title', 'New Order')
@section('page_title')
    <i class="fa fa-first-order"></i>New Order
    @endsection
@section('body')
    <div class="row">
        <div class="col-md-6 offset-md-3">
            @include('user.layouts.flash')
            <div class="card">
                <div class="card-header d-flex align-items-center">
                    <h3 class="h4">Submit new order</h3>
                </div>
                <div class="card-body">
                    <form action="{{ route('newOrder.store') }}" method="post">
                        @csrf
                        <div class="form-group">
                            <label class="form-control-label"><b>category</b></label>
                            <select class="form-control" id="category" name="category" required>
                                <option>Select category</option>
                                @foreach($categories as $category)
                                    <option value="{{ $category->id }}">{{ $category->name }}</option>
                                @endforeach
                            </select>
                        </div>


                        <div class="form-group">
                            <label class="form-control-label"><b>Service</b></label>
                            <select class="form-control input-lg" id="service" name="service" required>
                            </select>
                        </div>

            @if ($item->service)            



                        <div class="form-group">
                            <label for="details" class="control-label">Details</label>
                            <textarea name="details"
                                      id="details"
                                      rows="5"
                                      style="height: 150px"
                                      class="form-control" readonly></textarea>

                        <div class="form-group">
                            <label class="form-control-label"><b>quantity</b></label>
                            <input class="form-control" name="quantity" id="quantity" required>
                        </div>
                        <div class="row">
                            <div class="col-md-6">
                                <label style="color: #080B6A"><b>Min:</b><span id="min">0</span></b></label>
                            </div>
                            <div class="col-md-6">
                                <label style="color: #080B6A"><b>Max: </b><span id="max">0</span></b></label>
                            </div>
                        </div><br>
                        <div class="row">
                            <div class="col-md-6">
                                <label class="btn btn-success">Total price: <span
                                            id="price">0</span> {{ $general->base_currency }}</label>
                            </div>
                        </div><br>
                        <div class="form-group">
                            <input type="submit" value="Submit" class="btn btn-primary btn-block">
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('scripts')
    <script type="text/javascript">
        $(document).ready(function () {
            // fetch Service
            $(document).on('change', '#category', function () {
                var serId = $('option:selected', this).val();
                $.ajax({
                    type: 'POST',
                    url: '{{ route('get.pack') }}',
                    data: {id: serId},
                    success: function (data) {
                        $('#service').html('');
                        $('#service').append('<option>Select service</option>');
                        $.each(data, function (index, value) {
                            $('#service').append('<option value="' + value.id + '">' + value.name + '</option>');
                        });
                        var total = 0;

                        $('#details').text();
                        $('#min').text(0);
                        $('#max').text(0);
                        $('#price').text(total.toFixed(2))
                    },
                })
            });

            //package price and quantity
            var price = 0;
            var quantity = 0;
            $(document).on('change', '#service', function () {
                var serviceId = $('option:selected', this).val();
                if (!isNaN(serviceId)) {
                    $.ajax({
                        type: 'POST',
                        url: '{{ route('get.pack.details') }}',
                        data: {id: serviceId},
                        success: function (data) {
                            $('#details').text(data.details);
                            $('#min').text(data.min);
                            $('#max').text(data.max);
                            price = data.price_per_k;
                            var total = (price * quantity) / 1000;
                            $('#price').text(total.toFixed(2))
                        },
                    });
                } else {
                    $('#details').text(0);
                    $('#min').text(0);

                    $('#max').text(0);
                    price = 0;
                    quantity = 0;
                    var total = 0;
                    $('#price').text(total.toFixed(2))
                }
            });
            $(document).on('keyup', '#quantity', function () {
                quantity = $(this).val();
                var total = (price * quantity) / 1000;
                $('#price').text(total.toFixed(2))
            });
        });
    </script>
@endsection

Answer 1

您可以使用javascript

// first we hide what we want using style="display:none" and add a calss or attribute to the hidden elements ex: hidden-elements
<div class="form-group hidden-elements" style="display:none">
                        <label class="form-control-label"><b>quantity</b></label>
                        <input class="form-control" name="quantity" id="quantity" required>
                    </div>


// when we change the value of the service 
$(document).on('change', '#service', function () {
            var serviceId = $('option:selected', this).val();
            if (!isNaN(serviceId)) {
                // here we show the hidden elements after we choose the service
                $('.hidden-elements').show();
                $.ajax({
                    type: 'POST',
                    url: '{{ route('get.pack.details') }}',
                    data: {id: serviceId},
                    success: function (data) {
                        $('#details').text(data.details);
                        $('#min').text(data.min);
                        $('#max').text(data.max);
                        price = data.price_per_k;
                        var total = (price * quantity) / 1000;
                        $('#price').text(total.toFixed(2))
                    },
                });
            } else {
                $('#details').text(0);
                $('#min').text(0);

                $('#max').text(0);
                price = 0;
                quantity = 0;
                var total = 0;
                $('#price').text(total.toFixed(2))
            }
        });