use button on form without submit

Question

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>

[How to prevent buttons from submitting forms](https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms) — gre_gor, Dec 04 '21 at 09:51
Does this answer your question? [How to prevent buttons from submitting forms](https://stackoverflow.com/questions/932653/how-to-prevent-buttons-from-submitting-forms) — bad_coder, Dec 05 '21 at 01:22

score 2 · Answer 1 · answered Dec 04 '21 at 09:22

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

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.

use button on form without submit

1 Answers1