JSFiddle - React, Tailwind, and code Playground

by Anjana Silva

HTML

<form id="frm" data-id="123">
  <input type="text1" name="title1" value="Test title 1" data-list1="value1" data-list2="value2" /><br/>
  <input type="text2" name="title2" value="Test title 2" data-list1="value1" data-list2="value2" /><br/>
  <button id="btn">Serialize</button>
</form>

<span id="result"></span>

CSS

#result {
  display: block;
  color: #aa3300;
  width: 300px;
  margin: 5px;
  word-wrap: break-word;
}

JavaScript

$('#btn').on('click', function(e) {
  $("form").each(function(){
       var input = $(this).find(':input') //<-- Should return all input elements in that specific form.
       console.log(input.val());
   });

  /* e.preventDefault();
  var form = $('#frm');
        
  var dataarr = new Array();
  console.log(form);
  for(var i in form.data()) {
      var subarr = new Array();
      subarr['name'] = i;
      subarr['value'] = form.data()[i];
      dataarr.push(subarr);
  }
        
  var serialized = $.param(form.serializeArray().concat(dataarr));
        
  $('#result').text(serialized); */


});