кнопка сохранения не выводится в консоли с помощью ajax

Question

Я пытаюсь сохранить данные с помощью ajax, но в сетевой консоли ... после нажатия кнопки ADD CHARGE ничего не происходит.

Вот HTML-код моей кнопки и код AJAX.

function saveCharge() {
          
            var charge_per_order = $('#charge_per_order').val();
               alert(values);
            $('#saveCharge').modal('show');
               alert(values);
            $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                url: "{{URL::to('api/saveCharge')}}",
                data:{'charge_per_order':charge_per_order},
                method:'POST',

                success: function( resp ) {
                    $('#saveCharge').modal('hide');
                    location.reload();
                },
                error: function( req, status, err ) {
                    console.log( 'something went wrong', status, err );
                }
            });

        }

            <a class="btn btn-primary" href="javascript:void(0);" data-toggle="modal" data-target="#saveCharge" onclick="saveCharge();">
                <span class="glyphicon glyphicon-edit"></span>  Add Charge
            </a>


    <!-- Modal -->
    <div class="modal fade" id="saveCharge" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="saveCharge">Add Charge</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                                           <form id="saveCharge" name="saveCharge" >
                        {{ csrf_field() }}

                        <div class="row">
                            <div class="col-md-6 mb-3 form-group">
                                chargeperorder: <input type="text" name="charge_per_order" class="form-control"><br>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <a  href="javascript:void(0);" onclick="return saveCharge();" value="" class="btn btn-primary">Save changes</a>
                            </div>
                        </div>

                    </form>
                </div>

            </div>
        </div>
    </div>

когда я нажимаю кнопку сохранения на модальной панели, ничего не происходит. У меня также есть контроллер идеально подходит для метода хранения в Джейсон данных API.

Контроллер:

 public function saveCharge(Request $request)
{


    $country_id = $request->country;
    $exchange_id = $request->exchange;
    $market_id = $request->market;
    $brokerage_company_id = $request->brokerage_company;
    $charge_intraday = $request->charge_intraday;
    $charge_delivery = $request->charge_delivery;
    $charge_per_lot = $request->charge_per_lot;
    $charge_per_order = $request->charge_per_order;


    $data = array(
        'country_id'=>$country_id,
        'exchange_id'=>$exchange_id,
        'market_id'=>$market_id,
        'brokerage_company_id'=>$brokerage_company_id,
        'charge_intraday'=>$charge_intraday,
        'charge_delivery'=>$charge_delivery,
        'charge_per_lot'=>$charge_per_lot,
        'charge_per_order'=>$charge_per_order,

    );
    //  DD($data);
    $res = UserProfile::where('user_id', Auth::user())->create($data);

    echo json_encode($res);
}

Добавляем сюда мой экран консоли:

ОШИБКА COSOLE:

Uncaught TypeError: saveCharge не является функцией на HTMLAnchorElement.onclick (профиль: 347)

Answer 1

В вашей функции есть сбой, просто переименуйте ее в что-то вроде saveChanges ()

Я думаю, это из-за имени и идентификатора вашей формы. Поэтому измените имя и идентификатор вашей формы или измените имя функции.

<html>
	<head>
		<title>TEST</title>
		<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
	</head>
	<body>
	
            <a class="btn btn-primary" href="javascript:void(0);" data-toggle="modal" data-target="#saveChargeModal" onclick="saveCharges();">
                <span class="glyphicon glyphicon-edit"></span>  Add Charge
            </a>


    <!-- Modal -->
    <div class="modal fade" id="saveChargeModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="saveChargeHeading">Add Charge</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <div class="modal-body">
                                           <form id="saveChargeForm" name="saveChargeForm" >

                        <div class="row">
                            <div class="col-md-6 mb-3 form-group">
                                chargeperorder: <input type="text" name="charge_per_order" class="form-control"><br>
                            </div>

                            <div class="modal-footer">
                                <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                                <a href="javascript:void(0);" onclick="return saveCharges()">Save changes</button>
                            </div>
                        </div>

                    </form>
                </div>

            </div>
        </div>
    </div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
	<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
function saveCharges() { 

            var charge_per_order = $('#charge_per_order').val();
               alert("11111");
            $('#saveChargeModal').modal('show');
               alert("22222");
            $.ajax({
                headers: {'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content') },
                url: "{{URL::to('api/saveCharge')}}",
                data:{'charge_per_order':charge_per_order},
                method:'POST',

                success: function( resp ) {
                    $('#saveChargeModal').modal('hide');
                    location.reload();
                },
                error: function( req, status, err ) {
                    console.log( 'something went wrong', status, err );
                }
            });

        }

</script>

	
	</body>
</html>

Answer 2

попробуйте

<div class="col-md-6 mb-3 form-group">
  chargeperorder: <input type="text" id ="charge_per_order" name="charge_per_order" class="form-control"><br>
</div>