How can I use buttons in an HTML form, but not for submitting?

Question

I want to use a button group in an HTML form rather than for example check boxes or radios.

I am using this code:

          <form class="form-horizontal" role="form" action="client/index" method="post">
          <fieldset>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-sm-2 control-label" for="nickname">Nickname</label>
              <div class="col-sm-10">
                <input id="nickname" name="nickname" type="text" class="form-control" required="required">
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label" for="gender">Gender</label>
              <div class="col-sm-10">
                <div class="btn-group">
                  <button type="button" class="btn btn-default" value="Female" name="username">Female</button>
                  <button type="button" class="btn btn-default" value="Male" name="username">Male</button>
                </div>
              </div>
            </div>

            <!-- Button -->
            <div class="form-group">
              <label class="col-sm-2 control-label" for="button"></label>
              <div class="col-sm-offset-2 col-sm-10">
                <button id="button" class="btn btn-lg btn-primary" type="submit">Enter</button>
              </div>
            </div>

          </fieldset>
          </form>

but <?php echo $_POST['username']; ?> is null.

What am I doing wrong?

You have to submit the form in a way so that the data get send to the server! Otherwise you have to use ajax.(BTW your buttons have to be in a from with post method) — Rizier123, Nov 07 '14 at 13:42
`within an HTML form`. I already submit the data. I can get check boxes to work. I can get radios to work. I can't get button groups to work. — user4166144, Nov 07 '14 at 13:44
Fron a User Experience perspective, don't break what they expect. A button is normally associated with form submitting. Also once they click one, how to they know which one they have clicked? How do they undo it? — Jon P, Nov 07 '14 at 13:45
@user4166144 are you submitting the from with post or get method? — Rizier123, Nov 07 '14 at 13:46
The only button value that is included in the form is the value of the button that was used to submit the form. If you don't use those buttons to submit the form, you need to include the value in the form in a different way, for example using Javascript to put the value in a hidden field when then button is clicked. — Guffa, Nov 07 '14 at 13:47
Perhaps you could use checkboxes and just style them differently? http://stackoverflow.com/questions/4148499/how-to-style-checkbox-using-css or http://codepen.io/bbodine1/pen/novBm — Greg Bowser, Nov 07 '14 at 13:52

score 1 · Answer 1 · answered Nov 07 '14 at 13:47

1

A <button> is not an <input>, so you can't send that button data to the server, unless you use something like JavaScript to have its value copied into a <input type="hidden">, or submit the form via Ajax and pull the value on submit.

answered Nov 07 '14 at 13:47

rnevius

26,578
10
58
86

I tried switching to `` instead of ` – user4166144 Nov 07 '14 at 13:52
That's not what I'm saying, at all. – rnevius Nov 07 '14 at 13:52

Guffa · Answer 2 · 2014-11-07T14:06:46.417

The only button value that is included in the form is the value of the button that was used to submit the form.

If you don't use those buttons to submit the form, you need to include the value in the form in a different way, for example using Javascript to put the value in a hidden field when then button is clicked:

<input type="hidden" name="username" id="username">

Then:

<button type="button" class="btn btn-default" value="Female" onclick="document.getElementById('username').value = this.value;">Female</button>
<button type="button" class="btn btn-default" value="Male" onclick="document.getElementById('username').value = this.value;">Male</button>

You still have the usability problem, though. The button might have focus right after you clicked it, but if the user does anything else in the form the selection is not visible. If you want to use buttons that way you might consider changing the apperance of the selected button.

Beat me too it! Going to leave my answer up for a little as I think that what the OP is trying to do is poor UX at best. — Jon P, Nov 07 '14 at 13:56

Funk Forty Niner · Answer 3 · 2014-11-07T14:04:17.233

Button types as button will not work with a POST method, you need to use a submit type.

What I changed:

<button type="button" to <button type="submit" and action="" for testing purposes.

PHP

<?php 

if($_SERVER['REQUEST_METHOD'] == "POST"){

$gender = $_POST['username'];

echo $gender;

}

?>

<form class="form-horizontal" role="form" action="" method="post">
          <fieldset>

            <!-- Text input-->
            <div class="form-group">
              <label class="col-sm-2 control-label" for="nickname">Nickname</label>
              <div class="col-sm-10">
                <input id="nickname" name="nickname" type="text" class="form-control" required="required">
              </div>
            </div>

            <div class="form-group">
              <label class="col-sm-2 control-label" for="gender">Gender</label>
              <div class="col-sm-10">
                <div class="btn-group">
                  <button type="submit" class="btn btn-default" value="Female" name="username">Female</button>
                  <button type="submit" class="btn btn-default" value="Male" name="username">Male</button>
                </div>
              </div>
            </div>

            <!-- Button -->
            <div class="form-group">
              <label class="col-sm-2 control-label" for="button"></label>
              <div class="col-sm-offset-2 col-sm-10">
                <button id="button" class="btn btn-lg btn-primary" type="submit">Enter</button>
              </div>
            </div>

          </fieldset>
          </form>

<button type="button" is used in conjunction with JS.
Plus, you haven't provided any PHP in your question besides
<?php echo $_POST['username']; ?>

score 0 · Answer 4 · answered Nov 07 '14 at 13:52

It's a BAD idea. I repeat a bad idea, but it can be done with javascript and a hidden form field. A rough version:

<input type="hidden" id="username" name="username" />
<div class="btn-group">
     <button type="button" class="btn btn-default" value="female" name="btnUsername"
          onClick="document.getElementByID('username').value='Female';">Female</button>
     <button type="button" class="btn btn-default" value="male"
       onClick="document.getElementByID('username').value='Male';"
       name="username">Male</button>
</div>

Why is it a BAD IDEA? Because it breaks the normal user expectation of buttons, provides no feed back on what has been selected and has no obvious way of undoing the selection. Radio buttons or check boxes do this so much better. If you don't like the way they look find one of the many ways of improving their look on the internet.

score 0 · Accepted Answer · answered Nov 07 '14 at 17:54

Answer

It's possible, in pure HTML like so:

        <div class="form-group">
          <label class="col-sm-2 control-label" for="gender">Gender</label>
          <div class="col-sm-10">
            <div class="btn-group" data-toggle="buttons">
              <label class="btn btn-default btn-lg">
                <input type="radio" name="username" value="Female" id="username"> <i class="fa fa-female"></i> Female
              </label>
              <label class="btn btn-default btn-lg">
                <input type="radio" name="username" value="Male" id="username"> <i class="fa fa-male"></i> Male
              </label>
            </div>
          </div>
        </div>

How can I use buttons in an HTML form, but not for submitting?

5 Answers5

Answer