使用jQuery將值傳遞給隱藏的輸入

Question

我有一堆ID為1-n的鏈接，我希望將該ID傳遞給我表單中的隱藏輸入（我有很多鏈接，但是只想要一個表單而不是生成數千個額外的HTML行來制作一個表單每個ID）。

鏈接如下所示：

<a href='javascript:$("#removeSave").submit()' id="n">Remove</a>

隱藏輸入的表單如下所示：

<form action="/php/removeSave.php" method="POST" id="removeSave">
    <input type="hidden" name="ID" value=""/>
</form>

有幫助嗎？

Answer 1

這會在提交form之前將帶有id ID的隱藏input的值設置為a元素的id 。

<a href='#' id='n' onclick='$("#ID").val(this.id);$("#removeSave").submit();'>Remove</a>


<form action="/php/removeSave.php" method="POST" id="removeSave">
    <input type="hidden" name="ID" id="ID" value=""/>
</form>

Answer 2

您尚未提供“刪除”鏈接的完整上下文，其中將標記ID，因此我將假設一種格式，您可以從那里進行調整。

<!-- HTML //-->

<!-- Format for Each Element. "123" is the ID here //-->
<div id="element123">
  This is Element 123 (ID#123)
  <a href="/php/removeSave.php?ID=123">Remove</a>
</div>

<!-- The Form at the Bottom of the Page //-->
<form id="removeSave" method="POST" action="/php/removeSave.php">
  <input type="hidden" name="ID" value="" />
</form>

jQuery段

<script type="text/javascript">
$(document).ready(function(){

 // Clicks of Links starting with "/php/removeSave.php?ID="
  $('a[href^="/php/removeSave.php?ID="]').click(function(e){
   // Don't let the Link act as a basic link
    e.preventDefault();
   // Get the Link HREF attribute
    href = $(this).attr('href');
   // Derive the Form ID and ID Value
    bits = href.match(/^\/php\/([^\.]+)\.php\?ID=(\d+)/);
    formID = bits[1];
    elementID = bits[2];
   // Set the Field Values and Submit the Form
    $form = $('#'+formID);
    $form.find('input[name="ID"]').val(elementID);
    $form.submit();
  });

});
</script>

這種方法的好處？

優雅降級 - 只要您的PHP腳本也可以處理GET變量，如果此頁面是從沒有啟用Javascruipt的瀏覽器加載的，或者無法加載jQuery，則單擊“刪除”鏈接仍將執行預期的操作。

AJAX -ification的機會 - 而不是.click中的所有其他操作.click(function(e){部分，您可以使用jQuery的$.post()函數和鏈接的HREF的查詢字符串段將此請求直接傳遞給處理和操縱頁面而不必進行整頁重新加載。