JavaScript not working in ASP.NET MVC with EF

Question

I am trying to wire up a button with some web app using the click method but it's not working. The JS on the rest of my web site is working fine but this does not seem to like me.

I am new to ASP.NET and I am working using a tutorial so if anything is done in a certain way it's because that's how it's done in tutorial. Here is my code of the page that is creating the problem, I will implement the function javascript how calculate montantbrut = courn + courm + cours

Create razor view :

<h2>Create</h2>
<div class="form-horizontal">
 <h4>Coordonnee</h4>
 <hr />
 @Html.ValidationSummary(true, "", new { @class = "text-danger" })
 <div class="form-group">
 @Html.LabelFor(model => model.EnseignantId, htmlAttributes: new { @class = "control-label col-md-2" })
 <div class="col-md-10">
 @Html.EditorFor(model => model.EnseignantId, new { htmlAttributes = new { @class = "form-control" } })
 @Html.ValidationMessageFor(model => model.EnseignantId, "", new { @class = "text-danger" })
 </div>
 </div>
 <div class="form-group">
 @Html.LabelFor(model => model.Nom, htmlAttributes: new { @class = "control-label col-md-2" })
 <div class="col-md-10">
 @Html.EditorFor(model => model.Nom, new { htmlAttributes = new { @class = "form-control" } })
 @Html.ValidationMessageFor(model => model.Nom, "", new { @class = "text-danger" })
 </div>
 </div>
 <div class="form-group">
 @Html.LabelFor(model => model.Specialite, htmlAttributes: new { @class = "control-label col-md-2" })
 <div class="col-md-10">
 @Html.DropDownListFor(model => model.Specialite, new SelectList(ViewBag.list), "إختر إختصاص ",htmlAttributes:new { @class = "form-control" })
 @Html.ValidationMessageFor(model => model.Specialite, "", new { @class = "text-danger" })
 </div>
 </div>
 <div class="form-group">
 @Html.LabelFor(model => model.Rang, htmlAttributes: new { @class = "control-label col-md-2" })
 <div class="col-md-10">
 @Html.DropDownListFor(model => model.Rang, new SelectList(ViewBag.list), "إختر رتبة ", htmlAttributes: new { @class = "form-control" })
 @Html.ValidationMessageFor(model => model.Rang, "", new { @class = "text-danger" })
 </div>
 </div>
 <div class="form-group">
 @Html.LabelFor(model => model.Courn, htmlAttributes: new { @class = "control-label col-md-2" })
 <div class="col-md-10">
 @Html.EditorFor(model => model.Courn, new { htmlAttributes = new { @class = "form-control" },,@id="courn" })
 @Html.ValidationMessageFor(model => model.Courn, "", new { @class = "text-danger" })
 </div>
 </div>
 <div class="form-group">
 @Html.LabelFor(model => model.Tdn, htmlAttributes: new { @class = "control-label col-md-2" })
 <div class="col-md-10">
 @Html.EditorFor(model => model.Tdn, new { htmlAttributes = new { @class = "form-control" } })
 @Html.ValidationMessageFor(model => model.Tdn, "", new { @class = "text-danger" })
 </div>
 </div>
 <div class="form-group">
 @Html.LabelFor(model => model.Tpn, htmlAttributes: new { @class = "control-label col-md-2" })
 <div class="col-md-10">
 @Html.EditorFor(model => model.Tpn, new { htmlAttributes = new { @class = "form-control" } })
 @Html.ValidationMessageFor(model => model.Tpn, "", new { @class = "text-danger" })
 </div>
 </div>
 <div class="form-group">
 @Html.LabelFor(model => model.Courm, htmlAttributes: new { @class = "control-label col-md-2" })
 <div class="col-md-10">
 @Html.EditorFor(model => model.Courm, new { htmlAttributes = new { @class = "form-control" },@id="courm" })
 @Html.ValidationMessageFor(model => model.Courm, "", new { @class = "text-danger" })
 </div>
 </div>
 <div class="form-group">
 @Html.LabelFor(model => model.Tdm, htmlAttributes: new { @class = "control-label col-md-2" })
 <div class="col-md-10">
 @Html.EditorFor(model => model.Tdm, new { htmlAttributes = new { @class = "form-control" } })
 @Html.ValidationMessageFor(model => model.Tdm, "", new { @class = "text-danger" })
 </div>
 </div>
 <div class="form-group">
 @Html.LabelFor(model => model.Tpm, htmlAttributes: new { @class = "control-label col-md-2" })
 <div class="col-md-10">
 @Html.EditorFor(model => model.Tpm, new { htmlAttributes = new { @class = "form-control" } })
 @Html.ValidationMessageFor(model => model.Tpm, "", new { @class = "text-danger" })
 </div>
 </div>
 <div class="form-group">
 @Html.LabelFor(model => model.Cours, htmlAttributes: new { @class = "control-label col-md-2" })
 <div class="col-md-10">
 @Html.EditorFor(model => model.Cours, new { htmlAttributes = new { @class = "form-control" } ,,@id="cours"})
 @Html.ValidationMessageFor(model => model.Cours, "", new { @class = "text-danger" })
 </div>
 </div>
 <div class="form-group">
 @Html.LabelFor(model => model.Tds, htmlAttributes: new { @class = "control-label col-md-2" })
 <div class="col-md-10">
 @Html.EditorFor(model => model.Tds, new { htmlAttributes = new { @class = "form-control" } })
 @Html.ValidationMessageFor(model => model.Tds, "", new { @class = "text-danger" })
 </div>
 </div>
 <div class="form-group">
 @Html.LabelFor(model => model.Tps, htmlAttributes: new { @class = "control-label col-md-2" })
 <div class="col-md-10">
 @Html.EditorFor(model => model.Tps, new { htmlAttributes = new { @class = "form-control" } })
 @Html.ValidationMessageFor(model => model.Tps, "", new { @class = "text-danger" })
 </div>
 </div>
 <div class="form-group">
 @Html.LabelFor(model => model.Montantbrut, htmlAttributes: new { @class = "control-label col-md-2" })
 <div class="col-md-10">
 @Html.EditorFor(model => model.Montantbrut, new { htmlAttributes = new { @class = "form-control" },@id="montanbrut" })
 @Html.ValidationMessageFor(model => model.Montantbrut, "", new { @class = "text-danger" })
 </div>
 </div>
 <div class="form-group">
 @Html.LabelFor(model => model.Tva, htmlAttributes: new { @class = "control-label col-md-2" })
 <div class="col-md-10">
 @Html.EditorFor(model => model.Tva, new { htmlAttributes = new { @class = "form-control" } })
 @Html.ValidationMessageFor(model => model.Tva, "", new { @class = "text-danger" })
 </div>
 </div>
 <div class="form-group">
 @Html.LabelFor(model => model.Montantnet, htmlAttributes: new { @class = "control-label col-md-2" })
 <div class="col-md-10">
 @Html.EditorFor(model => model.Montantnet, new { htmlAttributes = new { @class = "form-control" } })
 @Html.ValidationMessageFor(model => model.Montantnet, "", new { @class = "text-danger" })
 </div>
 </div>
 <div class="form-group">
 <div class="col-md-offset-2 col-md-10">
 <input type="submit" value="Create" class="btn btn-primary" onClick="savebtn" />
 </div>
 </div>
