根据 onclick/onchange 函数保存表单值

Question

我有一个表单，可以保存用户在使用 php 提交时输入的值。 某些字段在 div 中是 display:hidden，直到 onclick 或 onchange 函数将 div 更改为显示。

提交表单后，如何仅显示包含已保存值的字段的 div？我已将值保存在始终可见的字段中，但无法触发它们的功能。

我使用的 jquery 很少，因为我对语法不熟悉，并且更愿意实现我可以理解和适应的解决方案。如果简单的 jquery 是更好/更快/更简单的解决方案，它是可以接受的。

谢谢

代码示例：

<input type="radio" id="customer" name="jobtype" value="customer" onclick="getJobType()" autofocus>Customer
<input type="radio" id="store" name="jobtype" value="store" onclick="getJobType()">Store
<span id="customerjobs" style="display:none">
    <select id="customer" name="customer" onchange="createJobsList(this.value)">
    *various options*
    </select>

    <span id="jobslist"><br></span>
</span>

第一个跨度 (id=customerjobs) 最初是隐藏的。在从收音机中选择时，除了相应的跨度之外的所有设置都设置为 display:none，并且选定的设置为 display:block。提交时，选择的单选会被保存，但不会调用 onclick 来显示跨度。

第二个 span (id=jobslist) 内容由 innerHTML 填充，该内容在进行选择时使用对 PHP 的 ajax 调用的结果。提交时，选择的选项会被保存，但不会调用 onchange 来填充跨度。

所以我需要触发已保存单选值的 onclick 以显示我的内容并触发已保存选择的 onchange 以填充其他内容。

注意：我最初使用 onblur 和 javascript 来设置焦点，因此任何操作都会触发内容，但它会导致填写我不想要的表单时出现不必要的暂停。

1. 页面加载时只有一个单选选项。
   
2. 用户单击单选按钮。
   
3. Onclick 函数将 span id=customerjobs 的样式更改为 display:block。
   
4. 现在可以看到跨度内的选择输入。用户选择一个选项。
   
5. Onchange 函数进行 ajax 调用以请求来自服务器的信息，该信息位于 span id=jobslist 中。
   
6. 用户将表​​单提交到同一页面。
   
7. 表单会保存输入的值，因此在重新加载页面时仍会选择它们。
   
8. Onclick 和 onchange 函数不会由 PHP 保存的值触发，因此步骤 3 和 5 永远不会发生。除非再次单击，否则页面只剩下单选按钮。
   

好吧，我有一个 jsfiddle 来说明我使用默认选择的问题，因为我不能使用 PHP 来保存输入的值。
想象一下刚刚提交的表单，保存的值是选中的单选按钮（客户）和从下拉列表中选择的选项（1），其中添加了“客户”一词。
理想情况下，整个表单仍然可见（选定的收音机、选定的选项和添加到最后一个跨度“客户”的内容）。
相反，只有选定的单选是可见的，除非再次单击它以取消隐藏选择下拉菜单。下拉列表也保留其值，但最后一个跨度中的内容只会出现在更改中。

http://jsfiddle.net/L5H2u/31/

尝试一下并提前感谢任何建议。

Answer 1

您能否通过调用 getJobtype() 将检查单选按钮并模拟点击的函数挂钩到 onload？这将得到单选按钮已经是用户想要的方式的初始情况。进一步的点击将按您的计划进行。

编辑添加：如果我理解你的话，第一次加载页面时一切都很好，因为用户必须点击某些东西并运行你的 getJobType() 函数。然而，当页面重新加载时，正确的单选按钮已经被选中，用户不会改变任何东西，你的函数也不会运行。如果这是正确的，从 onload 运行 getJobType() 应该可以解决它。

您可能需要<input type="hidden" id="firstrun" value="true"> 之类的东西，PHP 会在随后的页面加载时将其设置为false，并且 onload 函数只会在“firstrun”为假时才会发生。编辑：您不需要这个，因为 getJobType() 没有默认操作；继续阅读。

编辑更多：您在客户单选按钮上有checked="checked'，因此如果用户是客户，即使最初的运行也不会显示隐藏的材料。

在页面初始加载时删除 checked="checked"，以便在初始演示时，两个按钮都不会被选中。* 然后将 window.onload=getJobType; 添加到 JavaScript 的末尾。

在初始加载时，getJobType() 不会执行任何操作，因为它会检查两个按钮并且没有默认操作。单击按钮时，getJobType() 将运行并根据单击的按钮执行操作。

当页面随后加载时，其中一个按钮将被选中，当onload 运行 getJobType() 时，它将执行相应的操作。

在第二次（及后续）加载表单时，服务器端 PHP 保留和“反映”的单选按钮、SELECT 值和任何其他表单元素将是正确的。您需要onload JavaScript 函数的地方是当这些值之一也 更改其他内容时，例如使隐藏的 DIV 可见。如果有除 getJobType() 之外的函数来操作 DOM，编写一个 init 函数根据 PHP 进程保存的表单元素的值设置 DOM 可能会更简洁。

* 我通常提倡默认选中 some 按钮，以便用户始终可以回到初始状态。这个案例似乎是个例外。