更新

Question

我正在使用Django表单进行注册，最后选中一个复选框，但每当我点击提交按钮时，第一个输入类型的值就会变为“on”。请注意，仅在选中复选框后才会启用提交按钮。

我已经使用jQuery尝试输出该特定字段的值，实际上它不会返回我输入的值但只返回“on”。我花了几个小时进行调试，但仍然无法找到出路。

form.html

<form method="post">
                {% csrf_token %}
                   {% for field in form1 %}
                            {{ field|as_crispy_field }}
                            <span>{{ field.help_text|safe }}</span>
                    {% endfor %}
                   <div class="terms-con">
                        <ul>
                            <li><input type="checkbox" id="terms" name="name"></li>
                            <li><a href="{%url 'main:terms_conditions'%}">I agree with the terms and conditions of the site</a></li>
                        </ul>
                    </div>
                <button type="submit" id="registerBtn" name="button" disabled="disabled">Register</button>
        </form>

forms.py

class AssociationForm(forms.ModelForm):
class Meta:
    model = Association
    fields = (
        'name',
    )
    labels = {
        'name': _("Association name")
    }
    widgets = {
        # 'name': forms.TextInput(attrs={'value': ''}),
        # 'year_of_creation': forms.TextInput(attrs={'placeholder': "Format: 'year-month-day'"})
    }

    def __init__(self, *args, **kwargs):
        super(AssociationForm, self).__init__(*args, **kwargs)
        self.helper = FormHelper(self)

index.js

$(document).ready(function(){

console.log($('input#id_name').val());

  $('#terms').click(function(){
    // check if the checkbox is checked
    if($(this).is(':checked')){
      $('#registerBtn').removeAttr('disabled');
      $('#registerBtn').attr('value', true);
    }else{
      $('#registerBtn').attr('disabled', true);
    }
  });
});

表单输出

<form method="post">
                <input type='hidden' name='csrfmiddlewaretoken' value='jNEa0SK09m8PHCteaGT9ouPl2G5wdZapsboTwrARrwOAMeQjkufxceaakEEloW5K' />
<div id="div_id_name" class="form-group">

            <label for="id_name" class="control-label  requiredField">
                Association name<span class="asteriskField">*</span>
            </label>
 <div class="controls ">
                    <input type="text" name="name" value="on" id="id_name" required class="textinput textInput form-control" maxlength="100" />

                </div>


    </div>

任何帮助将不胜感激。

更新

const idName = document.querySelector('input#id_name')
  idName.addEventListener('change', function(event){
    $('input#id_name').val($(this).val());
    console.log(event.target.value);
  })

Answer 1

您获得on的原因是在用户输入之前执行的Javascript代码，因此您将无法获得更改的值。尝试绑定到change事件并获取用户键入的值。

const idName = document.querySelector('#id_name')
idName.addEventListener('change', function(event) {
  console.log(event.target.value);
})

Django表单输入类型文本在单击提交按钮时保持返回值“on”

更新

1 个答案: