Как добавить «другой» ввод текста в набор радиокнопок в форме HTML?

Question

Я пытаюсь создать форму с записью «другой» в качестве последней переключателя. Я пробовал варианты следующий без успеха:

<label><input type="radio" name="candidate" value="option1">First Option</label> 
<label><input type="radio" name="candidate" value="option2">Second Option</label> 
<label><input type="radio" name="candidate" value="other">OTHER</label><input type="text" name="other" value="Write In" /> 

Можно ли иметь радиокнопку с вводом текста, который проходит его значение на эту кнопку радио на представить без использования JavaScript?

Answer 1

Если выбрано «Другое», вы должны отправить только значение в текстовое поле, нет смысла передавать его в радио и передавать его на сервер. Можно задающее значение «Других» радио пустой строки, например .:

<label><input type="radio" name="candidate" value="">OTHER</label> 

А на сервере, если значение не присутствует в «кандидате» смотреть на «другой».

Answer 2

Я не верю, что спецификация HTML поддерживает это, нет. Вам просто нужно, чтобы ваш код обработки выглядел на переключателе, посмотрите, что это значение «другое», и получите значение из ввода текстового поля («другой» var в представлении формы вместо «кандидата» 'var).

Answer 3

Нет - это не поддерживается спецификациями HTML. Вам нужно либо сделать это с помощью javascript перед отправкой формы, либо, еще лучше, проверить, установлен ли переключатель на «другое», а затем прочитать значение текстового поля ПОСЛЕ отправки формы.

Одна из причин, по которой вы не хотите по-настоящему возиться с изменением возвращаемого значения «другого» переключателя, - это что, если я должен был ввести «option1» в текстовое поле?

Answer 4

Нет. Для этого требуются динамические обновления DOM, для чего требуется javascript.

Answer 5

Это самый простой способ, который я вижу, пожалуйста, поправьте меня, если я ошибаюсь!

<form name="fruitForm" method="post" action="other-post.php"> 
<label><input type="radio" name="fruit" value="apple" onClick="regularFruit()">apple</input></label> 
<label><input type="radio" name="fruit" value="orange" onClick="regularFruit()">orange</input></label> 
<label><input type="radio" name="fruit" value="lemon" onClick="regularFruit()">lemon</input></label> 
<label onClick="otherFruit()"> 
    <input type="radio" name="fruit" id="other_fruit" value="other" >or other fruit:</input> 
    <input type ="text" name="other" id="other_text"/></label> 
    <input type="submit" value="Submit"> 
</form> 

<script> 
function otherFruit(){ 
a=document.getElementById('other_fruit'); 
a.checked=true; 
} 
function regularFruit(){ 
a=document.getElementById('other_text'); 
a.value=""; 
} 
</script> 

Если метка включает радио и текстовое поле, текстовое поле проверяет «другие» радио и посылает значение «других», как то, что вводится в поле. Затем проверка радио кнопки снова очищает текстовое поле

Answer 6

Вот что я сделал (запустите фрагмент, чтобы посмотреть, что он делает). Надеюсь, вы сможете сориться и понять, как это работает.

При обработке формы, вы можете проверить значения тот факт, что либо радиокнопку проверяется или текстовое поле будет иметь значение.

$(document).ready(
 
    function() { 
 
    $('input[name=amount]').on('click', function() { 
 
     var customText = $('input[name=custom-amount]'); 
 
     customText.val(''); 
 
     customText.parent().removeClass("selected"); 
 
    }); 
 

 
    $('input[name=custom-amount]').on('click', function() { 
 
     $('input[name=amount]').attr('checked', false); 
 
     $(this).parent().addClass("selected"); 
 
    }); 
 
    });

.donate { 
 
    font-family: sans-serif; 
 
} 
 
.donate .payee { 
 
    color: #4B8EBC; 
 
    font-weight: bold; 
 
} 
 
.donate .custom-amount { 
 
    width: 150px; 
 
    height: 40px; 
 
    background-color: #7DB6DA; 
 
    color: #325F7F; 
 
    font-weight: bold; 
 
    font-size: 1rem; 
 
    padding: 2px; 
 
    padding-left: 6px; 
 
} 
 
.donate .custom-amount input { 
 
    font-weight: lighter; 
 
    font-size: 0.8rem; 
 
    background-color: white; 
 
    width: 116px; 
 
    height: 24px; 
 
    margin-top: 4px; 
 
    margin-left: 6px; 
 
} 
 
.donate .radio-control { 
 
    position: relative; 
 
    display: inline-block; 
 
    font-size: 1rem; 
 
    width: 50px; 
 
    height: 40px; 
 
    cursor: pointer; 
 
    z-index: 12; 
 
} 
 
.donate .radio-control input[type="radio"] { 
 
    position: absolute; 
 
    z-index: -1; 
 
    opacity: 0; 
 
} 
 
.donate .radio-control__indicator { 
 
    position: absolute; 
 
    top: 0; 
 
    left: 0; 
 
    right: 0; 
 
    bottom: 0; 
 
    z-index: 10; 
 
    text-align: center; 
 
    line-height: 40px; 
 
} 
 
.donate .radio-control__indicator, .donate .custom-amount { 
 
    background-color: #7DB6DA; 
 
    color: #325F7F; 
 
} 
 
.donate .radio-control:hover input ~ .radio-control__indicator, 
 
.donate .radio-control input:focus ~ .radio-control__indicator { 
 
    opacity: 0.9; 
 
} 
 
.donate .radio-control input:checked ~ .radio-control__indicator, 
 
.donate .custom-amount.selected { 
 
    background: #4B8EBC; 
 
    color: white; 
 
} 
 
.donate .radio-control:hover input:not([disabled]):checked ~ .radio-control__indicator, 
 
.donate .radio-control input:checked:focus ~ .radio-control__indicator { 
 
    opacity: 1; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<form class="donate"> 
 
    <div class="row amount"> 
 
    <div class="control-group"> 
 
     <label class="radio-control"> 
 
     <input checked="checked" name="amount" type="radio" value="$5" /> 
 
     <div class="radio-control__indicator"> 
 
      $5 
 
     </div> 
 
     </label> 
 
     <label class="radio-control"> 
 
     <input name="amount" type="radio" value="$10" /> 
 
     <div class="radio-control__indicator"> 
 
      $10 
 
     </div> 
 
     </label> 
 
     <label class="radio-control"> 
 
     <input name="amount" type="radio" value="$20" /> 
 
     <div class="radio-control__indicator"> 
 
      $20 
 
     </div> 
 
     </label> 
 
     <label class="radio-control"> 
 
     <input name="amount" type="radio" value="$50" /> 
 
     <div class="radio-control__indicator"> 
 
      $50 
 
     </div> 
 
     </label> 
 
     <div class="custom-amount"> 
 
     $ 
 
     <input class="custom-amount" name="custom-amount" placeholder="Custom amount" size="40" /> 
 
     </div> 
 
    </div> 
 
    </div> 
 
</form>