Cara meneruskan nilai tombol radio ke halaman lain di php

Question

Tombol radio adalah ikon yang digunakan dalam formulir untuk menerima masukan dari pengguna. Ini memungkinkan pengguna untuk memilih satu nilai dari grup tombol radio. Tombol radio pada dasarnya digunakan untuk pemilihan tunggal dari banyak pilihan, yang sebagian besar digunakan dalam bentuk GUI

Table of Contents Show

Buat tombol radio
Periksa tombol radio
Periksa tombol radio dipilih atau tidak
querySelector()
Dukungan Peramban
Nilai properti
Detail Teknis
Lebih Banyak Contoh
Pengantar tombol radio
Tentukan grup radio
Tangani tombol radio di PHP
Contoh tombol radio PHP
Bagaimana cara melewatkan nilai tombol radio yang dipilih dalam PHP?
Bagaimana cara menautkan tombol radio ke halaman lain dalam HTML?
Bagaimana Anda memposting nilai tombol radio?
Bagaimana cara tab melalui tombol radio?

Anda dapat menandai/memeriksa hanya satu tombol radio di antara dua tombol radio atau lebih. Dalam bab ini, kami akan memandu Anda tentang cara memeriksa radio button menggunakan bahasa pemrograman JavaScript

Untuk ini, pertama kita mendesain form yang berisi tombol radio menggunakan HTML, dan kemudian kita akan menggunakan pemrograman JavaScript untuk memeriksa tombol radio. Kami juga akan memeriksa nilai tombol radio mana yang dipilih

Buat tombol radio

Berikut adalah kode sederhana untuk membuat grup tombol radio

Salin Kode

Uji Sekarang

Periksa tombol radio

Kami tidak perlu menulis kode khusus apa pun untuk memeriksa tombol radio. Mereka dapat diperiksa setelah dibuat atau ditentukan dalam bentuk HTML

Namun, kita harus menulis kode JavaScript untuk mendapatkan nilai dari tombol radio yang dicentang, yang akan kita lihat pada bab di bawah ini

Periksa tombol radio dipilih atau tidak

Ada dua cara dalam JavaScript untuk memeriksa tombol radio yang ditandai atau untuk mengidentifikasi tombol radio mana yang dipilih. JavaScript menawarkan dua metode DOM untuk ini

Properti masukan radio yang diperiksa digunakan untuk memeriksa apakah kotak centang dipilih atau tidak. Gunakan dokumen. getElementById('id'). metode yang diperiksa untuk ini. Ini akan mengembalikan status tombol radio yang diperiksa sebagai nilai Boolean. Itu bisa benar atau salah

Benar - Jika tombol radio dipilih

Salah - Jika tombol radio tidak dipilih/dicentang

Lihat kode JavaScript di bawah ini untuk mengetahui cara kerjanya

Contoh

Misalnya, kami memiliki tombol radio bernama Musim Panas dan id = 'musim panas'. Sekarang, kami akan memeriksa menggunakan id tombol ini apakah tombol radio ditandai atau tidak

Salin Kode

querySelector()

Fungsi querySelector() adalah metode DOM JavaScript. Metode ini digunakan untuk mendapatkan elemen yang cocok dengan pemilih CSS yang ditentukan dalam dokumen. Ingat Anda perlu menentukan properti nama tombol radio dalam kode HTML

Untuk tombol radio, isi properti nilai tidak muncul di antarmuka pengguna. Properti value hanya memiliki arti saat mengirimkan formulir. Jika tombol radio dalam keadaan dicentang saat formulir dikirimkan, nama tombol radio dikirim bersama dengan nilai dari properti value (jika tombol radio tidak dicentang, tidak ada informasi yang dikirim)

Tip. Tetapkan nilai yang berbeda untuk tombol radio di grup yang sama, untuk mengidentifikasi (di sisi server) mana yang diperiksa

Dukungan Peramban

Nilai PropertiYaYaYaYaYa

Sintaksis

Kembalikan properti nilai

Tetapkan properti nilai

Nilai properti

ValueDescriptiontextMenentukan nilai yang terkait dengan input (ini juga merupakan nilai yang dikirim saat dikirim)

Detail Teknis

Nilai Pengembalian. Sebuah String, mewakili nilai atribut value dari tombol radio

Lebih Banyak Contoh

Contoh

Ubah nilai atribut value dari tombol radio

dokumen. getElementById("Radiosaya"). nilai = "newRadioBtnValue";

Cobalah sendiri "

Contoh

Menggunakan tombol radio bersama dengan kolom input teks untuk menampilkan nilai tombol radio yang dipilih

