保存按钮不会在使用ajax的控制台中执行

时间：2018-08-28 17:15:41

标签： jquery ajax laravel

我正在尝试使用Ajax存储数据，但是在网络控制台中...单击“按钮添加费用”后，什么都没有发生。

这是我的按钮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>

当我单击弹出模式上的保存按钮时，什么都没有发生。我也有在jason data 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);
}

在此处添加我的控制台屏幕： console

COSOLE错误：

  

未捕获的TypeError：saveCharge不是函数       在HTMLAnchorElement.onclick（配置文件：347）上

2 个答案:

答案 0 :(得分：1)

尝试

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

答案 1 :(得分：1)

您的函数存在故障，只需将其重命名为saveChanges（）

我认为这是由于您表格的名称和ID。因此，更改表单的名称和ID或更改函数名称。

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

相关问题
最新问题