dynamic fields and buttons

not working yet

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/>
<div class="stickAtBottom">
    <form name="addItemForm" id="addItemForm" action="" method="post">
        <p id="form_list_parent">
                        <input type=text name="newthing" style="width:200px;" autofocus></input>
                   
                    Category:
                        <input type=text name="input_category" value="ToDo"></input>
                    
                    <br/>
                
            
        </p>
        <input type="button" id="additembutton" value="add item" onclick="addAnotherItem()" />
        <br/>
        <input type="button" id="submit_button" value="Submit" onclick='dosubmit()' />
    </form>
</div>

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 () {
            var txt = $(this).val();
            log(txt);
            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 && vals.length > 0) output += "key:" + property + ': value:' + object[property] + ';<br>';
        }...