Question

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

我正在为我的婚礼网站制作一个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;

    });
  }

任何帮助都非常受欢迎，已经在这里寻找答案，虽然在我试过任何答案之前已经回答过但是让它看起来更糟！

非常感谢，约翰

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

});
 }

Answer 2

首先，“ID”是相同的，因此您不得在同一页面中使用相同的ID两次你的作用域是相同的ID，所以javascript将带回它找到的第一个值，那就是“是”

你必须得到答案

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

在您的情况下

是

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

并将您的收音机输入的ID更改为不同的

Answer 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) ...

检查提交的内容

无法通过单选按钮返回正确的值

3 个答案: