Cannot get the value from HTML buttons to Django view

Question

Here's my original HTML with the "radio" buttons:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<div data-value="attending" class="radio-tempo col-sm-12">
  <button class="btn btn-default active" data-value="yes"><i class="fa fa-smile-o"></i>Yes</button>
  <button class="btn btn-default" data-value="no"><i class="fa fa-frown-o"></i>No</button>
</div>

I wanted to capture the values into my POST request so I modified it and added names and values to my HTML code:

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" integrity="sha512-5A8nwdMOWrSz20fDsjczgUidUBR8liPYU+WymTZP1lmY9G6Oc7HlZv156XqnsgNUzTyMefFTcsFH/tnJE/+xBg==" crossorigin="anonymous" referrerpolicy="no-referrer"
/>
<div data-value="attending" class="radio-tempo col-sm-12">
  <button name="button_yes" value="yes" class="btn btn-default active" data-value="yes"><i class="fa fa-smile-o"></i>Yes</button>
  <button name="button_no" value="no" class="btn btn-default" data-value="no"><i class="fa fa-frown-o"></i>No</button>
</div>

And the views.py

def index(request):
    if request.method == 'POST':
        print(request.POST)

The output:

<QueryDict: {'csrfmiddlewaretoken': ['zSRXL8dUDyWlSMdnHs3qTrNHWOHu3WC9eOWnDuI4wW95VvndDArPlS4vGPFTooDs'], 'FirstName': ['John'], 'LastName': ['Smith'], 'Message': ['bla bla']}>

What am I doing wrong? I know that best way would be to use plain radio buttons but I would like to avoid CSS styling of the radio buttons and keep the original HTML template elements.

They are already in a
tag. It's just a snippet I've posted so the post looks yummy — icmtf, Jun 28 '22 at 10:22
So type="button" does not submit a form. Make them type="submit" — mplungjan, Jun 28 '22 at 10:31
But then they will become a SUBMIT button, right? Which is what I would love to avoid. These are YES/NO buttons acting like Radio Buttons — icmtf, Jun 28 '22 at 10:37
You want your cake and eat it too. Why is styling the radios as buttons a problem? People understand radios anyway — mplungjan, Jun 28 '22 at 10:44
Cause I'm not CSS ninja. I'm only using complete HTML/CSS template. — icmtf, Jun 28 '22 at 11:19
In any case a button that is not a submit button is not sent to the server since it was not clicked to submit a form. — mplungjan, Jun 28 '22 at 11:28

score 1 · Answer 1 · answered Jun 28 '22 at 11:39

Buttons are not sent to the server unless they are submit buttons and clicked.

Here is a modified version of How to style a radio button to look like a regular Learn More Button

It looks like buttons but will be sent to the server

.radio-tempo {
  position: relative;
  display: block;
  text-align: center;
  width:100px;
}

.radio-tempo label {
  display: block;
  background: none;
  color: #01a7e1;
  border-radius: 5px;
  padding: 10px 20px;
  border: 2px solid #01a7e1;
  margin-bottom: 5px;
  cursor: pointer;
  font-family: Arial, Helvetica, sans-serif;
}

input[type="radio"] {
  display: none;
  position: absolute;
  width: 100%;
  appearance: none;
}

input[type="radio"]:checked+label {
  background: #01a7e1;
  color: #fff;
}

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" />
<div data-value="attending" class="radio-tempo col-sm-12">
  <input type="radio" id="button_yes" name="button_yes_no" value="yes" class="btn btn-default active" data-value="yes"><label for="button_yes"><i class="fa fa-smile-o"></i> Yes</label>
  <input type="radio"  name="button_yes_no" id="button_no" value="no" class="btn btn-default" data-value="no" /><label for="button_no"><i class="fa fa-frown-o"></i> No</label>
</div>

Cannot get the value from HTML buttons to Django view

1 Answers1