</div>

And Javascript code :

@section scripts {
<script type="text/javascript">
$(document).ready(function(){
 $('courn').change(function () {
 $('montantbrut').val = $('courn').val + $('courm').val+ $('cours').val;
 alert("test de click");
 });
});
</script>

• Sh.Imran: Where is JavaScript here? Its simple View page.
• mohamed: hi sh.Imran this is code javascripte : @section scripts { <script type="text/javascript"> $(document).ready(function(){ $('msd').change(function () { $('mg').val = $('msu').val + $('msd').val; alert("test de click"); }); }); </script>
• Sh.Imran: So put it in your question. You can Edit the question.
• mohamed: I edit it , if you have another solution with c# in razor page youn can help me and thnx you
• Sh.Imran: Yes check my answer, it would probably work.

Answer 1

Here you should use # with courn and other id's as selector in javascript.

$('#courn').change(function () { 
 var calc = $('#courn').val() + $('#courm').val() + $('#cours').val();
 $('#montantbrut').val(calc);
 alert("test de click");
 });

• mohamed: the button does not work and I add it attribute on click in champ btn but the same result

Answer 2

You don't use the # sign in jquery selector, and jquery don't find the element. In query selectors you need to use # for id and . for class attributes.

The right code is:

@section scripts {
<script type="text/javascript">
$(document).ready(function(){
 $('#courn').change(function () {
 $('#montantbrut').val($('#courn').val() + $('#courm').val() + $('#cours').val());
 alert("test de click");
 });
});
</script>

• z-eh: Maybe the @RenderSection("scripts") is in a bad position in between the <head></head> tags. Try to move it before the </body> tag.
• mohamed: @section Scripts { @Scripts.Render("~/bundles/jqueryval") <script type="text/javascript"> $(document).ready(function () { $('#courn').change(function () { $('#montantbrut').val($('#courn').val() + $('#courm').val() + $('#cours').val()); alert("test de click"); }); }); </script> }
• mohamed: I I tested but does not work if you give your facebook account I send it the complete code and thank you
• mohamed: It's possible to calculate with c# item in razor view or no