Update of 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!
HTML
<!--WE'LL USE THIS AS YOUR FORM-->
<!--and populate it from template below-->
<form>
<input type="text" name="newFieldName" value="David" />
<button id="add">Add</button><br/>
<table id="fieldContainer"></table>
</form>
<!--THIS IS A TEMPLATE FOR OUR TABLE ROW-->
<table id="templateNew" style="display:none;">
<tr style="background-color:#FFFFFF; padding:10px;">
<td align="left">
<input name="fieldName4" value="david" id="checkBox4" type="checkbox" />
<b>david</b></td>
<td style="padding-right:10px;">
<select name="fieldType4" id="fieldType4" onchange="showParameters(4,this);">
<option value="">Select Field Type</option>
<option value="checkbox">Checkbox</option>
<option value="multipleCheckbox">Checkbox (Multiple)</option>
<option value="date">Date</option>
<option value="file">File</option>
<option value="hidden">Hidden</option>
<option value="password">Password</option>
<option value="radio">Radio</option>
<option value="select">Select</option>
<option value="selectYN">Select (y/n)</option>
<option value="selectStateUS">Select U.S. State</option>
<option value="selectCountry">Select Country</option>
<option value="text">Text</option>
<option value="textarea">TextArea</option>
</select>
</td>
<td style="padding:10px;">
<b>Require:</b> <select name="require4" id="require4">
<option value="no">No</option>
<option value="yes">Yes</option>
</select>
</td>
<td id="contentCel4" style="padding:10px;background-color:#FFFFFF;">
<select name="content4" id="content4">
<option value="" default="">Test For</option>
<option value="text-input">Empty Field</option>
<option value="creditcard">Credit Card</option>
<option value="email">Email</option>
<option value="number">Number</option>
</select>
</td>
<td><select name="sort4" id="sort4">
<option value="">Select Row</option>
<option value="1">1</option>
<option value="2">2</option>
<option value="3">3</option>
<option value="4">4</option>
</select>
</td><td>
<select name="cellGroup4" id="cellGroup4"...
JavaScript
//INSTRUCTIONS...
//Add a new name. Duplicates should be stopped.
function addField(e) {
var fieldsArray = $("#fieldContainer 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");
e.preventDefault();
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();
e.preventDefault();
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, simulated delay
data.html = createRow(newRowNumber, newFieldName).wrap('<div>').parent().html();
data.delay = 1;
url = '/echo/html/'; //for simulator
$.post(url, data, function (newRow) {
$('#fieldContainer').append(newRow);
alert("Row has been added");
});
e.preventDefault();
return false;
}
function showParameters(num, element){ //onchange
alert("OnChange[" + num + "]: " + elementID);
}
// THIS FUNCTION CREATES A ROW FROM TEMPLATE
var $rowsTemplate;
function createRow(r, n) {
var $rowClone = $rowsTemplate.clone();
$("input[name=fieldName4]", $rowClone)
.attr("name", "fieldName" + r)
.attr("id", "checkBox" + r)
.val(n)
.parents("tr")
.find("b")
.text(n.toLowerCase());
return $rowClone;
}
$(document).ready(function(){
$("button#add").on("click", addField);
// THIS CODE SETS UP OUR DUMMY DATA USING TEMPLATE
var rows = ["Alan", "Tom", "Pete"];
var $table = $("#fieldContainer");
$rowsTemplate =...