Ringkasan. dalam tutorial ini, Anda akan belajar cara membuat formulir dengan tombol radio dan menangani grup radio di PHP

Pengantar tombol radio

Untuk membuat tombol radio, Anda menggunakan elemen

<input type="radio" name="contact" id="contact_email" value="email"/>
<label for="contact_email">Email</label>



Code language: HTML, XML (xml)

8 dengan tipe

<input type="radio" name="contact" id="contact_email" value="email"/>
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

9. Sebagai contoh

<input type="radio" name="contact" id="contact_email" value="email" />
Code language: HTML, XML (xml)

Tombol radio tidak memiliki label. Oleh karena itu, Anda harus selalu menggunakan tombol radio dengan elemen

<label>
    <input type="radio" name="contact_email" value="email"> Email
</label>
Code language: HTML, XML (xml)

0 seperti ini

<input type="radio" name="contact" id="contact_email" value="email"/>
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

Untuk mengaitkan tombol radio dengan elemen

<label>
    <input type="radio" name="contact_email" value="email"> Email
</label>
Code language: HTML, XML (xml)

_0, nilai atribut

<label>
    <input type="radio" name="contact_email" value="email"> Email
</label>
Code language: HTML, XML (xml)

2 label harus sama dengan nilai

<label>
    <input type="radio" name="contact_email" value="email"> Email
</label>
Code language: HTML, XML (xml)

3 tombol radio

Tombol radio memiliki dua status. dicentang dan tidak dicentang

Saat Anda menautkan label dengan tombol radio, Anda dapat memeriksa tombol radio dengan mengeklik label atau tombol radio itu sendiri. Oleh karena itu, label meningkatkan kegunaan tombol radio karena memperluas area pemilihan

Sebagai alternatif, Anda dapat menempatkan tombol radio di dalam elemen

<label>
    <input type="radio" name="contact_email" value="email"> Email
</label>
Code language: HTML, XML (xml)

0 seperti ini

<label>
    <input type="radio" name="contact_email" value="email"> Email
</label>
Code language: HTML, XML (xml)

Dalam hal ini, radio menautkan ke label tanpa mencocokkan atribut for dan id

Untuk memilih tombol radio secara otomatis saat halaman dimuat pertama kali, Anda dapat menggunakan atribut Boolean

<label>
    <input type="radio" name="contact_email" value="email"> Email
</label>
Code language: HTML, XML (xml)

5

<input type="radio" name="contact" id="contact_email" value="email" checked />
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

Tentukan grup radio

Dalam praktiknya, Anda sering menggunakan tombol radio dalam grup. Sekelompok tombol radio disebut grup radio. Grup radio memungkinkan Anda untuk memilih hanya satu tombol radio dalam satu waktu

Jika Anda memilih tombol radio apa pun dalam grup, tombol radio yang saat ini dipilih dalam grup yang sama akan dibatalkan pilihannya secara otomatis

Untuk menentukan grup radio, Anda menetapkan nama yang sama untuk semua tombol radio di grup yang sama

Contoh berikut mendefinisikan grup radio yang terdiri dari dua tombol radio

<input type="radio" name="contact" id="contact_email" value="email" />
<label for="contact_email">Email</label>

<input type="radio" name="contact" id="contact_phone" value="phone" />
<label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)

Tangani tombol radio di PHP

Ketika formulir memiliki tombol radio dengan nama, Anda bisa mendapatkan tombol radio yang diperiksa dengan mengakses larik

<label>
    <input type="radio" name="contact_email" value="email"> Email
</label>



Code language: HTML, XML (xml)

6 atau

<label>
    <input type="radio" name="contact_email" value="email"> Email
</label>
Code language: HTML, XML (xml)

7, tergantung pada metode permintaan

Jika tombol radio tidak dicentang,

<label>
    <input type="radio" name="contact_email" value="email"> Email
</label>
Code language: HTML, XML (xml)

6 atau

<label>
    <input type="radio" name="contact_email" value="email"> Email
</label>
Code language: HTML, XML (xml)

7 tidak berisi kunci tombol radio. Oleh karena itu, Anda perlu menggunakan fungsi

<input type="radio" name="contact" id="contact_email" value="email" checked />
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

_0 untuk memeriksa apakah tombol radio dicentang atau tidak

isset($_POST['radio_name'])
Code language: PHP (php)

Sebagai alternatif, Anda dapat menggunakan fungsi

<input type="radio" name="contact" id="contact_email" value="email" checked />
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

_1

filter_has_var(INPUT_POST, 'radio_name')
Code language: JavaScript (javascript)

<input type="radio" name="contact" id="contact_email" value="email" checked />
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

_2 mengembalikan

