Wie kann ich eine „andere“ Texteingabe auf eine Reihe von Radio-Buttons in einem HTML-Formular hinzufügen?

Question

Ich versuche, eine Form mit einer Schreib in „anderen“ Option als letztes Optionsfeld zu erstellen. Ich habe versucht, Varianten der folgenden ohne Erfolg:

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

Ist es möglich, ein Optionsfeld mit einer Texteingabe zu haben, die ohne Verwendung von Javascript vorlegen seinen Wert zu diesem Optionsfeld passiert?

Answer 1

Wenn ‚Andere‘ ausgewählt ist, würden Sie nur den Wert in dem Textfeld zu unterbreiten, macht es keinen Sinn machen, dass in das Radio zu füttern und passieren, dass an den Server. Sie könnten den Wert des ‚Anderen‘ Radio geben die leere Zeichenkette, z.

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

Und auf dem Server, wenn kein Wert in „Kandidaten“ vorhanden sein sollte, gehen auf „andere“.

Answer 2

Nein - das ist nicht durch die HTML-Spezifikationen unterstützt. Sie würden entweder müssen es über Javascript tun, bevor das Formular abgeschickt wird, oder besser noch, ob das Optionsfeld auf „andere“ gesetzt wird und dann den Textbox Wert lesen, nachdem das Formular abgeschickt wird.

Ein Grund, warum Sie wollen nicht wirklich Kampf mit dem Rückgabewert der „anderen“ Radio-Button zu ändern ist, was, wenn ich „option1“ im Textfeld einzugeben?

Answer 3

Ich glaube nicht, die HTML-Spezifikation unterstützt dies, nein. Sie würden nur Ihren Bearbeitungskode Blick auf der Radio-Button haben müssen, dass der Wert ‚anderer‘ ist, und gehen Sie einen Wert aus dem Textfeld einer Eingabe erhalten (den ‚anderen‘ var in Form Vorlage anstelle der ‚Kandidaten 'var).

Answer 4

Nein. Dies erfordert dynamische Aktualisierungen des DOM, die benötigt Javascript.

Answer 5

Dies ist die einfachste Art und Weise kann ich sehen, bitte korrigieren Sie mich, wenn ich falsch bin!

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

Wenn die Markierung das Radio und das Textfeld enthält, überprüft das Textfeld das „andere“ Radio und sendet den Wert von „andere“ als das, was auf dem Gebiet eingegeben wird. Dann Überprüfung erneut ein Optionsfeld löscht das Textfeld

Answer 6

Hier ist, was ich getan habe (das Snippet laufen, um zu sehen, was es tut). Hoffentlich können Sie herumzustochern und herauszufinden, wie es funktioniert.

Wenn die Form der Verarbeitung, können Sie die Werte durch die Tatsache prüfen, dass entweder ein Optionsfeld aktiviert ist oder das Feld wird einen Wert hat.

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