David's project to add new table rows

I have simulated the $.get() by sending jsfiddle's AJAX simulator the row I wish to receive back!

by alano

HTML

<input name="newFieldName" type="text" value="Value23" />
<button onclick="addField()">Add New</button>
<table id="fieldContainer">
    <tr><td><span>Existing Row 1</span></td><td>
        <input type="checkbox" name="fieldName1" value="email" />
    </td></tr>
        <tr><td><span>Existing Row 2</span></td><td>
        <input type="text" name="fieldName2" value="Value22" />
            </td></tr>
        <tr><td><span>Existing Row 3</span></td><td>
        <input type="text" name="fieldName3" value="Value23" />
    </td></tr>
</table>

JavaScript

//INSTRUCTIONS:-
//Field Values Value21, Value22 and Value23 already exist. Add a new one to see result

function addField() {
    var fieldsArray = $("input[name^=fieldName]").map(function (i, input) {
        return input.value;   //value of tag
    }).get();
    var newFieldName = $("input[name=newFieldName]").val();
    if (newFieldName == "") {
        alert("Field Name Required");
        return false;
    }
    // make sure field name isn't already used:
    if (fieldsArray.indexOf(newFieldName) >= 0) {
        alert("Field Name: " + newFieldName + " already in use");
        $("input[name=newFieldName]").focus();
        return false;
    }
    var newRowNumber = fieldsArray.length + 1;
    var url = 'addField.php';
    var data = {
        newRowNumber: newRowNumber,
        newFieldName: newFieldName
    };
    //jsfiddle AJAX simulator needs POST not GET
    //and html data to return back
    data.html = '<tr><td><span>New Row ' + newRowNumber + '</span></td><td><input type="text" name="fieldName' + newRowNumber + '" value="' + newFieldName + '" /></td></tr>';
    alert("Data to simulate: " + data.html);
    url = '/echo/html/'; //for simulator
    $.post(url, data, function (newRow) {
        $('#fieldContainer').append(newRow);
        alert("Row has been added");
    });
}