从按钮预填充 HTML 表单

Question

我希望这个问题对于任何了解 JS 和 HTML 的人来说都有一个明显的答案:)

我有一个非常具体的问题。我正在尝试添加到网站按钮的标题中，该按钮的功能类似于“快速搜索”，基本上单击后会将预填充的表单值发送到我的搜索页面，并且搜索页面也会在 ajax 表单中填充这些值。

以下是结果页面之外的示例搜索页面： http://www.thediamondsexperts.com/index.php?route=product /diamondsearch/jewelry

您会注意到，当您更改此处的值并单击“搜索”时，这些值也会以 ajax 形式显示在搜索结果页面的侧边栏上。

我只想做的是为预设搜索创建不同的变体，并将它们作为按钮放在标题中。

当我尝试放入一些不可见的表单时，它不会工作，因为多个表单值具有相同的 id，但总的来说，我认为必须有一种简单的方法来执行此服务器端操作。

例如，复制接受搜索的当前函数，为其添加预设值，而不是从表单填充值，然后简单地调用该函数 onClick。这有道理吗？

我需要创建一些足够简单的东西，尽管管理员以后可以轻松更改和自定义更多按钮，因此客户端解决方案将是最好的。

非常感谢您的帮助！

Answer 1

您所需要的只是一个带有隐藏输入和提交按钮的表单：

<form>
<input type="hidden" name="param1" value="Predefined value 1" />
<input type="hidden" name="param2" value="Predefined value 2" />
<input type="hidden" name="param3" value="Predefined value 3" />
<button type="submit">Search!</button>
</form>

这只会显示按钮，但值仍会发送到表单的操作。

...必须有一个简单的方法来做到这一点
服务器端

...客户端解决方案是最好的

...复制当前接受的函数
搜索，有预设
值而不是填充
从表单中获取值，然后简单地
调用该函数 onClick。做
这有道理吗？

不是真的，至少对我来说不是。如果您能澄清，我很乐意提供更多帮助。

当您说“具有相同 id 的多个表单值”时，我担心您可能会感到困惑：表单输入不需要有“id”，我认为您的意思是“名称”，并且不需要有多个表单中具有相同名称的输入，除非您想要 发送值数组。

我不想过多谈论 ajax 在该网站上的工作原理，因为那完全是另一回事，而您似乎关心的只是预设的搜索按钮。希望这可以帮助你解决这个问题，GL。

编辑：我很难弄清楚您真正要问的是什么，如果您尝试复制该网站上的行为，请告诉我们您可以使用哪种服务器端语言，如果您正在使用或愿意使用任何 javascript 库，以及到目前为止您已经尝试过的内容。完整的勺子喂养教程确实超出了范围，如果您分享当前尝试的代码，您将获得更好、更清晰的帮助。

Answer 2

如果您想将值从一个页面传递到另一个页面并在客户端处理它，请使用“get”作为表单提交方法，并使用方便的“gup()”函数来获取参数值。您可以在此处获取有关 gup() 的更多信息：

function gup( name )
{
  name = name.replace(/[\[]/,"\\\[").replace(/[\]]/,"\\\]");
  var regexS = "[\\?&]"+name+"=([^&#]*)";
  var regex = new RegExp( regexS );
  var results = regex.exec( window.location.href );
  if( results == null )
    return "";
  else
    return results[1];
}

在初始页面上，您可以使用输入使用 type="hidden" 或仅从可见输入中获取值（如示例页面上所示）。然后提交到您的结果页面。给定一个带有类似内容的初始页面...

<form method="get" action="results.html">
  <input type="text" name="caratFrom" value="0.7" />
  <input type="submit"/>
</form>

...这是结果页面的示例用法：

var caratFrom = gup('caratFrom');
// etc.

然后只需将这些值分配给您想要的任何元素，例如输入：

<!-- HTML -->
  <input type="text" name="caratFromResult" value="" />

// Javascript
  document.getElementById('caratFromResult').value = caratFrom;