我可以通過同一個超鏈接傳遞值並提交表單嗎？

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的設備訪問您的網站的用戶，頁面上將不會出現一堆無效鏈接。