我可以传递一个值并从同一个超链接提交表单吗?

我正在尝试创建一个链接列表，这些链接将构成表单的元素(将用作搜索功能(。

基本上，列表中的每个链接代表一个搜索类别，因此当用户单击链接时，他们的搜索结果将被过滤。

每当有人单击其中一个类别链接时，我都需要一个类别值才能传递，并且每个链接也充当表单提交。这可能吗？

(可能有更简单的方法来实现这一点，但是对于我正在使用的CMS和搜索模块，这将必须完成。

您是否正在尝试通过 POST 和 GET 传递值？我不确定这是否可行。为什么不只使用隐藏的表单字段？在表单中，添加多个<input type="hidden" name="foo" value="bar">，每个都将与所有常规表单字段一起传递回服务器。

注意：隐藏的表单字段可以由足够精通技术的用户读取和编辑(这不太难(，但是您在服务器和客户端之间传递的任何变量都是这种情况，甚至是cookie。

如果您为链接提供内部data-category属性，如下所示：

<a href="#" data-category="foo">Foo</a>

然后你可以用jQuery来做：

$('a[data-category]').click(function() {
    filterResults($(this).data('category')); // call the function that filters
                                             // results according to chosen
                                             // category
    $('#theform').submit();
}

你可以做一些类似的事情...

<a href="#" class="category">Puma</a>

并使用类似...

$('a.category').click(function(e) { 
  $('#someForm input[name=category]').val( $(this).text() ); 
  $('#someForm').submit(); 
});`

我不是 100% 确定您打算如何处理链接中的数据，甚至不是您需要其中的哪一部分，但我希望这有所帮助。

<form name="myForm">
 <a href="#" onClick="submitMyForm(this);">link</a>
</form>
<script>
 function submitMyForm(link){
   var mylinkText = link.text;
   var myLinkHref = link.href;
   document.myForm.submit();
 }
</script>

如果您需要单击的链接作为表单数据的一部分出现，也许您可以将其放在表单上的隐藏字段中......像这样：

document.myForm.myHiddenLinkField.value = mylinkText;

由于 jQuery 标签已被删除，下面是使用纯 javascript 执行此表单提交的示例：

http://www.neubreed.com.au/blog/2010/07/submit_form_anchor_tag_using_javascript_and_supply_action

您可以创建一个额外的隐藏输入，如示例中所示来设置类别：

function submitForm(id, category){
  var myform = document.getElementById(id);
  if (document.createElement) {
    input = document.createElement('input');
    input.type = 'hidden';
    input.name = 'category';
    input.value = category;
    myform.appendChild(input);
  }
  myform.submit();
  return false;
}

然后，在您的表单中：

<a href="somewhere" onclick="submitForm('formid', document.getElementById('category').value);">click</a>

您可以使用隐藏字段。

<form id="cuteform" action="thedestiny.php">
    <input type="hidden" id="filter"/>
</form>
<a onclick="javascript:linkaction(this);" id="linkA">blablabla</a>
<a onclick="javascript:linkaction(this);" id="linkB">blablabla</a>
<script>
function linkaction(link) {
    // get the field
    var f = document.getElementById("filter");
    // then you could use some of the link element's property like id or innerHTML
    f.value = link.id;
    // or you could use a switch structure
    switch (link.id) {
        case "linkA": f.value = "the huge filter string"; break;
        case "linkB": f.value = "another stuff"; break;
    }
    // submit the form
    document.getElementById("cuteform").submit();
}
</script>

我倾向于使用CSS将实际的表单按钮样式设置为链接。

所以基本上对于每个"链接"：

<form method="get">
    <input type="submit" class="form-link">
</form>

对于CSS(在我的头顶上(，这样的事情应该这样做：

.form-link {
    background-color: transparent;
    border: none;
    text-decoration: underline;
    color: #00f;
}

这样它就不依赖于JavaScript来工作，没有它的用户仍然可以使用您的网站。此外，不应使用内联事件处理程序(onclick(等，因为它们将语义与行为混合在一起。如果功能不是体验的核心(因此可能不需要基本的非JavaScript版本(，那么将链接从外部JavaScript include写入使用JavaScript的页面。然后，对于在禁用JavaScript或从不支持JavaScript的设备访问您的网站的用户，您将不会在页面中出现一堆死链接。

相关内容

最新更新

热门标签：