javascript - Django 使用 Javascript 提交错误表单

Question

我正在实现一个简单的练习来教授密码学方法。目前我正在研究凯撒密码。该网络应用程序的工作原理如下，用户输入 key 和明文以生成包含明文每个字母的动态表单。然后每个表单彼此分开，这意味着每个表单都包含一个有效的按钮来验证加密是否正确完成。

问题是，当从第二个表单及以后按下验证按钮时，它总是发送第一个表单信息。我注意到这一点是因为我在 Javascript 和 python 中打印表单的值，并且它总是打印第一个表单。

模板:

 <div class="form-group">
  <label for='id_plaintext'>
    Plaintext:
  </label>
  <form onsubmit="return false;" method="GET">
    {% csrf_token %}
    <div class="col-sm-5 col-xs-6 col-md-4">
      {{ formPlaintext.plaintext }}
    </div>
    <button name="action" id="encryptButton" class="btn btn-primary" value="encrypt">Encrypt</button>
  </form>
  <br> {% if formPlaintext.errors %}
  <div class="alert alert-danger" role="alert">
    <strong>{{ formPlaintext.plaintext.errors }}</strong>
  </div>
  {% endif %}
</div>

{% for letterOfWord, keyToUse, letterToFill, letterNumber in equations %}
  <form method="GET" class="form-inline">
    {% csrf_token %}
    <div class="row">
      <div class="col-sm-12 col-xs-12 col-lg-12 col-md-12">

        <div class="alert alert-info col-sm-12 col-xs-12 col-lg-12 col-md-12">
          Excercise Number {{letterNumber}} <br>
          ( {{ letterOfWord }} + {{ keyToUse }} ) mod 26 = {{ letterToFill }}
          <button name="action" class="validate">
            Validate
          </button>
        </div>
        <div id="notification">
        {% include "content/caesarValidation.html" %}
      </div>
      </div>
    </div>

</form>
{% endfor %}

Javascript:

   $("#encryptButton").on({
    click: function() {
        var variable = document.getElementById('id_plaintext');
        console.log(variable.value)
        $.ajax({
          url: "/exampleCaesar",
          type: "GET",
          data: {
            CSRF: 'csrf_token',
            plaintext: $('#id_plaintext').val(),
            key: $('#id_key').val()
          },

          success: function(example) {
            $('#example1').show();
            $('#exampleSection').html(example);
            console.log(example);

          }

        }); //END OF Ajax
      } //END OF FUNCTION
  }); //END OF encryptButton

  $(".validate").on({
    click: function(event) {
        var variable = document.getElementById('id_letterToFill');
        console.log(variable.value)
        console.log("Inside validate button function")

        event.preventDefault();

        $.ajax({
          async: true,
          url: "/validateCaesar",
          type: "GET",
          data: {
            CSRF: 'csrf_token',
            originalLetter: $('#id_letterOfWord').val(),
            key: $('#id_keyToUse').val(),
            encryptLetter: $('#id_letterToFill').val(),
            numberLetter : $('#id_letterNumber').val()
          },
          success: function(exampleData) {

            console.log(exampleData)
            $('#notification').html(exampleData)
            console.log(exampleData)

          }

        }); 
      } 
  });

观看次数

    def exampleCaesar(request):

    if request.is_ajax() and request.method == "GET":
        formKey = caesarKey(request.GET or None)
        formPlaintext = caesarPlaintext(request.GET or None)
        if formKey.is_valid():
            if formPlaintext.is_valid():
                wordToEncrypt = request.GET.get('plaintext')
                wordToEncrypt = wordToEncrypt.upper()
                wordLength = len(request.GET.get('plaintext'))
                key = request.GET.get('key')

                print(wordToEncrypt)
                print(key)
                equations = []
                formKey = caesarKey(request.GET or None)
                letterNumber = 1
                for x in range(wordLength):
                    exampleForm = caesarCipherExample(initial={'letterOfWord' : wordToEncrypt[x], 'keyToUse' : key, 'letterNumber' : letterNumber})
                    # print(exampleForm)
                    if exampleForm.is_valid:
                        equations.append(exampleForm)
                        letterNumber += 1
                        print(equations)

                context = { 'equations' : equations,
                            'formKey' : formKey,
                            'formPlaintext': formPlaintext

                }

                html = render(request, "content/exampleCaesar.html", context)
                return HttpResponse(html)
            else:
                print(formPlaintext.errors)
                context = { 'formKey' : formKey,
                            'formPlaintext': formPlaintext

                }

                html = render(request, "content/exampleCaesar.html", context)
                return HttpResponse(html)


        else:
            print(formKey.errors)

def validateCaesar(request):

    obj = CaesarCipher()
    print("You're in!")

    if request.is_ajax() and request.method == 'GET':
        formExample = caesarCipherExample(request.GET or None)

        encryptLetter = request.GET.get('encryptLetter').upper()
        originalLetter = request.GET.get('originalLetter')
        key = int(request.GET.get('key'))
        print(encryptLetter)
        print(originalLetter)

        print(key)
        if obj.validateLetter(encryptLetter, originalLetter, key):
            listOfCorrect = [request.GET.get('numberLetter'), 'true']

            print(listOfCorrect)
            html = render(request, "content/caesarValidation.html", {'listOfCorrect' : listOfCorrect})
            return HttpResponse(html)
        else:
            listOfCorrect = [request.GET.get('numberLetter'), 'false']

            print(listOfCorrect)
            html = render(request, "content/caesarValidation.html", {'listOfCorrect' : listOfCorrect})
            return HttpResponse(html)

凯撒验证模板:

   <!doctype html>

{% if listOfCorrect %}
<div id="notification">

{% if "true" in listOfCorrect %}
  <div class="alert alert-success">
    Success!
  </div>

  {% else %}
  <div class="alert alert-danger">
    Fail!
  </div>
{% endif %}

{% endif %}

</div>

这是包含模板中使用的表单的 forms.py:

class caesarCipherExample(forms.Form):
    letterOfWord = forms.CharField(max_length = 1, widget=forms.TextInput(attrs={'class' : 'form-control', 'class' : 'no-border',  'style' : 'width:20px; background-color: #D9EDF7; text-align: left;', 'readonly' : 'readonly'}))
    keyToUse = forms.DecimalField(max_value = 26, min_value = 1, initial = 1, required = True, widget=forms.NumberInput(attrs={'class' : 'form-control', 'class' : 'no-border', 'style' : 'width:30px; background-color: #D9EDF7; text-align: right;', 'readonly' : 'readonly'}))
    letterToFill = forms.CharField(max_length = 1, widget=forms.TextInput(attrs={'class' : 'form-control','style' : 'width:60px'}))
    letterNumber = forms.DecimalField(widget=forms.TextInput(attrs={'class' : 'form-control', 'class' : 'no-border',  'style' : 'width:20px; background-color: #D9EDF7; text-align: left;', 'readonly' : 'readonly'}))

Answer 1

您的表单被包含多次，但每次都可能对字段使用相同的 ID 值。但在 HTML 中，ID 必须是唯一的。

您需要使用 jQuery 查找父表单并从那里获取其值，而不是通过 ID 获取字段值。像这样的东西:

var form = $(this).parent('form');
var variable = form.find('input[name=letterToFill]');

其他值依此类推。