Post method doesn't work with html form in MVC - html

Question

Why is that the $.post() method doesn't work ? I press the button but it doesn't post to EditClassLessonHour.
Here is the View Code:
<div class="jumbotron">
<form id="editClassLessonHour">
#Html.HiddenFor(model => model.ID)
<span> Classes : </span>
<select name="classes" id="classes">
#foreach (var item in ViewBag.classes as List<SelectListItem>)
{
<option value="#item.Value">#item.Text</option>
}
</select>
<br /><br />
<div class="input-group">
<span class="input-group-addon" name="lessons" id="lessons">Lessons : </span>
#Html.DropDownListFor(x => x.LessonName, (IEnumerable<SelectListItem>)ViewData["lesson"], new { #class = "form-control", placeholder = "Lesson", aria_describedby = "txtClassNumber" })
#Html.ValidationMessageFor(model => model.LessonName)
</div>
<br />
<div class="input-group">
<span class="input-group-addon" name="hours" id="hours">Hour : </span>
#Html.DropDownListFor(x => x.Hour, (IEnumerable<SelectListItem>)ViewData["hour"], new { #class = "form-control", placeholder = "Lesson", aria_describedby = "txtClassNumber" })
#Html.ValidationMessageFor(model => model.Hour)
</div>
<br />
<input type="button" value="Kaydet" id="kaydet" class="btn btn-success" onclick="post(); " />
</form>
<br />
</div>
<script>
$.post('/ClassLessonHour/EditClassLessonHour',{
classId: $('#classes').val(),
lessonId: $('#lessons').val(),
hourId: $('#hours').val()
}, function (result) {
$('#message').html(result.message);
});
</script>
Here is Controller Code
[HttpPost]
public ActionResult EditClassLessonHour(int classId, int lessonId, int hourId)
{
}
What can I do? I want that when I press the button, the form should be posted to the Controller.

Answer 1

onclick="post();"
You don't have a function called post. You don't have any function at all. You're just executing an AJAX POST request as soon as the page loads.
Remove that onclick attribute entirely and bind your AJAX call to the button's click event. Something like this:
$(function () {
$('#kaydet').on('click', function () {
$.post('/ClassLessonHour/EditClassLessonHour',{
classId: $('#classes').val(),
lessonId: $('#lessons').val(),
hourId: $('#hours').val()
}, function (result) {
$('#message').html(result.message);
});
});
});
Though it seems likely that there are more problems here. For example, this:
$('#lessons').val()
The id="lessons" element is a <span>, which doesn't have a "value". You want to target the <select> being generated by #Html.DropDownListFor, not the <span> that's near it. Examine your HTML in the browser to see what is being generated by that server-side code. It may have an id or name that you can use in your jQuery selector. (This same problem applies to your #hours element as well.)