提交表单时显示表格答案

【问题标题】：Show table when form is submitted提交表单时显示表格
【发布时间】：2010-08-11 09:22:15
【问题描述】：

我有一个表单，如果没有提交任何内容，那么它不应该显示表格#mytable 仅当表单已提交时才应显示表格#mytable

我该怎么做？

<form action="" id="myform" method="get">
   <strong>Søg på fritekst :</strong>
   <input type="text" name="searchword" id="searchword" value=""/>
   <input type="submit" id="show" value="Søg"/>
</form>


<table width="100%" id="mytable" class="sortable" border="0" cellpadding="2" cellspacing="2" style="border:1px solid #D4D4D4;">
<tr>
<th bgcolor="#313c95" width="100" style="color: #FFF; font-weight:bold; text-align: left;">EAK Kode:</th>
<th bgcolor="#313c95" width="350" style="color: #FFF; font-weight:bold; text-align: left;">Beskrivelse:</th>
<th style="display:none;"></th>
<th style="display:none;"></th>
<th style="display:none;"></th>

</tr>
</table>

【问题讨论】：

标签： javascript jquery html css forms

【解决方案1】：

确保 ID 为 mytable 的表是隐藏的（使用 display: none 或类似的东西），然后使用这个 jQuery：

$('#myform').submit(function() {
  $('#mytable').show();
  return false;
});

请注意，这会阻止处理表单操作（即发布到您的服务器）。

【讨论】：

附带说明，如果您使用的是 .NET 并且提交按钮是回发，这可能会在 IE 中引起问题，因为 __doPostBack 方法会在 jQuery 尝试停止它之后调用提交事件。
是的，但我需要处理表单以进行搜索

【解决方案2】：

您可以使用表单中的 onsubmit 属性来运行 javascript 函数：

<form ... onsubmit="return showTable();">

然后有一个javascript函数

function showTable()
{
    document.getElementById('mytable').style.visibility = 'visible';//shows the table
    return false; //tells the form not to actaully load the action page
}

假设表格最初是隐藏的。

希望有帮助

【讨论】：

【解决方案3】：

您可以使用服务器端语言来检查帖子或获取变量，如果存在，请将表格包含在 html 中。
您还可以使用 javascript 和 cookie 做一些事情。 http://plugins.jquery.com/project/cookie

【讨论】：

【解决方案4】：

最简单的方法是使用您的后端代码。你用的是什么语言？

如果您想在客户端执行此操作，您需要将查询参数添加到您的操作属性，以便在页面重新加载时您可以查看表单是否已发布。

您是如何提交表单的？您想通过表单或 AJAX 发布您的数据吗？请详细说明一下。

..弗雷德里克

【讨论】：

我无法从后端代码中执行此操作 - 我使用 XSLT、HTML、CSS 和 Javascript - 所以它需要是 jQuery 或 XSLT... 是的，应该发布数据，然后您搜索的数据会显示在表格中 - 从一开始就应该隐藏表格的原因是表格包含 500 个可显示的结果...
Okey，然后在 action 属性中添加类似“?posted=true”的内容并在 $(document).ready 检查 document.location.hash 以获取适当的查询参数。

【解决方案5】：

首先，将"display:none" 分配到您的表中，就像下面的编码一样。

<form action="" id="myform" method="get">
    <strong>
        Søg på fritekst : 
    </strong>
    <input type="text" name="searchword" id="searchword" value=""/>
    <input type="submit" id="show" value="Søg"/>
</form>
<table width="100%" id="mytable" class="sortable" border="0" cellpadding="2" cellspacing="2" style="border:1px solid #D4D4D4; display:none;">
    <tr>
        <th bgcolor="#313c95" width="100" style="color: #FFF; font-weight:bold; text-align: left;">
            EAK Kode: 
        </th>
        <th bgcolor="#313c95" width="350" style="color: #FFF; font-weight:bold; text-align: left;">
            Beskrivelse: 
        </th>
        <th style="display:none;">
        </th>
        <th style="display:none;">
        </th>
        <th style="display:none;">
        </th>
    </tr>
</table>

提交后，像下面的编码一样。

function showTable()
{
    document.getElementById('mytable').style.display = "inline"
}

【讨论】：

我还需要检查表单是否提交？
关于您的问题，它是“是”。还需要检查。

【解决方案6】：

所以您希望在正常提交后无需在服务器上执行任何操作即可更改您的页面？我不认为你可以（如果你正在做一个正常的帖子）。

正常的帖子会导致导航，因此您将丢失当前的客户端状态。我认为，这使得这里的大多数建议都不正确。因此，您必须在页面加载时在客户端执行此操作。此时，您需要知道它是由于发布而加载的，还是由于正常的第一轮获取而加载的。我认为如果不在后端放一些东西，你就无法做到这一点。

当然，您可以通过 ajax 进行提交。这不会导致导航，然后您可以只在客户端显示表格。使用 display:none 设置其样式来渲染表格，然后使用 jQuery('#myTable').show();

【讨论】：