django auto check if i save it to database

Admin 1
Viewed 378

Here is my html:

<input type="checkbox" value="1" name="Visual" id="visual">
<input type="checkbox" value="1" name="Tuberculosis" id="Tuberculosis">
<input type="checkbox" value="1" name="Skin" id="Skin">

<script type="text/javascript">
$('#checkbox-value').text($('#checkbox1').val());

$("#checkbox1").on('change', function() {
  if ($(this).is(':checked')) {
    $(this).attr('value', 'true');
  } else {
    $(this).attr('value', 'false');
  }

  $('#checkbox-value').text($('#checkbox1').val());
});
</script>

Here is my view:

Visual = request.POST['Visual']
Tuberculosis = request.POST['Tuberculosis']
Skin = request.POST['Skin']
V_insert_data = StudentUserMedicalRecord(
    Visual=Visual,
    Tuberculosis=Tuberculosis,
    Skin=Skin
)
V_insert_data.save(

Why is it every time I save the data to my database, the Visual, Tuberculosis and Skin are automatically checked even though I didn't check it when I was saving it? Or I think my javascript is wrong?

django javascript
3 Answers
  1. You don't need $('#checkbox-value').text($('#checkbox1').val());, unless you have such element on the page which you haven't shown us.
  2. You can't define more than one element on the same page with the same id. (Same goes for the name attribute). Use different ids as shown in my code and match the chekboxes by class/name.
  3. Don't put value="1" inside your checkboxes.
  4. Put your jQuery code inside a $(function() { }); which is an alias for $( document ).ready(). More info here.
  5. Don't use bare request.POST values, use the sanitized self.cleaned_data['var_name'] instead.
  6. I don't think it's a good idea to have param names with capital letters (this is just a note, it will not impact the functionality). According to Python's PEP 8, only classes should start with a capital letter.

Frontend:

<input type="checkbox" name="Visual" id="checkbox1" class="checkbox-js-trigger-class">
<input type="checkbox" name="Tuberculosis" id="checkbox2" class="checkbox-js-trigger-class">
<input type="checkbox" name="Skin" id="checkbox3" class="checkbox-js-trigger-class">

<script type="text/javascript">

$(function() {
      $(".checkbox-js-trigger-class").on("change", function(){
          var new_val = $(this).is(':checked') ? 1 : 0;
          $(this).val(new_val);
      });
});
</script>

Backend:

It's best to use Model Form:

class StudentUserMedicalRecordForm(ModelForm):
    class Meta:
        model = StudentUserMedicalRecord
        fields = ['Visual', 'Tuberculosis', 'Skin']
user_47643530

Because you have default value given as "1" here

<input type="checkbox" value="1" name="Visual" id="visual">

And also there is no element with id = "checkbox1" or id = "checkbox-value" which are referenced in your script.

user_46449420

Checkbox inputs are actually a little strange and work differently than how you think they work.

You don't need jQuery to handle the case when a checkbox has been changed. The browser and HTML handle that for you. (Sort of like how you don't need to listen for keys being pressed while the user is focused on a input type="text" to make letters show up in the text box.)

Instead, what happens is if the user checks the checkbox, the input will have an attribute called checked. It can look something like this .

The checkbox input tag also has two other attributes name and value. These are what get sent to the server when the form is submitted. BUT it only sends the name and value pair for the checkboxes that are checked! For the checkboxes that are not checked, it sends nothing. So if every checkbox has a name and value you can think of it as a key-value pair. If the check box is checked, it will send key=value to the server. You are allowed to have more than one value for a single key if you designate the name as being the name of an array.

So imagine you have a form like this:

<input type="checkbox" name="disease[]" value="tuberculosis" checked>
<input type="checkbox" name="disease[]" value="chickenpox" checked>
<input type="checkbox" name="disease[]" value="smallpox">
<input type="checkbox" name="needs_medicine" value="true" checked>
<input type="checkbox" name="recovered" value="whatevervalue">

When that form is submitted, the server will receive something that looks like "disease=[tuberculosis,chickenpox]&needs_medicine=true"

Notice that smallpox and recovered are not mentioned because they are not checked. Also notice that it's not super important what you put as the value of a checkbox that is not a multiple choice checkbox (in this example, needs_medicine) because the value that gets sent to the server will always either be the value of the checkbox (in this case, the string "true").

user_44630960
Related