如何將「其他」文本輸入添加到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規範支持這一點，沒有。你只需要讓你的處理代碼看看單選按鈕，看看值是'other'，並從文本字段的輸入中獲取值（表單提交中的'other'var，而不是'候選' 'var）。

Answer 3

否 - 這不受HTML規範支持。 您需要在表單提交之前通過JavaScript來完成，或者更好的是，檢查單選按鈕是否設置爲「other」，然後在提交表單後讀取文本框的值。

您不希望真正搞亂改變「其他」單選按鈕的返回值的原因之一是如果我要在文本框中鍵入「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>