自动填充表单中的字段

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参数的值并更改输入字段的值以匹配。