¿Cómo puedo agregar un & # 8220; Otro & # 8221; entrada de texto a un conjunto de botones de opción en forma HTML?

Question

Estoy tratando de crear un formulario con una escritura " otro " opción como último botón de radio. He intentado variantes de lo siguiente sin éxito:

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

¿Es posible tener un botón de radio con una entrada de texto que pasa su valor a ese botón de radio al enviar sin usar JavaScript?

Answer 1

Si se selecciona 'Otro', desearía enviar solo el valor en el campo de texto, no tiene sentido alimentar eso en la radio y pasarlo al servidor. Puede dar al valor de la radio 'Otro' la cadena vacía, por ejemplo:

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

Y en el servidor si no hay ningún valor presente en " candidato " mira a "otro".

Answer 2

No, esto no es compatible con las especificaciones HTML. Debería hacerlo a través de javascript antes de enviar el formulario, o mejor aún, verificar si el botón de opción está configurado como "otro" y luego lea el valor del cuadro de texto DESPUÉS de que se envíe el formulario.

Una razón por la que no desea perder el tiempo alterando el valor de retorno del " otro " el botón de opción es qué pasaría si tuviera que escribir " opción1 " en tu cuadro de texto?

Answer 3

No creo que la especificación HTML lo admita, no. Simplemente tendría que hacer que su código de procesamiento mire el botón de opción, vea que el valor es 'otro' y obtenga un valor de la entrada del campo de texto (la 'otra' var en el envío del formulario en lugar del 'candidato' 'var).

Answer 4

No. Esto requiere actualizaciones dinámicas para el DOM, que requiere javascript.

Answer 5

¡Esta es la forma más simple que puedo ver, corríjame si me equivoco!

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

Cuando la etiqueta incorpora la radio y el campo de texto, el campo de texto verifica el " otro " radio, y envía el valor de "otro" como lo que se ingresa en el campo. Luego, al marcar un botón de radio nuevamente se borra el campo de texto

Answer 6

Esto es lo que hice (ejecuta el fragmento para ver qué hace). Esperemos que puedas hurgar y descubrir cómo funciona.

Al procesar el formulario, puede verificar los valores por el hecho de que ya sea un botón de opción está marcado o el cuadro de texto tendrá un valor.

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