如何使用一个提交按钮提交dropzone js表单和Django表单 [英] How to submit dropzone js form and django form with one submit button

问题描述

我正在使用dropzone js制作一个表单，用户可以在其中沿着侧面图像上传信息.Dropzone js要求dropzone具有一个带有dropzone类的表单，以便拖放图像上载才能正常工作，现在这给我留下了两种形式.第一个是普通输入形式，第二个是dropzone js形式.我的问题是如何使用一个提交按钮同时提交dropzone js表单和普通输入表单.请注意，我使用的是html表单，而不是django脆皮表单.

I am using dropzone js to make a form where users can upload information along side images. Dropzone js requires that dropzone has a form with a class of dropzone for the drag and drop image uploads to work, this now leaves me with two forms. The first is the normal input form and the second is the dropzone js form. My question is how can I submit both the dropzone js form and the normal input form with one submit button. Please note I am using html forms, not django crispy forms.

 <form method="POST" enctype="multipart/form-data" id="inputform" name="form1">
       {% csrf_token %}
       <button type="submit" id="add">Save</button>
  </form>
  <div class="col-sm-12 col-lg-6" id="inner">
    <form method="POST" enctype="multipart/form-data" id="inputform" name="form1">
    {% csrf_token %}
    <h4>Title</h4>
    <input type="text" name="product_title" id="product_title" placeholder="Give your product a name">
    <h4>Price</h4>
    <input type="text" name="product_price" id="product_price" placeholder="0.00">
    <h4>Description</h4>
    <input type="text" name="product_description" id="product_description" placeholder="Write a description about your product">
    </form>
  </div>
  <div class="col-sm-12 col-lg-6" id="inner2">
      <h3>Images</h3>
      <form method="POST"  action="#" class="dropzone col-sm-8 col-lg-8" id="dropzone" name="form2">
        {% csrf_token %}
      </form>
  </div>



def add(request):
if request.method == "POST":
    title = request.POST.get("product_title")
    price = request.POST.get("product_price")
    description = request.POST.get("product_description")
    print(title,price,description)
return render(request,"main/add.html")

推荐答案

对于dropzone，您不需要单独的表单.使用第一种形式，并为其指定类名称dropzone.

You don't need separate form for dropzone. Use first form and give it class name dropzone.

 <form method="POST" enctype="multipart/form-data" id="inputform" name="form1" class="dropzone">
   {% csrf_token %}
    <h4>Title</h4>
    <input type="text" name="product_title" id="product_title" placeholder="Give your product a name">
    <h4>Price</h4>
    <input type="text" name="product_price" id="product_price" placeholder="0.00">
    <h4>Description</h4>
    <input type="text" name="product_description" id="product_description" placeholder="Write a description about your product">
    <button type="submit" id="add">Save</button>
  </form>

PS.为了提交文件，您需要拥有

PS. In order to submit files you need to have

<input type="file" name="file" />

以您的形式.

这篇关于如何使用一个提交按钮提交dropzone js表单和Django表单的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！