Check if RadioButton (RadioGroup) is checked or not using jQuery in ASP.Net Core MVC

trisetia302
 
on Sep 22, 2021 06:44 AM
685 Views

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>

 

Download FREE API for Word, Excel and PDF in ASP.Net: Download
dharmendr
 
on Sep 23, 2021 04:22 AM