Django CreateView 表单无法提交

Question

My views:

class AddSuiteView(CreateView):
    model = TestSuite     
    form_class = TestSuiteForm  
    
    def get_context_data(self, **kwargs):    
        context = super().get_context_data(**kwargs)        
        my_TestCase = TestCase.objects.all()
        context['my_testcase'] = my_TestCase
        return context    
    def get_success_url(self):
        return reverse("integratedTest:testSuite")

My form.py:

class TestSuiteForm(forms.ModelForm):
    class Meta:
        model = TestSuite
        fields = ( 'name', 'test_case_list', 'created_by' )

My model is:

class TestSuite(models.Model):
    name = models.CharField(max_length=200)
    test_case_list = models.CharField(max_length=200, validators=[validate_comma_separated_integer_list], default = "1") 
    created_by = models.CharField(max_length=200, default = "anyone")     
    create_datetime = models.DateTimeField("TestSuite created on", auto_now = True)

class TestCase(models.Model):
      name = models.CharField(max_length=200)
       .....

My html is a bit complex:

<form method="post">
{% csrf_token %}

<script src="https://code.jquery.com/jquery-3.5.0.min.js"></script>

<h1 class="addsuite">Create Test Suite:</h1>
  <p>
  <label for="id_name">Name:</label>
  <input type="text" id="id_name" name="name" required><br><br>
  </p>
  
  <p>
  <label for="id_test_case_list_select_l">test_case_list(double click to add):</label><br><br>
  <select size=10 name="test_case_list_select_l" id="id_test_case_list_select_l" class="multiselect" multiple="multiple" >
  {%for case in my_testcase %}
    <option value="{{case.name}}" >{{case.name}}</option>
  {%endfor %}         
  </select>
  <br><br>  

  <label for="id_test_case_list_select_r" >test case selected(double click to remove):</label><br>
  <select size=10 name="test_case_list_select_r" id="id_test_case_list_select_r" class="multiselect" multiple="multiple" >
  </select>
  <input type="hidden" id="id_test_case_list" name="test_case_list" value="">
  </p>
  <p>&#8679; 
  <input type="button" id="addTestcaseByOne" value="++" onclick="addTestcaseByOne">
  </p>
  <p>&#8681;
  <input type="button" id="decreaseTestcaseByOne" value="--" onclick="decreaseTestcaseByOne">
  </p>
  <br><br>
  
  
  <p>
  <label for="id_created_by">created_by:</label>
  <input type="text" id="id_created_by" name="created_by" "><br><br>
  </p>
  
  <input type="submit" value="Save">
</form>


