javascript 填充隐藏的表单输入 onClick
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/8829155/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
Populate hidden form inputs onClick
提问by Jeremy
I have a list of addresses and other values that I've generated, and I have included a link next to each row (see image below):
我有一个我生成的地址和其他值的列表，并且在每一行旁边都包含了一个链接（见下图）：
I need to be able to click the "schedule this cleaning" link next to a row, and have it send that specific information to some hidden input fields further down the page, all without reloading the page. I'll need to populate multiple inputs with various data, using a single onClick event.
我需要能够单击一行旁边的“安排此清理”链接，并将该特定信息发送到页面下方的一些隐藏输入字段，而无需重新加载页面。我需要使用单个 onClick 事件用各种数据填充多个输入。
I'm already using jQuery, so any jQuery-specific solutions are also welcome.
我已经在使用 jQuery，因此也欢迎任何特定于 jQuery 的解决方案。
Any help would be greatly appreciated. Thanks!
任何帮助将不胜感激。谢谢！
回答by dbrin
its straight forward even without JQuery:
即使没有 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
}
回答by Milad Naseri
From what I got from your question, you just query document.getElementById("target-input").value="desired value";, or are you looking for something else?
根据我从您的问题中得到的信息，您只是查询document.getElementById("target-input").value="desired value";，还是在寻找其他东西？
回答by Skyrim
Suppose "Schedule this cleaning" is
假设“安排这次清洁”是
<a class="cleaning" data-cleaning-type="regular">Schedule this cleaning</a>
<a class="cleaning" data-cleaning-type="vacancy">Schedule this cleaning</a>
...
and further down in the page you have
并在您拥有的页面中进一步向下
<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" />
...
Then the following code will work
然后下面的代码将起作用
$("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
});
I would probably put the extra specific data in the data attributes in the link.
我可能会将额外的特定数据放在链接的数据属性中。
I edited this to reflect a broader set of cases. Also, refer to jQuery's data function.
我编辑了这个以反映更广泛的案例。另外，请参考jQuery 的数据函数。
回答by bretterer
Assuming the following
假设以下
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
You can use the following
您可以使用以下
$('#scheduleCleaning').click(function() {
$('#regCleaning_hid').val($('#regCleaning').val());
$('#vacCleaning_hid').val($('#vacCleaning').val());
$('#deepCleaning_hid').val($('#deepCleaning').val());
}
