从表单提交上的单选按钮获取 HTML 自定义数据-* 属性

Question

有没有办法在提交表单时获取所选单选按钮的自定义 HTML data-*属性？该值似乎没有被serializeArray()拾取。

.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

$("#preference-form).on('submit', function() {
    var data = $(this).serializeArray();
    console.log(data)
});

这将输出name和value字段，但我似乎找不到有关data-*字段的简单答案。不幸的是，我需要所有三条信息才能对数据库记录执行更新，据我所知：

• 每个 ID 和值字段必须是唯一的，
• 每个名称字段必须相同才能对元素进行分组。

我认为这很棘手的部分是与单个元素相比，多个元素。

Answer 1

根据评论，您拥有的只是无线电; 编写自己的序列化程序很简单。

首先，我将 data 属性放在<tr>上以减少重复

<tr data-application="{{Application_ID}}">

然后，您将执行以下操作：

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()

Answer 2

你缺少#

 $('#preference-form').on('submit', function(e) {

对data-*属性值使用隐藏输入。以下演示发送到实时测试服务器，响应将显示在下面的 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>