Question

serializeArray() does not pick up form fields that have been added after page load (by #jQuery). Why? How can I resolv?

Edit: See code below. I’m quite new to javascript/jquery and therefore I guess I’m missing something quite obvious (haven’t been able to find it on google though).

The new row has been added by running addFormRow (as OnClick in HTML). The new row is added to the page but not used when I run submitFormJSON (or $(‘form :input’) in console).

function addFormRow(){
    var newrow = document.createElement('article');
    newrow.innerHTML = 'Name: <input type="text" name="rowName" value="" /> Description: <input type="text" name="rowDescription" value="" /> Type: <select name="rowType"><option value="text">Text</option><option value="textarea">Textarea</option><option value="email">Email</option><option value="checkbox">Checkbox</option><option value="radio">Radio button</option><option value="date">Date</option><option value="range">Range</option><option value="url">URL</option><option value="number">Number</option><option value="time">Time</option><option value="dropdown">Drop Down</option></select>';
    document.getElementById("section").appendChild(newrow);
}

function submitFormJSON(strURL, strType) {
        var objFormValues = {};
        $.each($('form').serializeArray(), function(key,value) {
            objFormValues[value.name] = value.value;
        });
        $.ajax({
            type: strType,
            url: strURL,
            dataType: 'json',
            data: objFormValues,
            success: function(msg) {
                alert( "Data Saved!");
            }
        });
    }

Answer 1

Make sure that the fields you added on page load in the same form element which you are trying to searialize.