如何将动态创建的文本框值从javascript传递到mvc控制器

时间:2019-03-08 15:06:43

标签: javascript jquery spring-mvc model-view-controller controller

根据用户首选项创建不同数量的动态文本框的Javascript。我的JSP页面包含几个下拉框和下面的代码以生成动态文本框。

<div id='TextBoxesGroup' style="display: inline-table;"><br>
<script>
    $("#addButton").click(function () {
            var selectfield = $('#selectcolumnlist option:selected').val();
            if(counter > 3)
            {
                alert("Only 3 textboxes allowed");
                return false;
            }
            if (selectfield == ""|selectfield == null)
            {
                alert("Missing selection to create condition");
                return false;
            }
            var newTextBoxDiv = $(document.createElement('div')).attr("id", 'TextBoxDiv');   
            newTextBoxDiv.after().html('<input type="text" name="textbox_' + selectfield + '" class="form-control" id="textbox_'+selectfield+'" placeholder="' + selectfield + '" value="" style="width: 390px;margin-left: 10px"/><input type="button" value="Remove Field" class="remove_this" id="removeid" accessKey="'+selectfield+'"/>');
            newTextBoxDiv.appendTo("#TextBoxesGroup");
            $('#selectcolumnlist option:selected').remove();
            counter++;
        });

        $("#TextBoxesGroup").on('click', '#removeid', (function() {
            var a = $(this).attr('accessKey');
            alert(a);
            $(this).parent('div').remove();
            $('#selectcolumnlist').append(new Option(a,a));
            counter--;
        }));
</script>

我想将动态创建的文本框的ID及其值在映射内传递给控制器​​。

function submitform() {
    alert("inside submit");
    var ele = document.getElementsByTagName('input');
    var map = new Map(); // or var map = {};
    for (i = 0; i < ele.length; i++) {
        if (ele[i].type == 'text' && ele[i].value != null && ele[i].value != '') {
            alert("setting map values");
            alert(ele[i].placeholder+" "+ele[i].value);
            map.set(ele[i].placeholder,ele[i].value);
        }
    }
    $.ajax({
        type : 'POST',
        url : 'test',
        contentType: 'application/json; charset=utf-8',
        data : JSON.stringify(map),
        error : function(response) {
            alert("Operation failed.");
        },
        success : function(response) {
            alert("Success");
        }
    });
}

但是以上提交功能无法正常工作。

0 个答案:

没有答案