dynamically add fields to form on enter
mostly works but form inputs have undefined text on submit
HTML
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
<script src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<button id='foo' onclick='clearConsole();'>clear console log</button>
<div id="console">console log type thing</div>
<p/>
<hr/>
<p/>
<form id="addItemForm" method="post" action="">
<p id="form_list_parent">
<input id="form_list" />
<br/>
</p>
<input type="button" id="additembutton" value="add item" onclick="addAnotherItem()" />
<br/>
<input type="button" id="submit_button" value="Submit" onclick='dosubmit()' />
</form>
JavaScript
function dosubmit() {
$('#addItemForm').submit();
}
$(document).ready(function () {
//this is intended to prevent enter key from submitting the form
$('#addItemForm').bind('keydown', function (e) {
if (e.keyCode == 13 || e.which == 13) {
e.preventDefault();
e.stopPropagation();
var addbtn = $('#additembutton');
$(addbtn).click();
return false;
}
});
$('#addItemForm').submit(function (ev) {
ev.preventDefault(); // to stop the form from submitting
log("made it to the form submit function");
var varz = [];
var i = 0;
$('#form_list_parent').find('input').each(function () {
log("INPUT: " + i);
//log(dump($(this)));
var txt = $(this).val();
log(txt); // always comes back 'undefined' ??
varz.push(txt);
i += 1;
});
/* Validations go here */
//this.submit(); // only submit If all the validations succeeded
});
});
function addAnotherItem() {
var input = document.createElement("input");
input.type = "text";
input.id = "dyntext";
input.name = input.id;
input.value = "";
var br = document.createElement("br");
$('#form_list_parent').append(input);
$('#form_list_parent').append(br);
$(input).focus();
}
// debugging helpers... not involved
function clearConsole() {
$('#console').html(" ");
}
function log(msg) {
var oldmsg = $('#console').html();
var newmsg = msg + "<br>" + oldmsg;
$('#console').html(newmsg);
}
function dump(object) {
var output = object + "<br>";
var keys = [];
for (var key in object) {
if (key.length > 0) keys.push(key);
}
keys.sort();
for (var i = 0; i < keys.length; i++) {
var property = keys[i];
try {
var val = object[property];
var vals = '' + val;
if (val !== null && val !== undefined...