Django CreateView form can't submit - html

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>⇧
<input type="button" id="addTestcaseByOne" value="++" onclick="addTestcaseByOne">
</p>
<p>⇩
<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 selected list becomes empty immediately instead.
P.S. My form.html is coming from the Django tutorial:
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<input type="submit" value="Save">
</form>
I add an additional button to test the value to be submitted.
<input type="submit" value="test" onclick="testButton()">
script as:
function testButton(){
valu = $('#id_test_case_list').val()
alert("valu:" + valu)
}
After select some cases, the first click button shows valu is the correct strings as I expected. But the selected list is cleared immediately after the button click. The repeatedly clicking of testButton also displays valu as blank.
I resolved this issue after I modified the model from test_case_list = models.CharField(max_length=200, validators=[validate_comma_separated_integer_list], default = "1")
to
test_case_list = models.CharField(max_length=200, default = "1")
by which I deleted the validators=[validate_comma_separated_integer_list].
I forgot it's not comma_separated_integer_list but comma_separated_string_list, I didn't know if there's any comma_separated_string_list

Answer 1

action="/your-name/" is missing in your form tag.
<form action="/your-route" method="post">
.
.
.
<button type="submit">Submit</button>
</form>