Question

我正在建立一个表格。我希望在提交表单后保持输入值可见。我在网上遵循了一些说明来使用showMessage（）函数，但是，它对我不起作用。

<form id = "form1" action="." method="POST">{% csrf_token %}      
  <div class=".col1" style="float:left;vertical-align: middle;">            
    {{ form.region }}
    {{ form.operator }}
  </div>
  <div id = "form1_value" class="col-xs-2 style="vertical-align: middle;">
    {{ form.value }}
  </div>    
</form>
<div>
  <input type="button" class = "btn" value="Run" onclick="SubmitForm1(), showMessage()"/>
</div>

Answer 1

您的onclick函数应该读取SubmitForm1()，它应该发出一个AJAX请求，使用jQuery 大大简化：

$.ajax({
    method: "POST",
    url: ".", // from the action attribute of your <form>
    data: {
        key1: value1,
        key2: value2
    },
    success: function(data, textStatus, jqXHR) {
        // event handler for when submission is complete
    }
}

代码改编自here。

这不会重新加载页面或加载新页面。您可能希望将disabled = true设置为按钮上<input type="button"...的属性，以防止重新点击表单提交按钮。

编辑：请注意，这个答案是在OP注意到Django是该项目的后端之前编写的，但是留在这里是为了让将来有人问一个类似的问题。

Answer 2

当然，在我之前输入更长的答案之后，我才意识到你只想使用javascript或jquery来解决这个问题。在这种情况下，您可以在HTML页面中创建表单（不是使用Django表单，它取决于表单的复杂程度），您可以使用短脚本函数来显示表单的输入数据。

因此，HTML看起来像这样：

<script language="JavaScript">
  function showInput() {
      document.getElementById('display').innerHTML =
                  document.getElementById("user_input").value;
  }
</script>

<div class="">
  <form method:"post">
  {% csrf_token %}
    <label><b>Enter a Message</b></label>
    <input type="text" name="message" id="user_input">
  </form>

  <input type="submit" onclick="showInput();"><br/>
  <label>Your input: </label>
  <p><span id='display'></span></p>
</div>

这个javascript解决方案已经被另一个用户here给了另一个类似的问题。我只是想重复它并提及即使你使用Django作为后端你也可以使用相同的东西。在Django views.py中，您还可以使用视图函数处理/保存此表单中提交的对象/数据。

如果你想使用Django创建的表单，那么你也可以通过HTML字段的id识别你想要在提交后显示的所有字段。 Django为字段创建id：“id_message”，具体取决于字段名称。您也可以在它们上使用getElementById，并可以使用上面的函数。

提交表单后如何显示输入框的消息？

2 个答案: