在提交表单之前多次使用表单

Multiple use of a form before it is submitted

本文关键字：表单 提交      更新时间：2023-09-26

我是 JavaScript 的新手，并试图找出执行以下操作的规范方法。

我有一个带有一些复选框和选择器的表单。假设复选框是音乐风格，选择器是人名。

我希望用户能够为多个人选择音乐风格，然后提交包含所有数据的表单。

例如，用户可能首先选中"古典"、"爵士"、"摇滚"和"流行"并选择"Joe"，然后选择"爵士"、"流行"、"乡村和电子"并选择"Jane"。因此，"提交人员"和"提交表单"必须有两个不同的按钮。

我想：

  1. 在表单下方填充名称及其所选样式的列表，以获取反馈
  2. 允许用户随心所欲地使用表单，然后在最后提交所有数据

我觉得使用 jquery 和 JSON 是完美的，但我不确定使用什么搜索术语来弄清楚如何做到这一点。

如果很重要，表单将由Python中的Django视图处理。

您可以通过对提交人员使用 AJAX 来实现此目的。您的工作流程应如下所示：

  1. 用户选择乔和相应的音乐风格。
  2. 用户点击"提交人员"。在此事件中，将人名 （Joe） 和所选音乐风格编码到 JSON 对象中，并通过 AJAX （jquery ajax()） 请求将其传递给后端脚本。
  3. 服务器端脚本执行所需的任何处理。完成后，将调用 AJAX 调用的成功处理程序。此时，您可以删除"Joe"，以便用户知道提交成功并且不会再次为 Joe 提交。
  4. 清洗，冲洗，对表单中的所有其他人重复。

PS - 当您通过 AJAX 将信息传递到后端时，您不必将其编码为 JSON。您可以将其作为标准 POST 请求发送。要将 Javascript 对象编码为 JSON，请使用 JSON.stringify()

以上是这样做的一种方法，但是它不会像您在问题中询问的那样工作（继续收集数据 - 立即提交），要以这种方式工作，每次用户点击"提交人员"时，将数据添加到 Javascript 对象，但不提交它。提交的数据将继续在JS对象中建立。

最后，当用户点击"提交表单"时，将数据串起来并提交。

如何使用 django form-wizard..够吗？https://docs.djangoproject.com/en/dev/ref/contrib/formtools/form-wizard/

相关文章：