填充隐藏的表单输入 onClick答案

【问题标题】：Populate hidden form inputs onClick填充隐藏的表单输入 onClick
【发布时间】：2012-01-12 01:50:27
【问题描述】：

我有一个我生成的地址和其他值的列表，并且我在每一行旁边都包含了一个链接（见下图）：

我需要能够单击一行旁边的“安排此清洁”链接，并让它将该特定信息发送到页面下方的一些隐藏输入字段，而无需重新加载页面。我需要使用单个 onClick 事件为多个输入填充各种数据。

我已经在使用 jQuery，因此也欢迎任何特定于 jQuery 的解决方案。

任何帮助将不胜感激。谢谢！

【问题讨论】：

标签： javascript jquery jquery-events

【解决方案1】：

即使没有 JQuery，它也很简单：

<input ... onclick="return myFunction();">

function myFunction(){
  document.getElementById("myHiddenInput").value = "some value that i want to have";
 return true; //if you want to proceed with the submission or whatever your button does, otherwise return false
}

【讨论】：

我如何使用它来填充多个隐藏的输入，每个输入都有不同的数据，只使用一次点击事件？
我想通了，最终使用了以下内容：function ElementContent(id,content) { document.getElementById(id).value = content; } 出于某种原因，setValue() 对我不起作用，所以我只使用了 value=
你是正确的 setValue 来自不同的 API :) 也只是仅供参考，JS 命名标准要求 functionNames 是一个以小写字母开头的驼峰式大小写。

【解决方案2】：

根据我从您的问题中得到的信息，您只是查询document.getElementById("target-input").value="desired value";，还是在寻找其他内容？

【讨论】：

【解决方案3】：

假设如下

ID for Schedule this cleaning = scheduleCleaning
ID for Regular Cleaning Address = regCleaning
ID for Vacancy Cleaning Address = vacCleaning
ID for Deep Cleaning Address = deepCleaning
ID for hidden will be same as above with _hid

你可以使用下面的

$('#scheduleCleaning').click(function() {
    $('#regCleaning_hid').val($('#regCleaning').val());
    $('#vacCleaning_hid').val($('#vacCleaning').val());
    $('#deepCleaning_hid').val($('#deepCleaning').val());
}

【讨论】：

【解决方案4】：

假设“安排这次清洁”是

<a class="cleaning" data-cleaning-type="regular">Schedule this cleaning</a>
<a class="cleaning" data-cleaning-type="vacancy">Schedule this cleaning</a>
...

在您拥有的页面中进一步向下

<input type="hidden" class="cleaning-schedule current" />

<input type="hidden" class="cleaning-schedule regular" />
<input type="hidden" class="cleaning-schedule vacancy" />
...

<input type="hidden" class="cleaning-schedule-other regular" />
<input type="hidden" class="cleaning-schedule-other vacancy" />
...

那么下面的代码就可以工作了

$("a.cleaning").click(function() {
    var $this = $(this);

    //the current cleaning type
    var cleaningType = $this.data("cleaningType");

    //set the cleaning schedule
    $("input.cleaning-schedule.current").val(cleaningType);

    //set other type specific information
    $("input.cleaning-schedule." + cleaningType)).val([whatever data you want]);
    $("input.cleaning-schedule-other." + cleaningType).val([whatever data you want]);
    return false; // edited
});

我可能会将额外的特定数据放在链接的数据属性中。

我对此进行了编辑以反映更广泛的案例。另请参阅jQuery's data function。

【讨论】：