如何使用 Javascript 或 jQuery 以 JSON 格式获取表单数据

Question

How to get form data in json format, i can done something but i didnt get some fields values. im using javascript to get form values.

My full code on here.. please visit on my fiddle.

Full Fiddle Here..

i want to get all values like JSON Format

Example

    JSON FORMAT:
    {
  "vouchno": 3,
  "reason": null,
  "ledgerno": null,
  "entrytype": null,
  "vouchdt": null,
  "refno": null,
  "refdt": null,
  "billtype": "OT",
  "acctcode": null,
  "tds": "N",
  "narration": null,
  "debitamt": null,
  "creditamt": null,
  "total": 10000,
  "deleted": null,
  "realise": null,
  "realisedt": null,
  "createby": null,
  "cashactcode": 36,
  "createon": null,
  "acctname": null,
  "amount": null,
  "availableamt": 46984,
  "opbaltype": null,
  "strvouchdt": "19/10/2019",
  "strrefdt": null,
  "cashpayments": [
    {
      "acctcode": 41,
      "debit": 10000,
      "credit": null,
      "narr": "",
      "actname": "ACCOUNT1"
    },
    {
      "acctcode": 41,
      "debit": 10000,
      "credit": null,
      "narr": "",
      "actname": "ACCOUNT1"
    }
  ]
}

But i can done something here

 var status; var sno = []; var load; var no_rows = 0; var row; var mainArr = []; var tmpArr = []; function loadValues() { var mainTable = $('#tab_logic'); var tr = mainTable.find('tbody tr'); console.log(tr.length) tr.each(function() { tmpArr = []; $(this).find('td').each(function() { var values = $(this).find('input, select').val(); tmpArr.push(values); }); mainArr.push(tmpArr); }); console.log(mainArr); } $(document).ready(function() { $(".add_Row").click(function() { row = `<tr id="tasklist"><td><input type="text" class="sno sel_text form-control" placeholder="A/c code"></input></td><td><select class="sel_sel form-control status" id="dropdown2" name="dropdown2"><option value="">Choose an items</option><option value="acc1">Account 1</option><option value="acc2">Account 2</option><option value="acc3">Account 3</option></select></td><td><input type="text" class="form-control pname" placeholder='Enter your text here' id='acc_narrat' data-toggle='modal' data-target='#accnarratModal'></input></td><td><input type="text" placeholder='Debit Amount' class='form-control task input-md' id='cashdeb'data-action='sumDebit'></input></td><td><input type="text" placeholder='Credit Amount' data-action='sumCredit' class='form-control comment input-md' readonly></input></td></tr>`; $("table > tbody").append(row); var defVal = $("select[name=dropdown1]").find(":selected").val(); if (defVal) { $("select[name=dropdown2]").find(`option[value=${defVal}]`).hide(); } bindScript(); }); $('.load').click(function() { loadValues(); }); }); $('select[name=dropdown1]').on('change', function() { $("select[name=dropdown2]").find('option').show(); var from = $(this).find(":selected").val(); $("select[name=dropdown2]").val(''); if (from;= "") { debugger. $("select[name=dropdown2]").find(`option[value=${from}]`);hide(); } }). // Get value from dropdown to show text box using class function bindScript() { $(document).find('.sel_sel'),on("change". function() { $(this).parent().parent().find('.sel_text').val($(this);val()); }) }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

My full html code on fiddle

Please Suggest anything..

Fiddle Here

Answer 1

This will be helpful

Write below code in the submit function

 var formData = {}; $("#contactForm").find('.form-control').each(function(index, control) { if (this.tagName.toLowerCase() == 'select' || this.tagName.toLowerCase() == 'input') { formData[this.name] = $(this).val() } }); console.log(formData)

Answer 2

This approach can help

function loadValues() {
  //move on this
  var mainArr = [];
  var tmpArr = [];
  var mainTable = $('#tab_logic');
  var tr = mainTable.find('tbody tr');
  console.log(tr.length)
  tr.each(function() {
    tmpArr = [];
    $(this).find('td').each(function() {

      //get attr id
      let title = $(this).find('input, selet').attr('id');

      var values = $(this).find('input, select').val();

      //input json format
      let pushing = $.parseJSON( '{ "' + title + '": "' + values + '" }' );

      tmpArr.push(pushing);

    });
    mainArr.push(tmpArr);
  });
  console.log(mainArr);
}

Answer 3

I think it will be useful to you

Example Form

<form id="myForm" name="myForm">
  <div>
    <label for="username">Enter name:</label>
    <input type="text" id="username" name="username">
  </div>
  <div>
    <label for="useracc">Enter account number:</label>
    <input type="text" id="useracc" name="useracc">
  </div>
  <div>
    <label for="userfile">Upload file:</label>
    <input type="file" id="userfile" name="userfile">
  </div>
  <input type="submit" value="Submit!">
</form>

Get form

let myForm = document.getElementById('myForm');
let formData = new FormData(myForm);

To Json

var object = {};
formData.forEach(function(value, key){
    object[key] = value;
});
var json = JSON.stringify(object);

https://developer.mozilla.org/en-US/docs/Web/API/FormData/FormData

How to convert FormData(HTML5 Object) to JSON