无法通过django中的javascript提交带有锚标记的表单[重复]

Question

我正在尝试使用 javascript 提交我的表单，但它发送给我

GET

在后端。虽然我希望收到

POST

请求

html 文件

<form id="my_form" method="post">
    {% csrf_token %}
    {{form.as_p}}
    <input type="number" name="conf" >
    <a onclick="document.getElementById('my_form').submit();" href="{% url 'signup' 0 %}">ارسال کد</a>
    <br><br>
    <button type="submit">ثبت نام</button>
</form>

控制台日志

 "GET /signup/0 HTTP/1.1" 200 1531

我期望的输出

"POST /signup/0 HTTP/1.1" 200 

Answer 1

我相信您的问题是以下几行

<a onclick="document.getElementById('my_form').submit();" href="{% url 'signup' 0 %}">Send Code</a>

因为它是一个链接，所以浏览器将处理它的点击。您需要将

return false;

添加到点击处理程序中以停止浏览器跟随链接，或者添加

event.preventDefault()

。

也许值得一提的是，

href

属性此时不会执行任何操作。除了使

<a>

成为真正的链接、可聚焦且可以激活之外。

<a onclick="document.getElementById('my_form').submit(); return false;" href="{% url 'signup' 0 %}">Send Code</a>

从同一个表单采取不同的操作

但无论如何，按钮会更合适，因为您也在提交表单。

您的

href

属性和链接文本让您看起来似乎仍想提交表单，但在单击“发送代码”时采取不同的操作。为此，HTML 建议使用多个具有不同名称的提交按钮，以便在服务器上进行区分。

或者您可以将

formaction

属性 添加到按钮以将表单发送到不同的 URL。

<form id="my_form" method="post">
    {% csrf_token %}
    {{form.as_p}}
    <label for="conf">Code</label>
    <input type="text" id="conf" name="conf" inputmode="numeric" pattern="\d+">
    <button type="submit" name="send_code">Send Code</button>
OR
    <button type="submit" formaction="{% url 'signup' 0 %}">Send Code</button>
    <br><br>
    <button type="submit" name="submit">Login</button>
</form>

另请注意，我在代码字段中添加了一个标签，因为每个输入都需要一个标签。我更改了代码的输入类型，因为

type="number"

不是代码的正确输入类型。以下内容将确保优化屏幕键盘以输入数字并提供一些提示以提高可用性。

<label for="conf">Code</label>
<input type="text" id="conf" name="conf" inputmode="numeric" pattern="\d+" size="6" placeholder="123456">

Answer 2

您可以对标签 A 上的点击属性使用函数

Answer 3

因为首先单击标签，您会执行标签中的 href 的默认操作。如果您不添加

preventDefault()

，则默认操作后 onclick 将不会触发

如果您想将表单发送到您的注册网址，您需要将其添加到表单标签中：

<form id="my_form" method="post" action="{% url 'signup' 0 %}">
{% csrf_token %}
{{form.as_p}}
<input type="number" name="conf" >

<br><br>
<button type="submit">ثبت نام</button>