<input type="radio" name="contact" id="contact_email" value="email" checked />
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

3 jika menemukan nama tombol radio di

<input type="radio" name="contact" id="contact_email" value="email" checked />
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

4

Jika tombol radio dicentang, Anda mendapatkan nilai tombol radio dari

<label>
    <input type="radio" name="contact_email" value="email"> Email
</label>
Code language: HTML, XML (xml)

6 menggunakan nama tombol radio

$_POST['radio_name']
Code language: PHP (php)

Contoh tombol radio PHP

Kami akan membuat formulir sederhana dengan grup radio. Jika Anda tidak memilih opsi apa pun dan mengirimkan formulir, itu akan menampilkan pesan kesalahan. Jika tidak, itu akan menunjukkan nilai tombol radio yang dipilih

Pertama, buat direktori dan struktur file berikut

.
├── css
|  └── style.css
├── inc
|  ├── footer.php
|  ├── get.php
|  ├── header.php
|  └── post.php
└── index.php
Code language: plaintext (plaintext)

FileDirectoryDescriptionindex. php. Berisi logika utama yang didapat beban. php atau posting. php tergantung pada header metode permintaan HTTP. phpincBerisi headerfooter HTML. phpincBerisi footerget HTML. phpincContain kode untuk menampilkan formulir dengan tombol radio saat permintaan HTTP adalah GET. pos. phpincBerisi kode untuk menangani gaya permintaan POST. csscssBerisi kode CSS

Kedua, tambahkan kode berikut ke file

<input type="radio" name="contact" id="contact_email" value="email" checked />
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

6

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>PHP Radio Button</title>
    <link rel="stylesheet" href="css/style.css">
</head>

<body>
    <main>
Code language: HTML, XML (xml)

Ketiga, tambahkan kode berikut ke file

<input type="radio" name="contact" id="contact_email" value="email" checked />
<label for="contact_email">Email</label>



Code language: HTML, XML (xml)

7

<input type="radio" name="contact" id="contact_email" value="email"/>
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

0

Keempat, tambahkan kode berikut ke file

<input type="radio" name="contact" id="contact_email" value="email" checked />
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

8

<input type="radio" name="contact" id="contact_email" value="email"/>
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

_1

Bagaimana itu bekerja

Array

<input type="radio" name="contact" id="contact_email" value="email" checked />
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

_9 digunakan untuk menghasilkan tombol radio secara dinamis. Dalam aplikasi nyata, data dapat berasal dari tabel database atau hasil panggilan API

Larik

<input type="radio" name="contact" id="contact_email" value="email" />
<label for="contact_email">Email</label>

<input type="radio" name="contact" id="contact_phone" value="phone" />
<label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)

_0 digunakan untuk mengumpulkan pesan kesalahan

Untuk mendapatkan metode permintaan HTTP, Anda mengakses kunci

<input type="radio" name="contact" id="contact_email" value="email" />
<label for="contact_email">Email</label>

<input type="radio" name="contact" id="contact_phone" value="phone" />
<label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)

1 dari array

<input type="radio" name="contact" id="contact_email" value="email" />
<label for="contact_email">Email</label>

<input type="radio" name="contact" id="contact_phone" value="phone" />
<label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)

2. Fungsi

<input type="radio" name="contact" id="contact_email" value="email" />
<label for="contact_email">Email</label>

<input type="radio" name="contact" id="contact_phone" value="phone" />
<label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)

_3 mengubah metode permintaan menjadi huruf besar

<input type="radio" name="contact" id="contact_email" value="email"/>
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

_2

File

<input type="radio" name="contact" id="contact_email" value="email" checked />
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

_8 memuat

<input type="radio" name="contact" id="contact_email" value="email" />
<label for="contact_email">Email</label>

<input type="radio" name="contact" id="contact_phone" value="phone" />
<label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)

5 dari direktori

<input type="radio" name="contact" id="contact_email" value="email" />
<label for="contact_email">Email</label>

<input type="radio" name="contact" id="contact_phone" value="phone" />
<label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)

6 jika permintaannya adalah GET. Saat formulir dikirimkan dengan permintaan POST,

<input type="radio" name="contact" id="contact_email" value="email" checked />
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

8 memuat

<input type="radio" name="contact" id="contact_email" value="email" />
<label for="contact_email">Email</label>

<input type="radio" name="contact" id="contact_phone" value="phone" />
<label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)

8 dari direktori

<input type="radio" name="contact" id="contact_email" value="email" />
<label for="contact_email">Email</label>

<input type="radio" name="contact" id="contact_phone" value="phone" />
<label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)

6

<input type="radio" name="contact" id="contact_email" value="email"/>
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

