jquery 有没有一种方法可以使用htmx和django一键提交这个嵌套的表单

c8ib6hqw 于 2023-08-04 发布在 jQuery

关注(0)|答案(1)|浏览(104)

因此，我有一个网页，其中包含许多嵌套的形式，我可以通过点击一个按钮动态添加许多形式，这个形式是从其他HTML模板导入到主网页，也可以在其中复制许多形式，但我需要的是，以确保每一个形式将正确提交！
将包含HTML页的主HTML页：

<form method="POST">
{% csrf_token %}
<div>
    <div>
        <h2>
            Create sessions for {{ course.name }}
        </h2>
    </div>
    <div>
        <button type="button" hx-get="{% url 'create-session-form' %}" hx-target="#sessionforms" hx-swap="beforeend">
            Add Session
        </button>
    </div>
</div>

<div id="sessionforms">

</div>
<button type="submit" action="{% url 'submit-all' %}">
Submit the full form from here!
</button>
</form>

字符串
session_form HTML页面示例：

<form method="POST">
        {% csrf_token %}
        {{ form|crispy }}

        <div class="mt-5 py-5 border-t border-gray-100">
            {% for assignment in assignments %}
        
            {% include "partials/assignment_detail.html" %}
        
            {% endfor %}
        </div>
        <button type="button" hx-get="{% url 'create-assignment-form' %}" hx-target="this" hx-swap="beforebegin">
        Add assignments for this session
        </button>
        <button type="button" hx-get="{% url 'create-learningoutcome-form' %}" hx-target="this" hx-swap="beforebegin">
        Add learning outcomes
        </button>

        {% if session %}
        <button type="submit" hx-post="{% url 'update-session' session.id %}">
            Submit
        </button>

        {% else %}
        <button type="submit" hx-post=".">
            Submit
        </button>
        {% endif %}
    </form>

型
当然，结果HTML页面示例：

<div hx-target="this" hx-swap="outerHTML">
    <form method="POST">
        <table class="table table-auto">

            <tbody>
                    <tr>
                        {% for item in form.visible_fields %}
                            <td class="col-md-4" >{{item}}</td>
                        {% endfor %}
                    </tr>
            </tbody>

        </table>
        {% if learningoutcome %}
        <button type="submit" hx-post="{% url 'update-learningoutcome' learningoutcome.id %}">
            Submit
        </button>
        <button hx-get="{% url 'detail-learningoutcome' learningoutcome.id %}" type="button">
            Cancel
        </button>
        {% else %}
        <button type="submit" hx-post=".">
            Submit
        </button>
        {% endif %}
    </form>

型
视图功能很简单，但是否有任何建议添加所有视图功能？或任何其他解决方案，只需单击全部添加按钮
我尝试过使用jquery，但它并不那么简单，特别是我没有指定每一个表单，并给予它一个唯一的名称或id或类！
我想删除其他特定的提交，只使用一个！

jquery

来源：https://stackoverflow.com/questions/75636888/is-there-a-way-to-make-this-nested-forms-been-submitted-with-one-click-using-htm

1条答案

按热度按时间

pcrecxhr1#

我能够通过使用JavaScript函数来解决这个问题，就像@vinkomlacic在评论中建议的那样，通过给每个表单一个类名，然后异步提交数据，这里有一个在每个表单上循环的例子

const submitButton = document.querySelector('#submit-all-forms');
    
        submitButton.addEventListener('click', async (event) => {
        event.preventDefault();

        const waitPanel = document.querySelector('#wait-panel');
        waitPanel.style.display = 'block';

        const forms = document.querySelectorAll('.submit-me');
    
        // loop through each form and submit it
        for (let i = 0; i < forms.length; i++) {
          const form = forms[i];
    
          try {
            await submitForm(form);
          } catch (error) {
            console.error(error);
          }
        }
        window.location.href = '/create-object/';
      });
    
      async function submitForm(form) {
        const formData = new FormData(form);
    
        // send the form data to the server
        const response = await fetch(form.action, {
          method: 'POST',
          body: formData,
        });
    
        // throw an error if the response is not OK
        if (!response.ok) {
          throw new Error(response.statusText);
        }
      }

字符串

赞(0）回复(0）举报 2023-08-04

我来回答

jquery 有没有一种方法可以使用htmx和django一键提交这个嵌套的表单

1条答案

相关问题

热门标签

最新问答