自動填充表單中的字段

Question

我有一個頁面，上面有 30 張照片。 單擊照片時，它會打開一個表單。 表單中的第一個字段是“照片名稱”。

如何自動讓該特定照片的名稱填充第一個字段？ 其余照片依此類推。

更新：

照片的名稱將是文件名。 例如，對於“28252896.png”，它看起來像這樣：

<div class="lbm-column width-33">
    <p>
        <img src="Images/Screenshots/Tennis/28252896.png" width="300" height="199" class="scalable" alt="">
    </p>
</div>

Answer 1

一種方法是為您的鏈接提供一個 url 參數。

例如：

<div class="lbm-column width-33">
  <p><a target="new" href="form2.html?name=10205157_m.png"><img src="Images/Screenshots/Golf/10205157_m.png" width="300" height="200" class="scalable" alt=""></a></p>
</div>

它與您的頁面上的相同，除了 href 末尾的?name=10205157_m.png 。

您在目標頁面上的表單可能看起來有點像這樣：

<form class="" action="#" method="post">
  <label>Photo name <input id="photoName" type="text" name="..." value=""></label>
  ...
</form>

然后有一些 JavaScript（來自這個頁面的函數）

<script type="text/javascript">
var photoNameField = document.getElementById('photoName');
var photoName = GetURLParameter("name");
if (photoName){
  photoNameField.value = photoName;
}

function GetURLParameter(sParam)
{
  var sPageURL = window.location.search.substring(1);
  var sURLVariables = sPageURL.split('&');
  for (var i = 0; i < sURLVariables.length; i++)
  {
    var sParameterName = sURLVariables[i].split('=');
    if (sParameterName[0] == sParam){
      return sParameterName[1];
    }
  }
}
</script>

這從 url 獲取name參數的值並更改輸入字段的值以匹配。