0

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

Joe
  • 558
  • 1
  • 8
  • 30

3 Answers3

0

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)
prathameshk73
  • 1,048
  • 1
  • 5
  • 16
  • sir, Its not getting table datas – Joe Oct 21 '19 at 06:54
  • 1
    var formData = {}; $("#tab_logic").find('tr').each(function(index, row) { var tableRow$= $(row); if ( tableRow$.find('.form-control').length > 0) { formData['row-'+index] = {}; tableRow$.find('.form-control').each(function(ind, control) { if (this.tagName.toLowerCase() == 'select' || this.tagName.toLowerCase() == 'input') { formData['row-'+index][this.name] = $(this).val(); } }); } }); – prathameshk73 Oct 28 '19 at 07:14
0

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);
}
hojin
  • 1
  • 2
-1

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

hojin
  • 1
  • 2