Hi,
I tried to save data using Ajax, in my save function I have radio button. Before save i want the radio button input will check first. If the radio button not checked it will show massage alert like "alert("Penatalaksanaan tidak boleh kosong !!!");".
How to do that ?
Any help could be apriciate.
The View
<div class="row">
<div class="col-md-12">
<div class="card">
<div class="card-header card-header-success">
<h4 class="card-title">Add Rawat</h4>
<p class="card-category"></p>
</div>
<div class="card-body">
<form autocomplete="off">
<input asp-for="ID_Rawat" id="ID_Rawat" name="ID_Rawat" class="form-control"/>
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="row">
<div class="col-md-6">
<div class="position-relative form-group">
<label asp-for="ID_Dokter" class="control-label"></label>
<input asp-for="ID_Dokter" name="ID_Dokter" id="ID_Dokter" class="form-control" />
<span asp-validation-for="ID_Dokter" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="position-relative form-group">
<label asp-for="Nama_Dokter" class="control-label"></label>
<input asp-for="Nama_Dokter" name="Nama_Dokter" id="Nama_Dokter" class="form-control" />
<span asp-validation-for="Nama_Dokter" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="position-relative form-group">
<label asp-for="Nama_Pasien" class="control-label"></label>
<input asp-for="Nama_Pasien" id="Nama_Pasien" name="Nama_Pasien" class="form-control" />
<span asp-validation-for="Nama_Pasien" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="position-relative form-group">
<label asp-for="ID_Pasien" class="control-label"></label>
<input asp-for="ID_Pasien" id="ID_Pasien" name="ID_Pasien" class="form-control" />
<span asp-validation-for="ID_Pasien" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="position-relative form-group">
<label asp-for="Tgl_Rawat" class="control-label"></label>
<input asp-for="Tgl_Rawat" id="Tgl_Rawat" name="Tgl_Rawat" class="form-control" />
<span asp-validation-for="Tgl_Rawat" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="position-relative form-group">
<label asp-for="Kode_Penyakit" class="control-label"></label>
<input asp-for="Kode_Penyakit" id="Kode_Penyakit" name="Kode_Penyakit" class="form-control" />
<span asp-validation-for="Kode_Penyakit" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="position-relative form-group">
<label asp-for="Nama_Penyakit" class="control-label"></label>
<input asp-for="Nama_Penyakit" id="Nama_Penyakit" name="Nama_Penyakit" class="form-control" />
<span asp-validation-for="Nama_Penyakit" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="position-relative form-group">
<label asp-for="Keluhan_Pasien" class="control-label"></label>
<input asp-for="Keluhan_Pasien" id="Keluhan_Pasien" name="Keluhan_Pasien" class="form-control" />
<span asp-validation-for="Keluhan_Pasien" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="position-relative form-group">
<label asp-for="Hasil_Diagnosa" class="control-label"></label>
<input asp-for="Hasil_Diagnosa" id="Hasil_Diagnosa" name="Hasil_Diagnosa" class="form-control" />
<span asp-validation-for="Hasil_Diagnosa" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="position-relative form-group">
<label asp-for="Penatalaksanaan" class="control-label"></label><br />
@Html.RadioButtonFor(m => m.Penatalaksanaan, "Rawat Jalan", new { @checked = "true", @autofocus = "true"}) <span>Rawat Jalan</span><br />
@Html.RadioButtonFor(m => m.Penatalaksanaan, "Rawat Inap") <span>Rawat Inap</span><br />
@Html.RadioButtonFor(m => m.Penatalaksanaan, "Dirujuk") <span>Dirujuk</span><br />
@Html.RadioButtonFor(m => m.Penatalaksanaan, "Lainnya") <span>Lainnya</span>
<span asp-validation-for="Penatalaksanaan" class="text-danger"></span>
</div>
</div>
<div class="col-md-6">
<div class="position-relative form-group">
<label asp-for="Rumah_Sakit_Rujukan" class="control-label"></label>
<input asp-for="Rumah_Sakit_Rujukan" id="Rumah_Sakit_Rujukan" name="Rumah_Sakit_Rujukan" class="form-control" />
<span asp-validation-for="Rumah_Sakit_Rujukan" class="text-danger"></span>
</div>
</div>
<div class="col-md-12">
<div align="center">
<div class="form-group">
<button type="button" id="BtnAddRawatPasien" class="btn btn-success"> Create</button>
</div>
</div>
</div>
</div>
</form>
<div>
<a asp-action="Index"><i class="fa fa-arrow-alt-circle-left"> Back to List</i></a>
</div>
<div align="right">
<form asp-action="PrintSuratRujukanPasien" asp-controller="Rawat" method="post" autocomplete="off">
<input asp-for="ID_Rawat" name="ID_Rawat" id="ID_Rawat" class="form-control" hidden="hidden" />
<button type="submit" class="btn btn-success btn-sm"> Print Surat Rujukan Pasien</button>
</form>
</div>
</div>
</div>
</div>
</div>
The Validation and Ajax
<script type="text/javascript">
$(document).ready(function () {
$("#BtnAddRawatPasien").on("click",function () {
var ID_Dokter = $("#ID_Dokter").val();
var Nama_Dokter = $("#Nama_Dokter").val();
var ID_Pasien = $("#ID_Pasien").val();
var Nama_Pasien = $("#Nama_Pasien").val();
var Tgl_Rawat = $("#Tgl_Rawat").val();
var Kode_Penyakit = $("#Kode_Penyakit").val();
var Nama_Penyakit = $("#Nama_Penyakit").val();
var Keluhan_Pasien = $("#Keluhan_Pasien").val();
var Hasil_Diagnosa = $("#Hasil_Diagnosa").val();
var Penatalaksanaan = $('input[name="Penatalaksanaan"]:unchecked').val();
var Rumah_Sakit_Rujukan = $("#Rumah_Sakit_Rujukan").val();
if (ID_Dokter == "" && Nama_Dokter == "" && ID_Pasien == "" && Nama_Pasien == "" && Tgl_Rawat == "" && Kode_Penyakit == "" && Nama_Penyakit == "" && Keluhan_Pasien == "" & Hasil_Diagnosa == "" && Penatalaksanaan == "unchecked" && Rumah_Sakit_Rujukan == "") {
$('#ID_Dokter').css('border-color', 'Red');
$('#Nama_Dokter').css('border-color', 'Red');
$('#ID_Pasien').css('border-color', 'Red');
$('#Tgl_Rawat').css('border-color', 'Red');
$('#Kode_Penyakit').css('border-color', 'Red');
$('#Nama_Penyakit').css('border-color', 'Red');
$('#Keluhan_Pasien').css('border-color', 'Red');
$('#Hasil_Diagnosa').css('border-color', 'Red');
$('#Rumah_Sakit_Rujukan').css('border-color', 'Red');
alert('Tolong dilengkapi seluruh isian data !!!');
$('#ID_Dokter').focus();
return false
}
if (ID_Dokter == "") {
alert("ID Dokter tidak boleh kosong !!!");
$('#ID_Dokter').css('border-color', 'Red');
document.getElementById("ID_Dokter").focus();
return false
} else {
$('#ID_Dokter').css('border-color', 'lightgrey');
}
if (Nama_Dokter == "") {
alert("Nama Dokter tidak boleh kosong !!!");
$('#Nama_Dokter').css('border-color', 'Red');
document.getElementById("Nama_Dokter").focus();
return false
} else {
$('#Nama_Dokter').css('border-color', 'lightgrey');
}
if (ID_Pasien == "") {
alert("ID Pasien tidak boleh kosong !!!");
$('#ID_Pasien').css('border-color', 'Red');
document.getElementById("ID_Pasien").focus();
return false
} else {
$('#ID_Pasien').css('border-color', 'lightgrey');
}
if (Nama_Pasien == "") {
alert("Nama Pasien tidak boleh kosong !!!");
$('#Nama_Pasien').css('border-color', 'Red');
document.getElementById("Nama_Pasien").focus();
return false
} else {
$('#Nama_Pasien').css('border-color', 'lightgrey');
}
if (Tgl_Rawat == "") {
alert("Tanggal Rawat tidak boleh kosong !!!");
$('#Tgl_Rawat').css('border-color', 'Red');
document.getElementById("Tgl_Rawat").focus();
return false
} else {
$('#Tgl_Rawat').css('border-color', 'lightgrey');
}
if (Kode_Penyakit == "") {
alert("Kode Penyakit tidak boleh kosong !!!");
$('#Kode_Penyakit').css('border-color', 'Red');
document.getElementById("Kode_Penyakit").focus();
return false
} else {
$('#Kode_Penyakit').css('border-color', 'lightgrey');
}
if (Nama_Penyakit == "") {
alert("Nama Penyakit tidak boleh kosong !!!");
$('#Nama_Penyakit').css('border-color', 'Red');
document.getElementById("Nama_Penyakit").focus();
return false
} else {
$('#Nama_Penyakit').css('border-color', 'lightgrey');
}
if (Keluhan_Pasien == "") {
alert("Keluhan Pasien tidak boleh kosong !!!");
$('#Keluhan_Pasien').css('border-color', 'Red');
document.getElementById("Keluhan_Pasien").focus();
return false
} else {
$('#Keluhan_Pasien').css('border-color', 'lightgrey');
}
if (Hasil_Diagnosa == "") {
alert("Hasil Diagnosa tidak boleh kosong !!!");
$('#Hasil_Diagnosa').css('border-color', 'Red');
document.getElementById("Hasil_Diagnosa").focus();
return false
} else {
$('#Hasil_Diagnosa').css('border-color', 'lightgrey');
}
if (Penatalaksanaan == "unchecked") {
alert("Penatalaksanaan tidak boleh kosong !!!");
$('#Penatalaksanaan').css('border-color', 'Red');
document.getElementById("Penatalaksanaan").focus();
return false
} else {
$('#Penatalaksanaan').css('border-color', 'lightgrey');
}
if (Rumah_Sakit_Rujukan == "") {
alert("Rumah Sakit Rujukan tidak boleh kosong !!!");
$('#Rumah_Sakit_Rujukan').css('border-color', 'Red');
document.getElementById("Rumah_Sakit_Rujukan").focus();
return false
} else {
$('#Rumah_Sakit_Rujukan').css('border-color', 'lightgrey');
}
var ObjectRawatPasien = {
ID_Rawat: $("#ID_Rawat").val(),
ID_Dokter: $("#ID_Dokter").val(),
Nama_Dokter: $("#Nama_Dokter").val(),
ID_Pasien: $("#ID_Pasien").val(),
Nama_Pasien: $("#Nama_Pasien").val(),
Tgl_Rawat: $("#Tgl_Rawat").val(),
Kode_Penyakit: $("#Kode_Penyakit").val(),
Nama_Penyakit: $("#Nama_Penyakit").val(),
Keluhan_Pasien: $("#Keluhan_Pasien").val(),
Hasil_Diagnosa: $("#Hasil_Diagnosa").val(),
Penatalaksanaan: $('input[name="Penatalaksanaan"]:checked').val(),
Rumah_Sakit_Rujukan: $("#Rumah_Sakit_Rujukan").val()
};
$.ajax({
url: "/Rawat/SaveAddRawat",
data: JSON.stringify(ObjectRawatPasien),
type: "POST",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (result) {
BerhasilSimpan();
$("#ID_Dokter").val("");
$("#Nama_Dokter").val("");
$("#ID_Pasien").val("");
$("#Nama_Pasien").val("");
$("#Tgl_Rawat").val("");
$("#Kode_Penyakit").val("");
$("#Nama_Penyakit").val("");
$("#Keluhan_Pasien").val("");
$("#Hasil_Diagnosa").val("");
$("#Rumah_Sakit_Rujukan").val("");
},
error: function (errormessage) {
window.alert(errormessage.responseText);
}
});
return false;
});
});
</script>