_3

Kelima, buat formulir di file

<input type="radio" name="contact" id="contact_email" value="email" />
<label for="contact_email">Email</label>

<input type="radio" name="contact" id="contact_phone" value="phone" />
<label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)

5

<input type="radio" name="contact" id="contact_email" value="email"/>
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

_4

Kode berikut menggunakan pernyataan

isset($_POST['radio_name'])
Code language: PHP (php)

_1 untuk menghasilkan grup radio dari larik

<input type="radio" name="contact" id="contact_email" value="email" checked />
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

9

<input type="radio" name="contact" id="contact_email" value="email"/>
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

5

Kode berikut menunjukkan pesan kesalahan dari array

<input type="radio" name="contact" id="contact_email" value="email" />
<label for="contact_email">Email</label>

<input type="radio" name="contact" id="contact_phone" value="phone" />
<label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)

0. Perhatikan bahwa kami menggunakan operator penggabungan nol (??) yang tersedia di PHP 7+

Ekspresi

isset($_POST['radio_name'])
Code language: PHP (php)

4 mengembalikan

isset($_POST['radio_name'])
Code language: PHP (php)

5 jika ada dan bukan null atau ” sebaliknya

<input type="radio" name="contact" id="contact_email" value="email"/>
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

_6

Terakhir, tambahkan kode yang menangani permintaan POST

<input type="radio" name="contact" id="contact_email" value="email"/>
<label for="contact_email">Email</label>
Code language: HTML, XML (xml)

_7

Bagaimana

<input type="radio" name="contact" id="contact_email" value="email" />
<label for="contact_email">Email</label>

<input type="radio" name="contact" id="contact_phone" value="phone" />
<label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)

_8 bekerja

Fungsi

isset($_POST['radio_name'])
Code language: PHP (php)

_7 membersihkan nilai tombol radio yang dicentang. Untuk memastikan nilai yang dikirimkan valid, kami memeriksanya dengan kunci array

isset($_POST['radio_name'])
Code language: PHP (php)

8 menggunakan fungsi

isset($_POST['radio_name'])
Code language: PHP (php)

9

Jika nilai yang dikirimkan cocok dengan salah satu kunci array, kami menampilkan pesan. Jika tidak, kami menambahkan pesan kesalahan ke larik

<input type="radio" name="contact" id="contact_email" value="email" />
<label for="contact_email">Email</label>

<input type="radio" name="contact" id="contact_phone" value="phone" />
<label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)

0

Dalam pernyataan

filter_has_var(INPUT_POST, 'radio_name')
Code language: JavaScript (javascript)

1 terakhir, kami memuat formulir (

<input type="radio" name="contact" id="contact_email" value="email" />
<label for="contact_email">Email</label>

<input type="radio" name="contact" id="contact_phone" value="phone" />
<label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)

5) yang menunjukkan pesan kesalahan jika array

<input type="radio" name="contact" id="contact_email" value="email" />
<label for="contact_email">Email</label>

<input type="radio" name="contact" id="contact_phone" value="phone" />
<label for="contact_phone">Phone</label>
Code language: HTML, XML (xml)

0 tidak kosong. Jika tidak, kami menampilkan pesan konfirmasi

Bagaimana cara melewatkan nilai tombol radio yang dipilih dalam PHP?

Dapatkan Nilai yang Dipilih dari Tombol Radio di PHP . Jika nilainya tidak dipilih, kami menampilkan pesan kepada pengguna untuk memilih nilai dari grup tombol radio. Use $_POST[] to get the value of the selected radio button. If the value is not chosen, we are showing a message to the user to choose the value from the group of radio buttons.

Bagaimana cara menautkan tombol radio ke halaman lain dalam HTML?

You will need to start learning JavaScript (and preferably jQuery as well). Assuming you have jQuery: $('input:radio[name="mything"]'). change( function(){ if ($(this).is(':checked') && $(this).

Bagaimana Anda memposting nilai tombol radio?

Masukan Properti Nilai Radio .

Dapatkan nilai atribut value dari tombol radio. getElementById("Radiosaya"). .

Ubah nilai atribut value dari tombol radio. getElementById("Radiosaya"). .

Menggunakan tombol radio bersama dengan kolom input teks untuk menampilkan nilai tombol radio yang dipilih

Bagaimana cara tab melalui tombol radio?

Saat fokus berpindah ke grup tempat tombol radio dipilih, menekan tombol Tab dan Shift+Tab mengalihkan fokus ke tombol radio yang dicentang. Up Arrow and Down Arrow keys move focus and selection. Up Arrow key press moves focus and selection forward through the radio buttons in the group.

kode php