<script>        
    $(document).ready(function() {
          $("#id_test_case_list_select_l").dblclick(function() {              
              var selectedItem = $('#id_test_case_list_select_l').find(":selected").text()
              $('#id_test_case_list_select_r').append
              ('<option value= ' + selectedItem + '"*1">'+selectedItem+'*1</option>') 
              
              var old_val = $('#id_test_case_list').val()
              //alert("old_val" + old_val)
              var new_val = ""
              if (old_val.length == 0){
                new_val = selectedItem + "*1"
              }
              else{
                new_val = old_val + "," + selectedItem + "*1"
              }
              
              //alert("new_val:" + new_val)
              $('#id_test_case_list').val(new_val)
            });
        });   
        
    $(document).ready(function() {
          $("#id_test_case_list_select_r").dblclick(function() {
                select_str = $('#id_test_case_list_select_r').find(":selected").text()
                //alert("select_str:"+select_str)
                var textArry = select_str.split("*")
                if( textArry.length == 2 ){
                  var rep = parseInt(textArry[1])
                  //alert("rep:"+rep)
                  if( rep==1 ){
                    var old_val = $('#id_test_case_list').val()
                    //alert("old_val:" + old_val)
                    var indexSel = $("#id_test_case_list_select_r").prop('selectedIndex')
                    //alert("indexSel:"+indexSel)
                    var textArry_oldlist = old_val.split(",")
                    var new_val = ""
                    for( let i = 0; i < textArry_oldlist.length; i++ ){
                        if(i == indexSel){
                            continue
                        }
                        else{
                            if (new_val.length == 0){
                                new_val = textArry_oldlist[i]
                            }else{
                                new_val = new_val + "," + textArry_oldlist[i]
                            }
                        }
                        //alert("new_val:" + new_val)
                    }
                    //alert("new_val:" + new_val)
                    $('#id_test_case_list').val(new_val)
                    
                    $('#id_test_case_list_select_r').find(":selected").remove()  
                  }
                } 
            });
        }); 

    $(document).ready(function() {
          $("#addTestcaseByOne").click(function() {              
              var optionLength = $('#id_test_case_list_select_r').find('option').length              
              if(optionLength>=1){
                select_str = $('#id_test_case_list_select_r').find(":selected").text()
                var textArry = select_str.split("*")
                
                if( textArry.length == 2 ){
                    var rep = parseInt(textArry[1]) + 1
                    var new_text = textArry[0] + "*" + rep
                    $('#id_test_case_list_select_r').find(":selected").text(new_text)
                    var new_val = textArry[0] + "*" + rep
                    $('#id_test_case_list_select_r').find(":selected").val(new_val) 
                    var indexSel = $("#id_test_case_list_select_r").prop('selectedIndex')
                    //alert("indexSel:"+indexSel)
                    
                    var old_val = $('#id_test_case_list').val()
                    //alert("old_val:" + old_val)                    
                    var textArry_oldlist = old_val.split(",")
                    var new_val_list = ""
                    for( let i = 0; i < textArry_oldlist.length; i++ ){
                        if(i == indexSel){
                            if (new_val_list.length == 0){
                                new_val_list = new_val
                            }else{
                                new_val_list = new_val_list + "," + new_val
                            }
                        }
                        else{
                            if (new_val_list.length == 0){
                                new_val_list = textArry_oldlist[i]
                            }else{
                                new_val_list = new_val_list + "," + textArry_oldlist[i]
                            }
                        }
                    }
                    //alert("new_val_list:" + new_val_list)
                    $('#id_test_case_list').val(new_val_list)
                }
              }              
            });
        });        
    $(document).ready(function() {
          $("#decreaseTestcaseByOne").click(function() {
              var optionLength = $('#id_test_case_list_select_r').find('option').length
              
              if(optionLength>=1){
                select_str = $('#id_test_case_list_select_r').find(":selected").text()
                var selectedTextSpls = select_str.split("*")
                
                if( selectedTextSpls.length == 2 ){
                    var rep = parseInt(selectedTextSpls[1])
                    if( rep>1 ){
                        rep = rep - 1
                        var new_text = selectedTextSpls[0] + "*" + rep
                        $('#id_test_case_list_select_r').find(":selected").text(new_text)
                        var new_val = selectedTextSpls[0] + "*" + rep
                        $('#id_test_case_list_select_r').find(":selected").val(new_val)
                        
                        var indexSel = $("#id_test_case_list_select_r").prop('selectedIndex')
                        //alert("indexSel:"+indexSel)
                        var old_hidden_val = $('#id_test_case_list').val()
                        //alert("old_hidden_val:" + old_hidden_val)                    
                        var textArry_oldlist = old_hidden_val.split(",")
                        var new_val_list = ""
                        for( let i = 0; i < textArry_oldlist.length; i++ ){
                            if(i == indexSel){
                                if (new_val_list.length == 0){
                                    new_val_list = new_val
                                }else{
                                    new_val_list = new_val_list + "," + new_val
                                }                                
                            }
                            else{
                                if (new_val_list.length == 0){
                                    new_val_list = textArry_oldlist[i]
                                }else{
                                    new_val_list = new_val_list + "," + textArry_oldlist[i]
                                }                                
                            }
                        }
                        //alert("new_val_list:" + new_val_list)
                        $('#id_test_case_list').val(new_val_list)
                    }else if( rep==1 ){
                        var indexSel = $("#id_test_case_list_select_r").prop('selectedIndex')
                        //alert("indexSel:"+indexSel)
                        var old_hidden_val = $('#id_test_case_list').val()
                        //alert("old_hidden_val:" + old_hidden_val)
                        var textArry_oldlist = old_hidden_val.split(",")
                        var new_val_list = ""
                        for( let i = 0; i < textArry_oldlist.length; i++ ){
                            if(i == indexSel){
                                continue
                            }
                            else{
                                if (new_val_list.length == 0){
                                    new_val_list = textArry_oldlist[i]
                                }else{
                                    new_val_list = new_val_list + "," + textArry_oldlist[i]
                                }                                
                            }
                        }
                        //alert("new_val_list:" + new_val_list)
                        $('#id_test_case_list').val(new_val_list)
                        
                        $('#id_test_case_list_select_r').find(":selected").remove()   
                    }
                }
              }
              
            });
        });        
</script>

Details: Upper list selection(name="test_case_list_select_l") is a full list. Double clicking options in upper list can add a same named one to the lower list(name="test_case_list_select_r") and the hidden input(name="test_case_list") get a new value. Hopefully, the hidden input will update the field test_case_list

The code seems good to me, but unfortunately it can't save. After input everything and click save the button, the page never redirect and model TestSuite have no new record. The lower list becomes empty instead.

PS My form.html is coming from the Django tutorial:

<form method="post">
{% csrf_token %}    
    {{ form.as_p }}
    <input type="submit" value="Save">
</form>

I think CreateView can complete this for me, right? If I need to add another action="something" in , I have to create another view function to saving the record... My very initial version contains no select-able list, instead I use a text input receiving a string. That's OK. submit button did work then. So I think it's not due to the reason of form action.

For a better user experience, I list out all names of existing test cases and use select-able list. The user select his choices and I saved all names as string "name1*N1 times, name2*N2 times, ... " . The submit didn't work after these changes. I suspect the framework which input will map to test_case_list or input not valid or any other html errors.

Answer 1

action="/your-name/" is missing in your form tag.

<form action="/your-route" method="post">
.
.
.
<button type="submit">Submit</button>
</form>