我可以通过同一个超链接传递值并提交表单吗？

Question

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

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

我需要一个类别值，以便每当有人单击其中一个类别链接时都可以传递该类别值，并且还要使每个链接也作为表单提交。 那可能吗？

（可能有更简单的方法可以完成此操作，但是，使用我使用的CMS和搜索模块，则必须这样做。）

Answer 1

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

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

Answer 2

如果为链接提供内部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();
}

Answer 3

您可以按照以下方式进行操作：

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

并使用类似...的脚本

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

Answer 4

我不确定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;

Answer 5

由于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> 

Answer 6

您可以使用隐藏字段。

<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>

Answer 7

我倾向于使用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的设备访问您的网站的用户，页面上将不会出现一堆无效链接。