Memvalidasi radio button dengan JavaScript

Diketahui:

Saya mempunyai form untuk menambah grade seperti terlihat pada gambar dibawah ini:

Form yang sudah dibuat

Saya sudah membuat form new_grade.php dengan isi seperti kode dibawah ini:

<form name=”grade” method=”POST” onsubmit=”return validasi_radio()”> 

<table width=”343″ border=”1″>

<tr>

<td width=”50″>Grade Code: </td>    <td align=”left” width=”192″><label>      <input type=”text” name=”gra_code” />    </label></td>

</tr>  <tr>

<td>Grade Description:</td>    <td><input type=”text” name=”gra_desc” /></td>  </tr>  <tr>    <td>Grade Sequence:</td>    <td><input type=”text” name=”gra_sequence” /></td>

</tr>  <tr>

<td>Grade Status:</td>    <td><input type=”radio” name=”gra_status” value=”1″ />Active <input type=”radio” name=”gra_status” value=”0″ />Inactive</td>

</tr>      <tr>

<td></td>    <td align=”right”>      <input type=”button”  value=”Save” onClick=”save_grade()”/>  <input type=”button”  value=”Cancel” onClick=”open_list_grade()”/>    </td>

</tr>

</table>

</form>

Keterangan:

  • onsubmit=”return validasi_radio()”, kode ini berarti saat saya menekan tombol submit maka jalankan fungsi validasi_radio().

Membuat fungsi Validasi

<script type=”text/javascript”> 

function validasi_radio(){

var frm=document.grade;

var grade_status1=frm.gra_status[0].checked;

var grade_status2=frm.gra_status[1].checked;

if(grade_status1==false && grade_status2==false){

alert(‘Silahkan pilih status grade”);

return false;

}

}

</script>

Keterangan:

  • document.grade, Kode ini digunakan untuk mengambil nama form.
  • frm.gra_status[0].checked, Kode ini digunakan untuk mengambil nilaid index 0 dari radio yang mempunyai name=”gra_status”.

 

Jika tutorial ini bermanfaat silahkan katakan ‘Terima Kasih Fahmi Basya Kartapura’.

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *