كيف يمكنني إضافة "أخرى" إدخال النص إلى مجموعة من أزرار الراديو في شكل 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" />

هل من الممكن أن يكون هناك زر الراديو مع إدخال النص الذي يمر قيمته إلى هذا الزر الراديو على تقديم دون استخدام جافا سكريبت؟

Answer 1

إذا "أخرى" محددا، كنت تريد أن تقدم فقط قيمة في حقل النص، فإنه لا معنى لتغذية ذلك في الإذاعة وتمرير ذلك إلى الملقم. هل يمكن أن تعطي قيمة "أخرى" راديو سلسلة فارغة، منها مثلا:

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

وعلى الملقم إذا لا قيمة موجودة في "مرشح" ننظر إلى "الآخر".

Answer 2

ولا - وهذا غير معتمد من قبل المواصفات HTML. كنت تحتاج إما للقيام بذلك عن طريق جافا سكريبت قبل إرسال النموذج، أو أفضل من ذلك، تحقق إذا تم تعيين زر الراديو إلى "الآخر"، ومن ثم قراءة قيمة النص بعد إرسال النموذج.

وسبب واحد كنت لا تريد حقا تسكع مع تغيير قيمة الإرجاع من زر الراديو "الآخر" هو ما إذا كان علي أن اكتب "OPTION1" في مربع النص الخاص بك؟

Answer 3

وأنا لا أعتقد أن المواصفات HTML تدعم هذا، لا. وكنت فقط أن يكون لديك نظرة معالجة رمز على زر الراديو، نرى أن القيمة هي "أخرى"، ويذهب للحصول على قيمة من إدخال حقل النص (وفار "الآخر" في استمارة التقديم بدلا من 'مرشح "فار).

Answer 4

ولا. وهذا يتطلب التحديثات الحيوية إلى DOM، الأمر الذي يتطلب جافا سكريبت.

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>