Question

我已经设法使用bootstrap类等动态/编程地创建模态表单。但是当我尝试从输入框访问数据时，我得不到console.log()。它的形式不存在于dom上，并且不能收集任何输入。

我之前在硬编码模式窗体上使用相同的'getFormData'函数尝试了此操作。调用console.log()并且检查器在dom对象的控制台输出上显示“元素突出显示选项”，与新的动态表单不同。

如何使用动态创建的表单模式获取此数据？

JQUERY

//create form modal   
function getMessageTemplate(message, instance)
{
    var styles = 
    {
        success:{alert: 'alert-success', icon: 'glyphicon glyphicon-ok-sign'},
        error:{alert: 'alert-danger', icon: 'glyphicon glyphicon-remove-sign'},
        warning:{alert: 'alert-warning', icon: 'glyphicon glyphicon-question-sign'},
        default:{alert: 'bg-primary', icon: 'glyphicon glyphicon-cog'}
    };

    var header =
    '<div class="modal-header no-scroll '+ styles[message.style]['alert'] +'">'+
        '<i class="'+ styles[message.style]['icon'] +'"></i>'+
        '<h4 class="message"><strong>'+ message.title +'</strong></h4>'+
        '<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>'+
    '</div>';

    var body = '';
    var footer = '';

    if(message.form !== undefined)
    {   
        body = $('<div class="modal-body"></div>');
        form = body.append('<form id="form-' +message.form.name+ '" class="form"></form>');

        $(message.form.input).each(function(index,value)
        {  
            input = form.append(
                '<div class="row">'+
                    '<div class="col-xs-2">'+
                        '<label>' +value.label+ ':</label>'+
                    '</div>'+
                    '<div class="col-xs-9">'+
                       '<div class="input-group add-on col-xs-2">'+
                            '<div class="input-group-btn">'+
                                '<a class="btn btn-default" data-toggle="popover-input" data-html="true" title="Item Name" data-content=" Name of the item, multiple names allowed for different container sizes. <br/>Only: characters (A-Z)."><span class="glyphicon glyphicon-question-sign"></span></a>'+
                            '</div>'+
                           '<input name="' +value.name+ '" class="form-control red-tooltip" placeholder="...." title="" type="text" >'+
                        '</div>'+
                    '</div>'+
                   '<div class="col-xs-1">'+
                        '<a class="valid-icon small fail glyphicon glyphicon-remove"></a>'+
                   '</div>'+
                '</div>');
        });
    }

    if(message.submit !== undefined)
    {
        footer = 
        '<div class="modal-footer msg-footer">'+
            '<input class="form-input" type="hidden">'+
            '<div class="row text-center">'+
                '<button id= "close"  class="btn btn-default btn-msg" type="button" data-dismiss="modal"> Back</button>'+
                '<button id= "'+ message.submit.id +'" name= "'+ message.submit.name +'" class="btn btn-default btn-msg '+ message.submit.class +'" type="button" data-dismiss="modal"> Submit</button>'+
            '</div>'+
        '</div>';
    }

    var container = $('<div id="alert'+ instance +'" class="msg modal fade" tabindex="-1" data-focus-on="input:first" style="display: none;"></div>')
    .append(header)
    .append(body)
    .append(footer); 

    return container[0].outerHTML;

}


//gather form infomation
function getFormData(form)
{
     console.log(form); //dom object
     var formName = form.attr('id');

     $('body #'+formName+' input').each(function(inputKey, inputObj)
     {   
          var inputName = $(inputObj).attr('name');
          var inputValue = $(inputObj).val();

          //none of this is displayed
          console.log('------[input-start]-----');
          console.log(inputName); 
          console.log(inputValue);
     });
}


//submit button event for modal form 
$('body').on('click', '.btn-form', function(e) 
{
     var sourceForm = $(this).closest('.modal').find('form');
     var formData = getFormData(sourceForm);
     //do stuff with formData etc
}

这些功能还有更多，所以我编辑了以显示核心表单功能。

Fiddle Me

从动态创建的表单中获取数据

0 个答案: