Comment puis-je ajouter une entrée de texte "Autre" à un ensemble de boutons radio dans un formulaire HTML?

Question

J'essaie de créer un formulaire avec une option "other" d'écriture comme dernier bouton radio. J'ai essayé les variantes de ce qui suit sans succès:

<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" /> 

Est-il possible d'avoir un bouton radio avec une entrée de texte qui passe sa valeur à ce bouton radio sur soumettre sans utiliser javascript?

Answer 1

Si 'Autre' est sélectionné, vous ne voudrez soumettre que la valeur dans le champ de texte, cela n'a pas de sens de l'introduire dans la radio et de la transmettre au serveur. Vous pouvez donner la valeur du « Autre » la radio la chaîne vide, .: par exemple

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

Et sur le serveur si aucune valeur est présente dans « candidat » look « d'autres ».

Answer 2

Je ne crois pas que la spécification HTML supporte cela, non. Vous devez simplement voir votre code de traitement regarder le bouton radio, voir que la valeur est 'autre', et obtenir une valeur de l'entrée du champ de texte (le 'autre' var dans la soumission du formulaire au lieu du 'candidat 'var).

Answer 3

Non - ceci n'est pas pris en charge par les spécifications HTML. Vous devez soit le faire via javascript avant que le formulaire est soumis, ou mieux encore, vérifiez si le bouton radio est défini sur "other" et lisez ensuite la valeur de la zone de texte APRÈS la soumission du formulaire.

L'une des raisons pour lesquelles vous ne voulez pas vraiment vous tracasser avec la modification de la valeur de retour de l'autre bouton radio est que faire si je devais taper "option1" dans votre zone de texte?

Answer 4

Non. Cela nécessite des mises à jour dynamiques du DOM, qui nécessite JavaScript.

Answer 5

C'est le moyen le plus simple que je peux voir, s'il vous plaît corrigez-moi si je me trompe!

<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> 

Lorsque l'étiquette intègre la radio et le champ de texte, le champ de texte vérifie la radio « autre », et envoie la valeur de « autre » comme ce qui est entré dans le domaine. Puis, en cochant à nouveau un bouton radio, le champ de texte est effacé

Answer 6

Voici ce que j'ai fait (exécuter l'extrait pour voir ce qu'il fait). J'espère que vous pouvez fouiller et comprendre comment cela fonctionne.

Lors du traitement de la forme, vous pouvez vérifier les valeurs par le fait que soit un bouton radio est cochée ou la zone de texte aura une valeur.

$(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>