[英]Getting HTML5 custom data-* attributes from radio buttons on form submit
Is there a way to get the custom HTML5 data-*
attributes for the selected radio button when you submit a form? 提交表单时,是否可以获取所选单选按钮的自定义HTML5
data-*
属性? The value does not seem to get picked up by serializeArray()
. 该值似乎没有被
serializeArray()
。
HTML
的HTML
<form id="preference-form">
<table>
<tr class ="result">
<td width="100%">{{Title}}</td>
<td><input type="radio" id="radio-{{Project_No}}-1" data-application="{{Application_ID}}" name="{{Project_ID}}" value="1"></td>
<td><input type="radio" id="radio-{{Project_No}}-2" data-application="{{Application_ID}}" name="{{Project_ID}}" value="2"></td>
<td><input type="radio" id="radio-{{Project_No}}-3" data-application="{{Application_ID}}" name="{{Project_ID}}" value="3"></td>
<td><input type="radio" id="radio-{{Project_No}}-9" data-application="{{Application_ID}}" name="{{Project_ID}}" value="9"></td>
</tr>
</table>
</form>
JavaScript
的JavaScript
$("#preference-form).on('submit', function() {
var data = $(this).serializeArray();
console.log(data)
});
This outputs the name
and value
fields, but I can't seem to find a simple answer about the data-*
fields. 这将输出
name
和value
字段,但是我似乎找不到有关data-*
字段的简单答案。 Unfortunately, I need all three pieces of information in order to perform an update on the database record, and from what I understand: 不幸的是,根据我的理解,我需要全部三项信息才能对数据库记录进行更新:
I think the tricky part for this is the multiple elements compared to a single element. 我认为最棘手的部分是与单个元素相比,多个元素。
Based on comment that all you have is radios; 根据评论,您所拥有的只是收音机; writing your own serializer is simple.
编写自己的序列化器很简单。
First I would put the data attribute on the <tr>
for less repetition 首先,我将data属性放在
<tr>
以减少重复
<tr data-application="{{Application_ID}}">
Then you would do something like: 然后,您将执行以下操作:
var data = $(this).find('tr:has(:radio:checked)').map(function(){
var $row=$(this), radio = $row.find(':radio:checked')[0]
return {
app: $row.data('application'),
name: radio.name,
value: radio.value
}
}).get()
You are missing #
您不见了
#
$('#preference-form').on('submit', function(e) {
Use a hidden input for the data-*
attribute values. 对
data-*
属性值使用隐藏的输入。 The following demo sends to a live test server and the response will be displayed in the iframe below. 以下演示将发送到实时测试服务器,并且响应将显示在下面的iframe中。
$('#preference-form').on('submit', function(e) { radData(e); var data = $(this).serializeArray(); console.log(data); }); var radData = e => { $(':radio:checked').each(function(e) { var dataSet = $(this).data('application'); $(this).closest('tr').find('.dataSet').val(dataSet); }); }
.as-console-wrapper { width: 350px; min-height: 100%; margin-left: 45%; } .as-console-row.as-console-row::after { content: ''; padding: 0; margin: 0; border: 0; width: 0; } .hide { display: none }
<form id="preference-form" action='https://httpbin.org/post' method='post' target='response'> <table width='100%'> <tr class="result"> <td><input type="radio" id="rad1" data-application="rad1" name="rad1" value="1"></td> <td><input type="radio" id="rad2" data-application="rad2" name="rad1" value="2"></td> <td><input type="radio" id="rad3" data-application="rad3" name="rad1" value="3"></td> <td><input type="radio" id="rad9" data-application="rad9" name="rad1" value="9"> </td> <td class='hide'> <input class='dataSet' name='dataSet1' type='hidden'> </td> </tr> <tr class="result"> <td><input type="radio" id="rad4" data-application="rad4" name="rad2" value="4"></td> <td><input type="radio" id="rad5" data-application="rad5" name="rad2" value="5"></td> <td><input type="radio" id="rad6" data-application="rad6" name="rad2" value="6"></td> <td><input type="radio" id="radA" data-application="radA" name="rad2" value="A"> </td> <td class='hide'> <input class='dataSet' name='dataSet2' type='hidden'> </td> </tr> <tr class="result"> <td><input type="radio" id="rad7" data-application="rad7" name="rad3" value="7"></td> <td><input type="radio" id="rad8" data-application="rad8" name="rad3" value="8"></td> <td><input type="radio" id="radB" data-application="radB" name="rad3" value="B"></td> <td><input type="radio" id="radC" data-application="radC" name="rad3" value="C"> </td> <td class='hide'> <input class='dataSet' name='dataSet3' type='hidden'> </td> </tr> </table> <input type='submit'> </form> <iframe name='response'></iframe> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.