Скрытие компонентов с помощью переключателя - PullRequest
Новая
       19

Скрытие компонентов с помощью переключателя

0 голосов
/ 02 ноября 2019

На моем сайте я использую php для обработки контактов / подписки. Форма довольно проста, есть две радиокнопки, которые должны контролировать, хочет ли пользователь «подписаться» или «связаться» со мной. В последнем случае я бы хотел, чтобы появилось другое окно «Сообщение». Это то, что у меня есть:

В contact.php: 

    <?php include('form_process.php'); ?>

    <html>
    <head>
    ...
    ...

      <div class="blockform">
        <h2> Contact/Subscribe </h2>
        <div class="container" >
          <form id="contact" action="<?= $_SERVER['PHP_SELF']; ?>" method="post">

      <label class="label">    
      <input type="radio" name="gender" 
      <?php if (isset($gender) && $gender=="subscribe") echo "checked";?>
      value="subscribe"> SUBSCRIBE

      <input type="radio" name="gender" style="margin-left:2em"
      <?php if (isset($gender) && $gender=="contact") echo "checked";?>
      value="contact"> CONTACT
      </label>

            <label class="label" for="name">Name: *</label>
            <fieldset>
              <input class="w-input input" placeholder="Your Name" type="text" name="name" value="<?= $name ?>" tabindex="1" required autofocus>
              <span class "error"><?= $name_error ?></span>
            </fieldset>
            <label class="label" for="email">Email address: *</label>
            <fieldset>
              <input class="w-input input" placeholder="Your Email Address" type="Email" name="email" value="<?= $email ?>" tabindex="2" required>
              <span class "error"><?= $email_error ?></span>
            </fieldset>

              <label class="label" for="field" <?php if ($gender == 'subscribe'){?>style="display:none"<?php } ?>> Message:</label>
            <fieldset>
              <textarea class="w-input input" <?php if ($gender == 'subscribe'){?>style="display:none"<?php } ?> id="field" placeholder="Enter your message" name="message" value="<?= message ?>" tabindex="3" required></textarea>

              <button class="w-button button-link button-right" name="submit" type="submit" id="contact-submit" data-submit="Please wait...">SUBMIT</button>
            <fieldset> </fieldset>
          </form>
        </div>    
      </div>

и в form_process.php У меня есть обычный код для обработки того, что происходит, когда я нажимаю кнопку «Отправить»,У меня проблема в том, что для того, чтобы код, который скрывает / показывает окно сообщения, работал должным образом, страницу необходимо перезагрузить, учитывая фактическое значение переключателя. Но нажатие переключателя ничего не вызывает. Я попытался добавить функцию javascript onclick, чтобы перезагрузить страницу, но это не учитывает фактическое значение переключателя, который я нажал. Это кажется простой проблемой, но я не могу найти решение.

Ответы [ 2 ]

1 голос
/ 02 ноября 2019

чистый CSS с :checked и, возможно, ~ селектором.

примерно так: 

input[type=radio][value="subscribe"]:checked~#subscribe { 
  display: none;
}

input[type=radio][value="contact"]:checked~#subscribe { 
  display: block;
}

важное примечание: #subscribe и radio input должно быть в том же родительском элементе!

javascript (Jquery) решение:

см. пример ниже. 

  <div class="blockform">
    <h2> Contact/Subscribe </h2>
    <div class="container" >
      <form id="contact" action="<?= $_SERVER['PHP_SELF']; ?>" method="post">

  <label class="label">    
  <input type="radio" name="gender" 
  <?php if (isset($gender) && $gender=="subscribe") echo "checked";?>
  value="subscribe"> SUBSCRIBE

  <input type="radio" name="gender" style="margin-left:2em"
  <?php if (isset($gender) && $gender=="contact") echo "checked";?>
  value="contact"> CONTACT
  </label>

        <label class="label" for="name">Name: *</label>
        <fieldset>
          <input class="w-input input" placeholder="Your Name" type="text" name="name" value="<?= $name ?>" tabindex="1" required autofocus>
          <span class "error"><?= $name_error ?></span>
        </fieldset>
        <label class="label" for="email">Email address: *</label>
        <fieldset>
          <input class="w-input input" placeholder="Your Email Address" type="Email" name="email" value="<?= $email ?>" tabindex="2" required>
          <span class "error"><?= $email_error ?></span>
        </fieldset id="messagefields">
          <label class="label" for="field"> Message:</label>
          <textarea class="w-input input" id="field" placeholder="Enter your message" name="message" value="<?= message ?>" tabindex="3" required></textarea>
        <fieldset>

          <button class="w-button button-link button-right" name="submit" type="submit" id="contact-submit" data-submit="Please wait...">SUBMIT</button>
        <fieldset> </fieldset>
      </form>
    </div>    
  </div>

  <script type="text/javascript" src="js/jquery.js"></script>
  <script>
    $(document).ready(function () {
        var messagefields = $('#messagefields');
        checkRadioBoxes()

        function checkRadioBoxes() {
            if (this.value === 'subscribe') {
                messagefields.hide();
            }
            else if (this.value === 'contact') {
                messagefields.show();
            }
        }

        $('input[type=radio][name=gender]').change(function() {
            checkRadioBoxes()
        });

    })
   </script>
1 голос
/ 02 ноября 2019

Следуя совету KIKO Software, в конце концов это было мое решение:

In contact.php

  <label class="label">    
  <input type="radio" name="gender" onchange="hideMessage()"
  <?php if (isset($gender) && $gender=="subscribe") echo "checked";?>
  value="subscribe"> SUBSCRIBE

  <input type="radio" name="gender" style="margin-left:2em" onchange="hideMessage()"
  <?php if (isset($gender) && $gender=="contact") echo "checked";?>
  value="contact"> CONTACT
  </label>

Элементы, которые нужно скрыть / показать в contact.php: 

    <label class="label" for="field" id="messageTag" <?php if ($gender == 'subscribe'){?>style="display:none"<?php } ?>> Message:</label>
        <fieldset>
          <textarea class="w-input input" id="messageID" name="message" placeholder="Enter your message" <?php if ($gender == 'subscribe'){?>style="display:none"<?php } ?> value="<?= message ?>" tabindex="3"></textarea>
        </fieldset>

и в конце contact.php

  <script type="text/javascript"> 
    function hideMessage(){

      var radios = document.getElementsByName('gender');
      var contactType;

      for (var i = 0, length = radios.length; i < length; i++)
      {
       if (radios[i].checked)
       {
        // do whatever you want with the checked radio
        contactType = radios[i].value;

        // only one radio can be logically checked, don't check the rest
        break;
       }
      }            
      var x = document.getElementById("messageTag");
      var y = document.getElementById("messageID");
      if (contactType === "subscribe") {
        x.style.display = "none";
        y.style.display = "none";
      } else {
        x.style.display = "block";
        y.style.display = "block";
      }
    }
  </script>
...