Question

我设法创建一个表单，让用户在按Enter键时添加更多条目（而不是提交表单）。这一切看起来都不错，除非最后调用submit函数，所有表单元素都会报告“未定义”值。

这是html：

<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 / jquery：

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).value;
            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();
}

这是一个演示问题的小提琴。

JSFiddle

感谢您提供任何线索

Answer 1

使用.val()，因为您正在使用未定义.value的jQuery选择器。

Demo

您的新JavaScript / JQuery：

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();
}

带有动态输入的Html表单在提交时没有文本

1 个答案: