最後のラジオボタンとして「その他」オプションを書き込むフォームを作成しようとしています。次のバリエーションを試しましたが、成功しませんでした。
<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を使用せずに、送信時にその値をそのラジオボタンに渡すテキスト入力を持つラジオボタンを持つことは可能ですか?
いいえ - これは HTML 仕様でサポートされていません。フォームが送信される前に JavaScript を介して行うか、ラジオ ボタンが「その他」に設定されているかどうかを確認し、フォームが送信された後にテキスト ボックスの値を読み取る必要があります。
「その他」のラジオ ボタンの戻り値を変更することを本当にいじりたくない理由の 1 つは、テキスト ボックスに「option1」と入力するとどうなるかということです。
「その他」を選択した場合、テキスト フィールドの値のみを送信する必要があります。それをラジオに入力してサーバーに渡すのは意味がありません。「Other」ラジオの値に空の文字列を指定できます。たとえば、次のようになります。
<label><input type="radio" name="candidate" value="">OTHER</label>
サーバー上で「候補」に値が存在しない場合は、「その他」を参照してください。
これが私がしたことです（スニペットを実行して、それが何をするかを確認してください）。うまくいけば、それがどのように機能するかを調べてみてください。
フォームを処理するとき、ラジオボタンがチェックされているか、テキストボックスに値があるという事実によって値を確認できます。
$(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>HTML 仕様がこれをサポートしているとは思えません。処理コードでラジオ ボタンを見て、値が「その他」であることを確認し、テキスト フィールドの入力から値を取得する必要があります (「候補」ではなく、フォーム送信の「その他」変数)。 'var)。
いいえ。これには、JavaScript を必要とする DOM の動的更新が必要です。