How do I get all the value of Input fields (including select, text-area) from multiple fieldsets inside a single form element?

Question

I've a form, which consists both plain <input> tags as well as other fileds inside <fieldset> .

When I do $('.form-class-name').serialize(); , it only takes the value of the those input fields which are outside of the <fieldset> . However if I put some value to the input field inside <fieldset> , serialize will take the value of them too.

The problem here is that, I need all the values of input fields in the whole <form> element even if they are blank, which in my case jquery serialize isn't doing.

Any help/reference/suggestion would be great.

Here's a sample of my html. https://jsfiddle.net/7h61bboc/6/

Has anyone been through this road? Help me.

Here's the updated html with desired result and current result : https://jsfiddle.net/gqwg4pd5/2/

Note: I was trying to get even the blank values of Radio, Checkbox, Select, which is not supported by Jquery Serialize.

Answer 1

        var values = {};
          $.each($('#myForm').serializeArray(), function(i, field) {
              values[field.name] = field.value;
                 });

try this below code

                $('#myForm').bind('submit', function () {
                    var elements = this.elements;
                 });

Answer 2

$('#myForm').submit(function() {
// get all the inputs into an array.
var $inputs = $('#myForm :input');

// not sure if you wanted this, but I thought I'd add it.
// get an associative array of just the values.
var values = {};
$inputs.each(function() {
    values[this.name] = $(this).val();
});
});

Answer 3

You can use a serialize() function of JQuery:

var datastring = $(".form-class-name").serialize();
    $.ajax({
        type: "POST",
        url: "your url.php",
        data: datastring,
        success: function(data) {
             alert('Data send');
        }
    });