Laravel : Not Getting the Form ID Value In Front.js

  javascript, jquery, laravel

I am trying to access the form ID which is "ApplyCoupon" in front.js. but it can’t access the "ApplyCoupon" id it redirect the to action one. i have also link all the script files please check the blade file. i have check the blade file in browser source code view it is connected.

Cart.blade

    <!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta name="description" content="">
    <meta name="author" content="">
    <title>CART</title>
    <link href="{{ url('css/front_css/bootstrap.min.css') }}" rel="stylesheet">
    <link href="{{ url('css/front_css/font-awesome.min.css') }}" rel="stylesheet">
    <link href="{{ url('css/front_css/prettyPhoto.css') }}" rel="stylesheet">
    <link href="{{ url('css/front_css/price-range.css') }}" rel="stylesheet">
    <link href="{{ url('css/front_css/animate.css') }}" rel="stylesheet">
    <link href="{{ url('css/front_css/main.css') }}" rel="stylesheet">
    <link href="{{ url('css/front_css/responsive.css') }}" rel="stylesheet">
    <!--[if lt IE 9]>
    <script src="{{ url('js/front_js/html5shiv.js') }}"></script>
    <script src="{{ url('js/front_js/respond.min.js') }}"></script>
    <![endif]-->

    <link rel="apple-touch-icon-precomposed" sizes="144x144" href="{{ asset('images/front_images/front_images/front_images/ico/apple-touch-icon-144-precomposed.jpg') }}">
    <link rel="apple-touch-icon-precomposed" sizes="114x114" href="{{ asset('images/front_images/front_images/front_images/ico/apple-touch-icon-114-precomposed.jpg') }}">
    <link rel="apple-touch-icon-precomposed" sizes="72x72" href="{{ asset('images/front_images/front_images/front_images/ico/apple-touch-icon-72-precomposed.jpg') }}">
    <link rel="apple-touch-icon-precomposed" href="{{ asset('images/front_images/front_images/front_images/ico/apple-touch-icon-57-precomposed.jpg') }}">
</head>
<!--/head-->

<body>
 <section id="do_action">
    <div class="container">

        <div class="row">
            <div class="col-sm-6">
                <div class="total_area">
                    <form id="ApplyCoupon" method="post" action="javascript;" class="form-horizontal">
                        @csrf
                        <ul>
                            <li>
                                <label for="">COUPON CODE:</label>

                                <input type="text" name="code" id="code" class="form-control" placeholder="Enter Coupon Code" class="col-sm-4" required>
                                <br>
                                <button type="submit" class="btn btn-warning"> Apply </button>
                            </li>
                        </ul>
                    </form>
                    <a class="btn btn-default check_out" href=""><i class="fa fa-angle-double-left"></i> Back To Shopping</a> <a class="btn btn-default check_out pull-right" href="/checkout">Check Out <i class="fa fa-angle-double-right"></i></a>
                </div>
            </div>
        </div>
    </div>
</section>
<!--/#do_action-->

<!--/Footer-->
@include('layouts.front_layout.front_footer')

<script src="{{ url('js/front_js/jquery.js') }}"></script>
<script src="{{ url('js/front_js/bootstrap.min.js') }}"></script>
<script src="{{ url('js/front_js/jquery.scrollUp.min.js') }}"></script>
<script src="{{ url('js/front_js/price-range.js') }}"></script>
<script src="{{ url('js/front_js/jquery.prettyPhoto.js') }}"></script>
<script src="{{ url('js/front_js/main.js') }}"></script>
<script src="{{ url('js/front_js/front_script.js') }}" type="text/javascript"></script>

</body>

</html>

front_script.js

$(document).ready(function () {

    // Apply Coupon
    $("#ApplyCoupon").submit(function () {
        alert("Test");
    });
});

I don’t know why this happen

Source: Laravel

Leave a Reply