使用 .serializeArray() Javascript 時如何自定義鍵值對？

Question

代碼示例：

 $('#simpan').click(function(){ var data = $('.serialize').serializeArray(); console.log(data) })

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.2.3/jquery.min.js"></script> <div class="row"> <div class="col-lg-12"> <label><input type="radio" name="perkawinan" id="" class="form-control-sm serialize" value="belum kawin" data-title="Perkawinan"><b> Belum Kawin</b></label>&emsp; <label><input type="radio" name="perkawinan" id="" class="form-control-sm serialize" value="kawin" data-title="Perkawinan"><b> Kawin</b></label>&emsp; <label><input type="radio" name="perkawinan" id="" class="form-control-sm serialize" value="duda/janda" data-title="Perkawinan"><b> Duda/Janda</b></label>&emsp; <label><input type="radio" name="perkawinan" id="" class="form-control-sm serialize" value="bawah umur" data-title="Perkawinan"><b> Bawah Umur</b></label>&emsp; </div> </div> <div class="row"> <div class="col-lg-12"> <input type="text" name="pekerjaan" id="" class="form-control form-control-sm serialize" placeholder="Pekerjaan..." data-title="Pekerjaan"> </div> </div> <div class="row"> <button type="button" class="btn btn-sm btn-outline-success" id="simpan">SIMPAN</button> </div>

結果將是一個對象數組，其中包含名稱和值的鍵->值對。 當我們執行 .serializeArray() 時如何添加額外的鍵？

所需的輸出是：

[
  {
    "name": "perkawinan",
    "value": "kawin",
    "title": "Status Perkawinan",
    "type": "radio"
  },
  {
    "name": "pekerjaan",
    "value": "",
    "title": "Pekerjaan Pasien",
    "type": "text"
  }
] 

Answer 1

抱歉回復晚了，正忙於中小企業工作......你可以通過兩種方式做到這一點

HTML

<div class="container">
    <div class="row">
        <form action="" method="post" enctype="multipart/form-data" class="serialize">
            <div clas="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <div class="custom-control custom-radio custom-control-inline">
                  <input type="radio" name="perkawinan" class="custom-control-input" value="Belum Kawin" data-title="Title 1">
                  <label class="custom-control-label" for="customRadioInline1">Belum Kawin</label>
                
                  <input type="radio" name="perkawinan" class="custom-control-input" value="Duda/Janda"  data-title="Title 2">
                  <label class="custom-control-label" >Duda/Janda</label>
                </div>
                
                <div class="form-group" style="margin:15px 0">
                    <label>Pekerjaan</label>
                    <input type="text" name="pekerjaan" class="form-control" placeholder="Pekerjaan"  data-title="Title 3">
                </div>
            </div>
            
            <div clas="col-xs-12 col-sm-12 col-md-12 col-lg-12">
                <input name="submit" type="button" value="Submit" id="simpan" class="btn btn-success">
            </div>
        </form>
        
        <div clas="col-xs-12 col-sm-12 col-md-12 col-lg-12" id="output" style="margin-top:20px"></div>
    </div>
</div>

方法一

即使文本框值為空，這也會返回對象

<script type="text/javascript">
$(function()
{
    $('#simpan').on('click',function()
    {
        var data = $('.serialize  :input').serializeArray();
        
        var data = $.each(data, function(i,obj){obj.title = $("input[name='"+obj['name']+"']").data('title');obj.type = $("input[name='"+obj['name']+"']").attr('type');});
        $('#output').html(JSON.stringify(data))
    })
});
</script>

方法二

這將返回具有值的對象

<script type="text/javascript">
$(function()
{
    $('#simpan').on('click',function()
    {
        var data = $( ".serialize :input").filter(function () {return !!this.value;}).serializeArray();
        
        var data = $.each(data, function(i,obj){obj.title = $("input[name='"+obj.name+"']").data('title');obj.type = $("input[name='"+obj.name+"']").attr('type');});
        $('#output').html(JSON.stringify(data))
    })
});
</script>

這是一個工作小提琴JSFiddle