Невозможно получить переключатели для возврата правильного значения - PullRequest
Новая
       7

Невозможно получить переключатели для возврата правильного значения

0 голосов
/ 24 апреля 2018

Я не могу заставить мой переключатель возвращать правильное значение, когда оно отправлено мне по электронной почте.Я полностью самоучка и в основном просто ищу на этих форумах и копирую / вставляю код, пока я не заставлю вещи работать, но этот один поставил меня в тупик относительно того, что я сделал неправильно!

Я делаю форму 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;

    });
  }

Любая помощь очень приветствуется, я искал ответы здесь, и хотя на него уже отвечали прежде, чем я пытался ответить, просто сделайте его еще хуже!

Большое спасибо, Джон

Ответы [ 3 ]

0 голосов
/ 24 апреля 2018

Первым делом первыми идентификаторы идентичны, поэтому вы не должны использовать один и тот же идентификатор на одной и той же странице дважды.у вас есть одинаковый идентификатор, поэтому javascript вернет первое найденное значение, и это «ДА»

для ответа вы должны получить 

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

в вашем случае 

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

и изменить идентификатор вашего радиовхода на что-то другое

0 голосов
/ 24 апреля 2018

Быстрое исправление будет состоять в том, чтобы выбрать checked один с

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

Но, чтобы следовать правилу, что вы не можете иметь более одного элемента сидентичный идентификатор, измените id="contact-options" в обоих местах на class, например: class="contact-options", затем вы можете выбрать с помощью jQuery

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

Кроме того, если переключатель не установлен,тогда contactOptionsVal будет undefined, и вы можете проверить это для отправки с помощью if (contactOptionsVal === undefined) ...

0 голосов
/ 24 апреля 2018

сделать 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;

});
 }
...