0

I have a form that implements 3 buttons. Each button offers a different option for the user to select. The page only renders two of the buttons, the last one is hidden. I want to change the ones that display depending on the radio button input.


This is the HTML document that I am working with:

.hidden{
  display: none;
}
<label for="pay">Payment Option</label>
          <div class="row check">
            <div class="col-sm-6">          
              <input type="radio" id="gcash" name="pay" value="gcash" checked="checked"/>
              <label for="gcash" class="pay">Gcash</label>
            </div>
            <div class="col-sm-6">
              <input type="radio" id="walk" name="pay" value="unpaid"/>
              <label for="walk" class="pay">Walk In</label>
            </div>
     </div>

    <div class="buttons">
          <a href="#" class="res-btn" role="button">Back</a>
          <a href="#" class="res-btn" role="button">Proceed payment</a>
          <input type="submit" class="res-btn hidden" name="btn-submit" value="Submit">
    </div>
Infinite Button
  • 75
  • 9
  • `onchange -> if value is -> show/hide` – Abhishek Pandey Apr 08 '21 at 06:32
  • 1
    Does this answer your question? [How to use jQuery to show/hide divs based on radio button selection?](https://stackoverflow.com/questions/2777139/how-to-use-jquery-to-show-hide-divs-based-on-radio-button-selection) – Abhishek Pandey Apr 08 '21 at 06:33
  • Your going to have to implement JavaScript buddy, and dynamically change the hidden CSS class on that last button. "class="res-btn hidden" or you can remove the word hidden if you don't want it hidden at all, but that might cause validation issues for you. – JΛYDΞV Apr 08 '21 at 07:00
  • @AbhishekPandey did not work on me bruh – Infinite Button Apr 08 '21 at 08:05

1 Answers1

0

radio.addEventListener('change', function() {
    console.log(this.value)
});

use this handler for getting data of radio

then, find your element and use

element.classList.toggle("hidden");

for toggle class name, which uses in your css

Internet User
  • 36
  • 3