Hiding components using a radio button

Question

In my site I'm using php to handle contact/subscribe. The form is quite simple, there are two radio buttons that should control whether the user wants to "subscribe" or to "contact" me. In the latter case, I would like another "Message" box to appear. This is what I have so far:

In 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>

and in form_process.php I have the usual code to handle what happens when I click the "Submit" button. The problem I have is that for the code that hides/shows the message box to work properly, the page needs to be reloaded considering the actual value of the radio button. But clicking the radio button doesn't trigger anything. I tried adding an onclick javascript function to reload the page, but this is not considering the actual value of the radio button I pressed. This seems to be an easy problem but I can't find the solution to it.

You could use javascript to show or hide form elements without reloading the page. If you're a bit lazy (and who isn't) you could use Jquery's [show](https://api.jquery.com/show) and [hide](https://api.jquery.com/hide). — KIKO Software, Nov 02 '19 at 10:41
You mean getting the name of the elements and hide them programmatically? — aaragon, Nov 02 '19 at 10:43
Yes, use the `onchange` event, get the status of the radio button, and use that to either show or hide the message box in Javascript. — KIKO Software, Nov 02 '19 at 10:44
Here's a very similar question: https://stackoverflow.com/questions/9525282/how-to-show-hide-textarea-based-on-select-in-jquery — KIKO Software, Nov 02 '19 at 10:46
When changing your checkbox, nothing is changed in the backend. So when you reload the page, where should the information come from that the checkbox was checked. You might wanna submit and then reload. — davidev, Nov 02 '19 at 10:47
You have serious HTML problems here. You have some `class "error"` without assinging the value to the class with an equal (`=`). Also you have a `
` that opens in the end, but is never closed with its `
` counterpart. Also, for your answer, you can get it with pure CSS without JavaScript involved: https://stackoverflow.com/questions/50919193/hiding-showing-a-div-based-on-a-radio-button-css-only — Jorge Fuentes González, Nov 02 '19 at 12:01
@JorgeFuentesGonzález thanks for pointing out these issues. — aaragon, Nov 03 '19 at 10:52

score 1 · Answer 1 · answered Nov 02 '19 at 11:56

Following the advice of KIKO Software, this was my solution in the end:

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>

The elements that need hiding/showing in 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>

and at the end of 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>

Ah, without Jquery. I would pay a bit more attention to naming things correctly. Two obvious naming errors are: The radio inputs are called `gender`, but have nothing to do with gender. The function is called `hideMessage()` but can also show the message. Naming things correctly is important, for other people to understand your code, and for yourself if you read your own code years later. — KIKO Software, Nov 02 '19 at 12:55
@KIKOSoftware thanks for the feedback. Indeed I copied the radio buttons from a gender example and didn't change them immediately but only after everything worked out. — aaragon, Nov 02 '19 at 18:06

Alireza Esfahani · Answer 2 · 2019-11-02T12:40:36.560

pure css with :checked and maybe ~ selector.

something like this:

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

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

important note: #subscribe and radio input should be in same parent!

javascript(Jquery) solution:

see the example below.

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

This can be done in pure CSS with the `:checked` selector. – Jorge Fuentes González Nov 02 '19 at 12:29 — Jorge Fuentes González, Nov 02 '19 at 12:29

Hiding components using a radio button

2 Answers2