'How to use radio type as button without submit form?

I use radio type button in my form:

<div class="d-block">
  <div class="btn-group" role="group" aria-label="Basic example">
    <button type="radio" name="type" value="rent" style="padding-right: 0 !important;" class="btn btn-lg btn-secondary pr-4 pl-0 active" id="left">{{ __('Rent') }}</button>
    <button type="radio" name="type" value="buy" style="padding-right: 0 !important;" class="btn btn-lg btn-light pr-4 pl-0" id="right">{{ __('Sale') }}</button>
  </div>
</div>

how to change between Rent and Buy button without Submit Form ?

javascripthtmlbootstrap-4


Solution 1:[1]

It's supposed to be input and not button

<div class="d-block">
  <div class="btn-group" role="group" aria-label="Basic example">
    <input type="radio" name="type" value="rent" style="padding-right: 0 !important;" class="btn btn-lg btn-secondary pr-4 pl-0 active" id="left">{{ __('Rent') }}</input>
    <input type="radio" name="type" value="buy" style="padding-right: 0 !important;" class="btn btn-lg btn-light pr-4 pl-0" id="right">{{ __('Sale') }}</input>
  </div>
</div>

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution Source
Solution 1 Laif

Related Questions