使用javascript在内容标签内加载表单提交？

Question

我希望在一个模板 (register.html) 中将下面列出的表单的结果加载到单独的 html 文件 (index.html) 中的内容标记中。目标是让表单提交加载到 index.html 的中心。但是现在，它正在加载一个单独的页面，从而将用户从 index.html 中重定向。任何精通javascript的人都可以提供解决方案吗？非常感谢！

要在 index.html 中加载内容的位置：

<content class="loadContent">
</content>

register.html 表单：

<div class="registration_form">
    {% block content %}
     <form name="registerform" id="registerform" action="/register_temp/" method="post">{% csrf_token %}

        <ul style="position:relative; top:20px;">
        <li id="username_registration"><p>Username:</p>{{ form.username }}</li> 
        <li id="email_registration" class=""><p>Email:</p>{{ form.email}}</li>
        <li id="password1_registration" class=""><p>Password:</p>{{ form.password1 }}</li>
        <li id="password2_registration" class=""><p>Password confirmation:</p
        {{ form.password2 }}</li>
        </ul>

        <input name="registerform" id="registerform" class="registration_button" type="submit" value="Register" style="position:relative; left:55px;" onclick="userform();" />

        </form>
     {% endblock %}
 </div>

register.html 中的 javascript：

<script>

    function userform() {
    document.getElementById('registerform').submit();
    }


</script>

我已经能够使用此代码在索引中心加载其他链接（但还没有找到表单提交结果的解决方案）：（注意：“飞溅”是脚本中引用的是包含 register.html 正文中所有内容的 div id。

<script>

$(function(){

    $('').on('click', function( e ){   
    });

    var wrap = $('content');

    $('#splash a').on('click', function( e ) {
        var href = $(this).attr('href');
        wrap.load( href + '' )
        .hide().delay(100).fadeIn(500);
        e.preventDefault();
    });


});
</script>

Answer 1

据我所知：

• 有一个错字（您有一个未完全关闭的 p 标签，在 password2 字段之后）。它可能会给表单的其余部分带来问题。
• 您有 2 个标签具有相同的 id，“registerform”。所以你的 document.getElementById('registerform') 可能无法正常工作。

除此之外，我不明白这应该如何工作。您正在将表单提交到另一个页面 (/register_temp/)，因此当前页面更改似乎是合乎逻辑的。

也许我没有得到您想要做的事情，但据我了解，您不想以 html 方式提交表单，而是想使用 Ajax 来完成。

布莱斯