jquery - 控制表单的提交行为

Question

我正在尝试在自定义 HTML 页面中使用 Google 文档表单。到目前为止，我已经在线生成了一个表格并提取了 <form>从它的来源部分。

到目前为止它工作完美，除了它将整个页面转移到 Google 的确认页面。

我想实现的是:

1. 不转移到 Google 确认页面，只是显示一些小的通知，表明表单已提交(例如使用 Colorbox)
2. 或者如果不可能，那么至少让确认窗口弹出一个尺寸受控的新窗口

为了解释我的想法

这是原始表单实时页面的链接: original form page

这是提取的表单部分:

<form action="https://docs.google.com/spreadsheet/formResponse?formkey=dG94WjlHTzljMHdMTEZ1ek1SY0c2NVE6MQ&amp;ifq" method="POST" id="ss-form">
    <label class="ss-q-title" for="entry_0">Sample Question 1</label>
    <label class="ss-q-help" for="entry_0"></label>
    <input type="text" name="entry.0.single" value="" class="ss-q-short" id="entry_0"></div></div></div>
    <input type="hidden" name="pageNumber" value="0">
    <input type="hidden" name="backupCache" value="">
    <input type="submit" name="submit" value="Submit">
</form>

有什么方法可以控制提交操作的发生方式吗？

我知道target="_blank"也适用于表单，但我相信必须对单击提交 按钮时发生的情况进行更复杂的控制。

总结

我想在将数据发送到 Google 后端时在 Colorbox 中显示表单的确认，而不显示 Google 前端。有解决这个问题的简单方法吗？

Answer 1

您提到了 Colorbox - 这正是我使用的。

您所要做的就是在实例化 Colorbox 时使用 href 参数打开指向原始表单页面的链接。此外，当您打开外部页面时，您需要使用 iframe 模式。

例子:

$.colorbox({href:"https://docs.google.com/spreadsheet/viewform?formkey=dG94WjlHTzljMHdMTEZ1ek1SY0c2NVE6MQ", iframe:true});

当您提交表单时，您会在 Colorbox 中看到 google 的确认页面，然后用户可以轻松关闭它。如果需要，你应该能够给颜色框一个标题来指导他们。 (使用标题:？？也许？)