Как получить данные из кнопки Radio Input пример

Как можно получить значение из кнопки Input тип Radio, сколько возможных способов существует, получить данные из кнопки, как получить значение value из Radio в переменную, мы решили объединить сразу два языка, чтобы не распыляться направо и налево! Все о радиоточке type Radio внутри Input. Что такое type Radio Input!?

1. Что такое type Radio Input!?
2. Получить значение value из type Radio Input -> в php
Пример type Radio Input + скачать
Пример type Radio Input + обязательный выбор + скачать
Как сделать переключение между кнопками radio + скачать
Обязательный выбор между несколькими radio + скачать

3. Получить значение value из type Radio Input в переменную php
4. Получить значение value из type Radio Input -> в js единичная кнопка
5. Получить значение value из type Radio Input -> в js несколько кнопок
6. Получить значение value из type Radio Input в переменную js
7. Получить значение value из type Radio Input -> jquery
8. Передать значение value из type Radio в -> переменную
9. Скачать можно здесь

Скопировать ссылку



Что такое type Radio Input!?

type Radio Input - это один из типов тега input(поля ввода), со значением Radio! Ещё type Radio Input - называют радиоточкой


Как обозначается тип radio?

Для обозначения кнопки радио и чтобы input превратился в кнопку, нужно в input поставить тип : type="radio"

Код кнопки radio - в отличии от чекбокса, радиоточку после нажатия на неё отжать не получиться!

Синтаксис type Radio

<input type="radio">

Результат вывода type Radio

Если используется несколько радиоточек

<input type="radio" name ="radio" value="1">

<input type="radio" name ="radio" value="2">

<input type="radio" name ="radio" value="3">

То между ними есть возможность переключаться

Скопировать ссылку



Получить значение value из type Radio Input в php

Пример type Radio Input + скачать
Пример type Radio Input + обязательный выбор + скачать
Как сделать переключение между кнопками radio
Обязательный выбор между несколькими radio.


Единичный type Radio Input в php

Для того, чтобы отправить и получить данные из кнопки type Radio Input вам понадобится...


Код кнопки type Radio Input, например:

<input type="radio" name ="radio" value="1">

Результат:

Плюс рядом можно поместит текст(тег label), по нажатию на который будет активироваться кнопка...


Нажми на меня

Добавляем к нему php и у вас получится данный пример


Скачать данный пример type Radio Input в php

Пример
Скачать


---




Как сделать кнопку радио обязательной для нажатия?

Для того, чтобы сделать кнопку радио обязательной для нажатия вам понадобится:


Выше приведенный пример и +

Атрибут - required

Скачать данный пример type Radio Input в php

Пример
Скачать


---




Как сделать переключение между кнопками radio.

Для того, чтобы сделать переключение и получение значения из одной из кнопок radio вам потребуется...

Взять выше пунктом приведенный пример использования сразу 2(или более)кнопок radio.

Добавить туда php

И получится вот такой Пример

Скачать пример с выбором кнопки Radio

Пример
Скачать


---




Обязательный выбор между несколькими radio.

Для того, чтобы сделать несколько radio и заставить пользователя выборать какой-то из вариантов вам понадобится:

Предыдущий вариант с несколькими radio.

Добавляем каждому из них атрибут - required

И вы получите вот такой пример.

Скачать пример с обязательным выбором кнопки Radio

Пример
Скачать

Скопировать ссылку

Получить значение value из type Radio Input в переменную php

Для того, чтобы получить значение value в переменную в php, вам понадобится несколько условий...

Одна из кнопок type="radio":

<input type="radio" name ="radio" value="1">

Далее вам потребуется получение post и предать его в переменную.

Проверяем был ли отправлен пост запрос с помощью if и если он был отправлен, то передаем value из type Radio Input в переменную php....

Пример передачи value из type Radio Input в переменную php

if( $_POST["simple_test"] ) { $здесь_переменная = strip_tags($_POST["simple_test"]);}
Скопировать ссылку



Получить значение value из type Radio Input в js

Я тут думал о самом простом примере получения value из кнопки Radio Input!

В чем главная проблема!? В том, что нам нужно:

1). сделать какое то действие onclick,
2). потом определить тег(любой id - в смысле уникальный якорь(образно.))
3). и только уже после этого получить значение из value type Radio Input
4). И первый вариант - это когда кнопка радио 0- одиночная кнопка:


