无法让单选按钮返回正确的值答案

【问题标题】：Cannot get radio buttons to return correct value无法让单选按钮返回正确的值
【发布时间】：2018-10-04 21:54:31
【问题描述】：

当单选按钮通过电子邮件发送给我时，我无法让我的单选按钮返回正确的值。我完全是自学成才，基本上只是搜索这些论坛并复制/粘贴代码，直到我完成工作，但这让我对自己做错了什么感到困惑！

我正在为我的婚礼网站制作一个 rsvp 表单，其他一切都返回正常，但无论他们点击参加还是不参加，我都会得到“选项：是”。

HTML如下：

<div class="btn-group btn-group-toggle" data-toggle="buttons">
  <label class="btn btn-secondary btn-default btn-lg shadow border">
    <input type="radio" name="options"  value="YES" id="contact-options"> ATTENDING
  </label>
  <label class="btn btn-secondary btn-default btn-lg shadow border">
    <input type="radio" name="options"  value="NO" id="contact-options"> NOT ATTENDING
  </label>
  </div>

PHP 是这样的：

<?php

$address = $_POST['emailAddress'];
$name = $_POST['name'];
$email = $_POST['email'];
$options_value = $_POST['options'];
$message = $_POST['message'];
$messagediet = $_POST['message2'];
$subject = 'You have been contacted by ' . $name;
$body = 'Name: ' . $name . PHP_EOL . PHP_EOL . 'Email: ' . $email . PHP_EOL . PHP_EOL . 'Options: ' .$options_value . PHP_EOL . PHP_EOL .$message . PHP_EOL . PHP_EOL .$messagediet;
$headers = 'From: ' . $email . PHP_EOL . 'Reply-To: ' . $email . PHP_EOL . 'MIME-Version: 1.0' . PHP_EOL . 'Content-type: text/plain; charset=utf-8' . PHP_EOL . 'Content-Transfer-Encoding: quoted-printable' . PHP_EOL;
mail($address, $subject, $body, $headers);

?>

而main.js文件有以下内容：

 function fn_contactForm() {

    var $form = $('#contact-form');

    $form.on('submit', function(e) {

      var $input = $form.find('input, textarea');
      var contactNameVal = $('#contact-name').val();
      var contactEmailVal = $('#contact-email').val();
      var contactOptionsVal = $('#contact-options').val();
      var contactDietMessageVal = $('#contact-diet').val();
      var contactMessageVal = $('#contact-message').val();
      var $contactNotice = $('.contact-notice');
      var $submitButton = $form.find('button[type="submit"]');

      e.preventDefault();

      if (contactNameVal == '' || contactEmailVal == '' || contactMessageVal == '' || contactDietMessageVal == '') {
        $contactNotice.stop(true).hide().html(_contactInputError).fadeIn(500);
        $input.each(function() {
          if (this.value === '') {
            this.focus();
            return false;
          }
        });

      }

      else if (!fn_formValidation(contactEmailVal)) {
        $contactNotice.stop(true).hide().html(_contactEmailError).fadeIn(500);
        $('#contact-email').focus();
      }
      else {
        $.ajax({
          type: 'POST',
          url: 'assets/php/contact.php',
          data: {
            name: contactNameVal,
            email: contactEmailVal,
            options: contactOptionsVal,
            message: contactMessageVal,
            message2: contactDietMessageVal,
            emailAddress: _contactEmail
          },
          success: function() {
            $contactNotice.stop(true).hide().html(_contactSuccess).fadeIn(500);
            $form[0].reset();
            $input.blur();
          }
        });
      }
      return false;

    });
  }

非常欢迎任何帮助，已经在这里搜索了答案，尽管在我尝试任何答案之前已经回答了它，但只会让它看起来更糟！

非常感谢，约翰

【问题讨论】：

标签： php html forms radio

【解决方案1】：

制作 HTML 文件如下：

    <div class="btn-group btn-group-toggle" data-toggle="buttons">
   <label class="btn btn-secondary btn-default btn-lg shadow border">
    <input type="radio" name="options"  value="YES" id="contact-options1" checked="checked">ATTENDING
   </label>
  <label class="btn btn-secondary btn-default btn-lg shadow border">
    <input type="radio" name="options"  value="NO" id="contact-options2"> NOT ATTENDING

和.js文件如下：

 function fn_contactForm() {

var $form = $('#contact-form');

$form.on('submit', function(e) {

  var $input = $form.find('input, textarea');
  var contactNameVal = $('#contact-name').val();
  var contactEmailVal = $('#contact-email').val();
  var contactDietMessageVal = $('#contact-diet').val();
  var contactMessageVal = $('#contact-message').val();
  var $contactNotice = $('.contact-notice');
  var $submitButton = $form.find('button[type="submit"]');
  var contactOptionsVal;
if (document.getElementById('contact-options1').checked) {
contactOptionsVal = document.getElementById('contact-options1').value;
   checked="checked" }else{
contactOptionsVal = document.getElementById('contact-options2').value;
 }
e.preventDefault();

  if (contactNameVal == '' || contactEmailVal == '' || contactMessageVal == '' || contactDietMessageVal == '') {
    $contactNotice.stop(true).hide().html(_contactInputError).fadeIn(500);
    $input.each(function() {
      if (this.value === '') {
        this.focus();
        return false;
      }
    });

  }

  else if (!fn_formValidation(contactEmailVal)) {
    $contactNotice.stop(true).hide().html(_contactEmailError).fadeIn(500);
    $('#contact-email').focus();
  }
      else {
    $.ajax({
      type: 'POST',
      url: 'assets/php/contact.php',
      data: {
        name: contactNameVal,
        email: contactEmailVal,
        options: contactOptionsVal,
        message: contactMessageVal,
        message2: contactDietMessageVal,
        emailAddress: _contactEmail
      },
      success: function() {
        $contactNotice.stop(true).hide().html(_contactSuccess).fadeIn(500);
        $form[0].reset();
        $input.blur();
      }
    });
  }
  return false;

});
 }

【讨论】：

这很好，但是我刷新了页面并再次尝试，现在当我点击提交时它只是重新加载页面并且不发送电子邮件？
它是否从表单中检索值？

【解决方案2】：

首先“ID”是相同的，因此您不能在同一页面中使用相同的 ID 两次。
您的作用域是相同的 ID，因此 javascript 将带回它找到的第一个值，即“是”

你必须得到你的答案

$("form input[type='radio']:checked").val();

你的情况是

$("#contact-form input[name='options'][type='radio']:checked").val();

并将您的无线电输入的 id 更改为不同的东西

【讨论】：

【解决方案3】：

快速解决方法是选择checked 一个

var contactOptionsVal = $('#contact-options:checked').val()

但是，为了遵循不能有多个具有相同 id 的元素的规则，请将两个地方的 id="contact-options" 更改为 class 就像：class="contact-options" 然后你可以使用 jQuery

var contactOptionsVal = $('.contact-options:checked').val();

另外，如果没有选中单选按钮，则contactOptionsVal 将是undefined，您可以使用if (contactOptionsVal === undefined) ... 进行检查以提交

【讨论】：