jQuery: set value into select input field

I am building an edit form using Django forms. When user click on a particular table row, it will open up an editModal and take value of that table rows. However, I couldn't set the value into input of type select.

$("#question_type").val("question_type");

The code above doesn't work.

jQuery

//Edit OnClick- Question
$(".table-row td:not(:has(input))").on("click", function(){
  $('#editModal').modal('show');
  let rowId = $(this).closest('tr').attr('data-id');
  var test_id, question_type, question_name, option;

  $.ajax({
    url: "{% url 'edit_question' %}",
    type: 'GET',
    data: {"rowId" : rowId},
    dataType: 'json',
    success: function(data){
      test_id = data.question[0]['test_name'];
      question_name = data.question[0]['question_name'];
      question_type = data.question[0]['question_type'];
      if (question_type == 'QCM'){
        option = parseInt(data.question[1].length);
      }


      $(".question_name").val(question_name);
      //input of type text works fine.
      $(".question_type").val(question_type);
      $(".test_id").val(test_id);
      },
    });

$(".question_type").val(question_type); $(".test_id").val(test_id); //doesn't set the value into select input

.html

<div class="modal fade" id="editModal" tabindex="-1" role="">
    <div class="modal-dialog modal-login" role="document">
        <div class="modal-content">
            <div class="card card-signup card-plain">
                <div class="modal-body">
                    <form class="form" method="POST" action="{% url 'edit_test' %}">
                        {% csrf_token %}
                        <h2>Edit Question</h2>
                        <div class="card-body">
                            <div class="form-group ">
                                <label>Test :</label>
                                <div class="input-group">
                                    {{questionForm.test_id}}
                                </div>
                            </div>
                            <div class="form-group ">
                                <label>Type :</label>
                                <div class="input-group">
                                    {{questionForm.question_type}}
                                </div>
                            </div>
                            <div class="form-group ">
                                <label>Question :</label>
                                <div class="input-group">
                                    {{questionForm.question_name}}
                                </div>
                            </div>
                        </div>
                    </form>
                </div>
            </div>
        </div>
    </div>
</div>

forms.py

class QuestionForm(ModelForm):
        class Meta:
            model = Question
            fields = ['test_id','question_type','question_name']
        test_id = forms.ModelChoiceField(queryset=Test.objects.all(), empty_label=None, label='Test',
                widget=forms.Select(
                    attrs={
                        'id': "test_id",
                        'name': "test_id",
                        'title': 'Select a Test',
                        'class': 'selectpicker form-control test_id',
                        'data-style': 'btn btn-primary btn-sm',
                        'data-size': '7',
                    }
                )
        )
        question_type = forms.ChoiceField(choices = QUESTION_TYPE, initial='QCM',
                widget=forms.Select(
                    attrs={
                        'id': "question_type",
                        'name': "question_type",
                        'title': 'Select a Test',
                        'class': 'selectpicker form-control question_type',
                        'data-style': 'btn btn-primary btn-sm',
                        'data-size': '7',
                    }
                )
        )
        question_name = forms.CharField(label='Question', 
            widget=forms.TextInput(
                attrs={
                    'id': "question_name",
                    'name': "question_name",
                    'class': 'form-control question_name',
                    'placeholder': 'Add question here...',
                }
            )
        )

I've searched through many solutions, but none work. What cause the errors? How could I fix this? Thank you.

1 answer

  • answered 2018-07-11 14:16 Sokunthaneth

    After trying many solutions, I came to realize that I was not able to set the value into the input field because input field is created using bootstrap select. using val() to set the value doesn't refresh the UI so I cannot see change on the browser.

    Solution

    $(".question_type").selectpicker();
    $(".question_type").selectpicker('val', question_type);
    

    I make this change, and now everything work fine!

    Read more Bootstrap-select .selectpicker('val')