I created a form in which I need to use these two tags. My problem is that every time the user clicks on it, the form is submitted. I used onclick="return false" as follows, but the values ​​are not sent in the url Query.

                <div class="btn-group d-flex justify-content-center col-11 mx-auto" role="group">
                <button type="radio"  onclick="return false" name="type" value="rent" class="btn btn-lg btn-light pr-4 pl-4" id="left">YES</button>                       
                <button type="radio"  onclick="return false" name="type" value="sale" class="btn btn-lg btn-light pr-4 pl-4" id="right">NO</button>
            </div>
            <div class="col-11 mx-auto">
                <button class="btn btn-block btn-danger">Submite</button>
            </div>

CodePudding user response：

<button type="radio"

Radio buttons are input elements, not button elements. They are also empty/void elements which can't have children, so use a label element instead.

<input type="radio" name="type" value="rent" class="btn btn-lg btn-light pr-4 pl-4" id="left">
<label for "left">Yes</label>

<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Note that screen reader software tends to read out content in all-caps letter-by-letter. Write in normal sentence case and use the CSS text-transform property to present it in upper-case instead.

CodePudding user response：

<input type="radio" name="type" value="yes" class="btn btn-lg btn-light pr-4 pl-4" id="left">
<label for "left">Yes</label>

<iframe name="sif2" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

the button does not contain the value property to show the radio type input fields use input type fields.