В нашей кнопке в данном случае, обязательное условие id - мы как-то должны обратиться к тегу

<input type="radio" id="my_id" value="my_id_value">Радиоточка пример получения value<br>
Ну и далее повесим на наш id onclick и внутри выведем содержание value радиоточки alert( my_id.value );


<script>

my_id.onclick = function(){

alert( my_id.value );

};

</script>

Вы можете проверить работоспособность данного получения значения value из type Radio Input в js

Радиоточка пример получения value

Скопировать ссылку



Получить значение value из type Radio Input -> в js несколько кнопок

Теперь представим , что у нас несколько кнопок радио. Можно пойти по выше описанному способу, получать значение value при клике по определенной кнопке радио...


Ну больно уж примитивно... да и просто мы уже это написали один раз, второй раз уже скучно!

Итак у нас есть несколько кнопок радио...

<input type="radio" class="get_value" id="id_1" value="red" name="co">Красный

<input type="radio" class="get_value" id="id_2" value="green" name="co">Зеленый

<input type="radio" class="get_value" id="id_3" value="blue" name="co">Синий

Далее нам нужно как в выше приведенном варианте... проделать все те же действия... в смысле 1.2.3.4 - ну просто другого алгоритма... как-то нет... смайлы

НО И! При условии, что мы не будем обращаться напряму к точке - у нас возникает еще одна проблема идентификация кнопки, по которой мы нажали...!


Итак! Погнали!

1). Добавляем на страницу addEventListener с click - это будет отслеживать наше нажатие по странице... + добавляем function с именем isit(любое)
2). Чтобы было удобнее получим класс и ид в переменные...


the_class = isit. target.className;

the_id = isit. target.id;

3). Поставим условие, если кликнули по нашему классу = get_value, то получаем это самое значение из value уже по нашему ид...


if (the_class =="get_value")

{

alert(document.querySelector("#"+the_id ).value);

}

Соберем все вместе:

<script>

document.addEventListener("click", function(isit) {

the_class = isit. target.className;

the_id = isit. target.id;

if (the_class =="get_value")

{

alert(document.querySelector("#"+the_id ).value);

}

});

</script>

Вы можете нажать по любой из кнопок радио и получить результат в виде выпадающего окна...

Красный
Зеленый
Синий

Скопировать ссылку



Получить значение value из type Radio Input в переменную js

Для получения value из type Radio Input надо поступить аналогично, - вместо alert ставим переменную..

var здесь_переменная = (document.querySelector("#"+the_id ).value);
Скопировать ссылку



Получить значение value из type Radio Input jquery

Для иллюстрации получения значение value из type Radio Input в:

1). Первый делом - естественно, что нам нужна библиотека подключить jquery
2). нам опять понадобятся кнопки радио... но теперь... если вы обратите внимание, то ид для jquery не нужен! Всё что нам нужно, чтобы было у Input радиоточки - это класс(get_value1)


<input type="radio" class="get_value1" value="Красный" name="co">

<input type="radio" class="get_value1" value="Зеленый" name="co">

<input type="radio" class="get_value1" value="Синий" name="co">

3). Далее все просто! Отлавливаем клики присоединяем функцию и внутри функции выводим через this - я немного не понимаю, потому, что я не в теме, но такая вот конструкция -> alert(this.value); должна была сработать в js, но увы нет...


$(".get_value1").bind("click", function() {

alert(this.value);

});

Ну и собственно получился результат:

Использование библиотеки jquery для получения значение value из type Radio Input

Скопировать ссылку



Передать значение value из type Radio в -> переменную

Для PHP:

Чтобы передать значение из radio в переменную нам потребуется в случае php, создать какую-то переменную $result и уже в эту переменную передавать ... значение из value:

if( $_POST['color_1'] ) { $result = strip_tags($_POST['color_1']);}

либо заложенное значение в value отслеживать по значению...

if( $_POST['color_1'] =='red' ) { $result ='это красный';}

if( $_POST['color_1'] =='green' ) { $result ='это зеленый';}
Для jquery javascript :
В выше рассмотренных случаях alert заменяем на переменную -> peremennaya =
Не забываем, что у переменных есть область видимости... если вы хотите вывести значение за пределы функции то выше функции нужно задать пустую переменную var peremennaya ;

Еще никто не прокомментировал! COMMENTS+   BBcode

Подписаться + =

---