Extracting relevant form data to an array

I have the following function, it works exactly how I need it to; however I think there is room for improvement.

The script is supposed to loop through all input and text area html elements. It should only work with elements that have a name, and a value, and it should ignore "hidden". However some of the elments do not have a type attribute, so I can't do something like input.attr('type').toLowerCase() != 'hidden'.

After that, it ignores any field with the class element_reference_input, and looks for fields with form-control or question_textarea_input.

Last it writes the values to an array.

jQuery('input, textarea').each(function(index){  
    var input = jQuery(this);
    if (input.val() && input.attr('name') && input.attr('type') != 'hidden' && input.attr('type') != 'HIDDEN') {
        if (input.attr('class')) {
            elmClass = input.attr('class');
        }

        if (elmClass.indexOf('element_reference_input')  -1 || elmClass.indexOf('question_textarea_input') > -1 )) {
            objOutgoingData.push(
                {
                    name:'' + input.attr('name').split('.').pop(),
                    value:'' + input.val(),
                    table:'' + tableName,
                }
            );          
        }
    }
});

I feel that I have to many if statements, I'd like to streamline it. But I am trying to avoid undefined errors if class or type is not present on the html tag.

You're failing to use the power of jQuery selectors, making the problem much harder than it needs to be.

Furthermore, elmClass = input.attr('class') is buggy. The elmClass variable is not localized. If the element (and all previously match elements!) has no class attribute, then the .indexOf() tests will crash.

Since input could be either an ` or a , I'd prefer a more generic variable name.



var tableName = 'some-table';

var objOutgoingData = jQuery(
'input.form-control[name]:visible,' +
'textarea.form-control[name],' +
'textarea.question_textarea_input[name]')
.not('.element_reference_input')
.map(function() {
var $element = jQuery(this);
return {
name: $element.attr('name').split('.').pop(),
value: $element.val(),
table: tableName,
};
}).get();

jQuery('#output').focus(function() {
$(this).val(
JSON.stringify(objOutgoingData)
.replace(/[{\]]/g, '\n$&')
);
});
input, textarea { font-family: monospace; background-color: #f99; }
.incl { background-color: #9f9; }
#output { background-color: inherit; }


Click me to generate objOutgoingData.
Green elements are to be included; red ones and invisible ones excluded.






textarea (question_textarea_input)
textarea (wrong class)
`

StackExchange Code Review Q#110455, answer score: 4