Djangoでの画像切り抜きアプリ

Question

前提・実現したいこと

Djangoで画像切り抜きアプリを作りたいですが、
cropper.jsで切り取る座標データをformsでうまく渡すことができません。

渡した値をCropSizeというModelに引き渡すところまで実現したいです。

発生している問題・エラーメッセージ

・405 HTTP Error
・リダイレクト

など、さまざま。

該当のソースコード

##forms.py

class CropForm(forms.Form):
  x = forms.FloatField(widget=forms.HiddenInput())
  y = forms.FloatField(widget=forms.HiddenInput())
  w = forms.FloatField(widget=forms.HiddenInput())
  h = forms.FloatField(widget=forms.HiddenInput())

##models.py

class CropSize(models.Model):
  x = models.FloatField(blank=False)
  y = models.FloatField(blank=False)
  w = models.FloatField(blank=False)
  h = models.FloatField(blank=False)

##views.py
class CropView(generic.edit.FormView):
  template_name = 'app/crop.html'
  form_class = CropForm

  def form_valid(self, form):

    x = form.cleaned_data['x']
    y = form.cleaned_data['y']
    w = form.cleaned_data['w']
    h = form.cleaned_data['h']

    CropSize.objects.create(x=x, y=y, w=w, j=h)

    context = {
    'x':x,
    }

    return render(self.request, 'app/test.html', context)

{% extends 'app/base.html '%}
{% load static%}

{% block javascript %}
<script>
$(document).ready(function() {

  var $image = $('.cropper > img'),replaced;

  $('#img').cropper({
    aspectRatio: 4 / 4,
    minCropBoxWidth: 50,
    minCropBoxHeight: 50,
  
    });
  
  $('#getData').on('click', function(){
  
     var data = $('#img').cropper('getData');
  
     var image = {
       width: Math.round(data.width),
       height: Math.round(data.height),
       x: Math.round(data.x),
       y: Math.round(data.y),
      };
  
      $("#id_x").val(image["x"]);
      $("#id_y").val(image["y"]);
      $("#id_h").val(image["height"]);
      $("#id_w").val(image["width"]);
      $("#getData").submit();
  
  });

});

</script>
{% endblock %}

{% block content %}
    <div id="ww">
        <div class="container">
            <div class="row">
                <div class="col-lg-8 col-lg-offset-2 centered">
                    <h1>画像を切り抜く</h1>
                        <div class="cropper">
                          <img id="img" class="img-responsive" src="{%static 'app/img/imagesearch.jpg'%}" alt="">
                        </div>
                        <form action="" method="POST" enctype='multipart/form-data'>
                          {% csrf_token %}
                          <button id="getData" class="btn btn-outline-primary btn-lg">切り取る</button>
                        </form>
                </div><!-- /col-lg-8 -->
            </div><!-- /row -->
        </div> <!-- /container -->
    </div><!-- /ww -->
{% endblock %}

試したこと

以下、参考サイトです。

・https://simpleisbetterthancomplex.com/tutorial/2017/03/02/how-to-crop-images-in-a-django-application.html
・http://co.bsnws.net/article/50

これらのサイトの情報を参考にしました。
ただJS、JQueryの扱い、Djangoとの連携がわからない状況です。

補足情報（FW/ツールのバージョンなど）

全然違う方法でも良いので、切り取りの座標がわかる方法があれば、
なんでも教えてほしいです！

Answer 1

<input type="hidden" name="x" value="">
<input type="hidden" name="y" value="">
<input type="hidden" name="w" value="">
<input type="hidden" name="h" value="">

HTMLにこんな記載をし、valueに値を挿入したらできました。

Answer 2

<input type="hidden" name="x" value="">
<input type="hidden" name="y" value="">
<input type="hidden" name="w" value="">
<input type="hidden" name="h" value="">

HTMLにこんな記載をし、valueに値を挿入したらできました。