dynamically add fields to form on enter

by J. Jones

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="commentForm" method="get" action="" >
    <p id="form_list_parent">
        <input id="form_list" /><br/>
    </p>
    <input type="button" id="additembutton" autofocus="autofocus" value="add item" onclick="addInput1()" /><br/>
    <input type="button" id="submit_button" value="Submit" onclick='dosubmit()' />
</form>

JavaScript

$('#commentForm').bind('keydown', function(e) {
    if (e.keyCode == 13 || e.which == 13 ) {
        e.preventDefault();
        e.stopPropagation();
        var addbtn = $('#additembutton');
        $(addbtn).click();
        return false;
    }
});

function dosubmit() {
    $('#commentForm').submit();
}


var i = 1;
$(document).ready(function () {
    $("#commentForm").validate();
    $('#commentForm').submit(function(ev) {
      ev.preventDefault(); // to stop the form from submitting
      log("made it to the form submit");
      var frm = $(this);
      var children = $(frm).children;
        //log("DUMPING FORM: " + dump(frm));
        //log("DUMPING CHILDREN: " + dump(children));
        //for ( elem in ev.target ) {
         //   log(dump(elem));
        //}
      /* Validations go here */
      //this.submit(); // If all the validations succeeded
    });
});

function addInput1() {
   var input = document.createElement("input");
   input.type = "text";
    input.id = "text" + i;
    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) {
       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 && vals.length > 0 )
            output += property + ': ' + object[property] + ';<br>';
        }
        catch(err) { // deprecated members will cause this
            //output += property + ': ' +...