How to use script tag in an ASP.NET Core MVC razor view

Question

I want to use javascript in a razor view in the MVC project. I want to show a message to the user by clicking the post button. I put the script tag in Section below the page but on hitting F12 it shows 'btn' is null. I'm testing my project on IISExpress in Firefox

<form method="post">
--------a few input fields in a form-------
 <button id="button" type="submit" class="btn btn-lg btn-success">send</button>
</form>
<div class="submit-progress d-none">
    <label>be patient please...</label>
</div>
@section scripts{
    <partial name="_ValidationScriptsPartial" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-fileinput/5.2.7/js/fileinput.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function () {
            const btn = document.getElementById("#button");
            btn.addEventListener("click", function () {
                $(btn).prop("disabled", true);
                $(".submit-progress").removeClass("d-none");
            })
        });
    </script>
}

Yogi · Accepted Answer · 2022-04-04 10:11:52Z

2

There are multiple problems with your code mostly from mixing jQuery and native JavaScript methods. You can make it work by fixing the 3 lines shown to use jQuery. Note that "this" refers to the element to which the event handler is attached, in this case the button.

$(document).ready(function() {
  // const btn = document.getElementById("#button"); <-- REMOVE
  $("#button").click(function() { // <-- CHANGE
    $(this).prop("disabled", true); // <-- CHANGE
    $(".submit-progress").removeClass("d-none");
  })
});

answered Apr 4, 2022 at 10:11

Yogi

7,4943 gold badges34 silver badges42 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

ahamad zooghi Over a year ago

Thanks, Man! Could you please help me with another issue? In my form, I have a client-side validation which means If you hit send button without filling the form, validation tag errors appear without sending to the server. The problem is with appearing .submit-progress div. I want it to appear only when the user fills the form and hits the send button

Nathelol · Accepted Answer · 2022-04-04 10:08:41Z

2

When using getElementById you only need to pass the name not the selector #

const btn = document.getElementById("button");

You have used the scripts section correctly.

edited Apr 4, 2022 at 10:08

answered Apr 4, 2022 at 10:02

Nathelol

6079 silver badges26 bronze badges

1 Comment

Yogi Over a year ago

up voted as this is the most simple answer, though I think OP also needs to understand that they are mixing jQuery and native js in a confusing code salad.

Collectives™ on Stack Overflow

How to use script tag in an ASP.NET Core MVC razor view

2 Answers 2

1 Comment

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related