Ajax passes values from view to controller
so i am trying to pass some values from my view to controller, controller gets list and returns it.
when i try to get values from my textboxes etc. they are all undefined ... not sure what exactly i am doing wrong here. pretty new to javascript ..
here's the js code
<script type="text/javascript">
$(document).ready(function () {
$("#getFreeApartements").on('click', function () {
var amounta = $('#amounta').val();
var amountc = $('#amountc').val();
var amountan = $('#animals').val();
var arr = $('#arrival').val();
var dep = $('#departure').val();
var atype = $('#atype').val();
$.ajax({
type: 'GET',
data: { 'amountp': amounta, 'amountc': amountc, 'amountanimals': amountan, 'arrival': arr, 'departure': dep, 'apartmentType': atype },
url: '@Url.Action("GetFreeApartements", "Bookings")',
success: function (result) {
$('freeAp').html(result);
}
});
alert(amounta); // --> return undefined
});
});
textboxinput field
<div class="form-group">
@Html.LabelFor(model => model.Adult, htmlAttributes: new { @class = "control-label col-md-2" })
<div class="col-md-10" id="amountp" name="amountp">
@Html.EditorFor(model => model.Adult, new { htmlAttributes = new { @class = "form-control" } })
@Html.ValidationMessageFor(model => model.Adult, "", new { @class = "text-danger" })
</div>
</div>
controller:
public ActionResult GetFreeApartements(int ap, int ac, int aa, DateTime arr, DateTime dep, ApartmentType type)
{
//do some stuff with received values here...
var freeApartements = db.Apartments.ToList();
return Json(freeApartements, JsonRequestBehavior.AllowGet);
}
I have also tried serializeArray without any success ... I am not getting any errors in the explorer console. the function is called, but the values are null. → undefined should be an error.
any ideas?
source to share
I hope this answer helps you
The EditorFor field (text field) is assigned the id attribute. Evaluate textbox element using id in Ajax.
Example
@Html.EditorFor(model => model.Adult, new { htmlAttributes = new { id="adultTextBox" @class = "form-control" } })
In the above example, I have assigned id="adultTextBox"
evaluate it in ajax, like$("#adultTextBox").val()
source to share
So now you have a problem with asynchronous calls working. Your string $.ajax
will run, and then the string will execute immediately alert
- it doesn't wait for your asynchronous call to resolve before starting alert
(that's the point of asynchronous calls). What you should be doing is checking the value amounta
inside the callback success
.
I modified below to include only the relevant parts to illustrate this point. I also added a line to restore the value of the amounta
DOM element after setting the HTML:
$(document).ready(function () {
$("#getFreeApartements").on('click', function () {
var amounta = $('#amounta').val();
$.ajax({
type: 'GET',
data: { ... data },
url: '@Url.Action("GetFreeApartements", "Bookings")',
success: function (result) {
$('freeAp').html(result);
amounta = $('#amounta').val();
alert(amounta);
}
});
});
});
You may have other issues with your controller ... but the above example should fix your JavaScript errors you see.
source to share