How to submit dropzone js form and django form with one submit button

戏子无情 提交于 2021-01-29 10:31:18

问题


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")

回答1:


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. In order to submit files you need to have

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

in your form.



来源:https://stackoverflow.com/questions/54652835/how-to-submit-dropzone-js-form-and-django-form-with-one-submit-button

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!