在onClick上填充隐藏的表单输入

Question

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

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

我已经在使用jQuery了，所以任何特定于jQuery的解决方案都是受欢迎的。

非常感谢任何帮助。谢谢！

Answer 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
}

Answer 2

根据我的问题，您只需查询document.getElementById("target-input").value="desired value";，或者您正在寻找其他内容？

Answer 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());
}

Answer 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。