Question

您好我正在尝试在bootstrap模式中创建一个表单。此模式将基于href单击事件打开。这个href标签将使用Jquery在ajax调用中动态生成。

标签的

格式在下面调用bootstrap模态。

'<a id="addvideo" data-toggle="modal" data-title="'+field.title+'" data-id="'+field.video_id+'" data-desc="'+field.description+'" data-channelname="'+field.channel_name+'" data-yudate="'+field.created_date+'" href="#form-content">'+field.title+'</a>'

我打电话的模式如下所示。

                <div id="form-content" class="modal hide fade in" style="display: none;">
                    <div class="modal-header">
                        <a class="close" data-dismiss="modal">×</a>
                        <h3>Add Video</h3>
                    </div>
                    <div class="modal-body">
                        <form name="addvideo" action="#" id="addvideo">
                            <label>Title</label>
                            <input type="text" id="videotitle" name="videotitle" value="" /><br />
                            <label>Video ID</label>
                            <input type="text" id="videoid" name="videoid" value="" /><br />
                            <label>Description</label>
                            <textarea name="videodesc" id="videodesc"></textarea><br />
                            <label>Channel</label>
                            <input type="text" id="channelname" name="channelname" value="" /><br />
                            <label>Actors</label>
                            <input type="text" id="actors" name="actors" value="" /><br />
                            <label>Directors</label>
                            <input type="text" id="directors" name="directors" value="" /><br />
                            <label>Producers</label>
                            <input type="text" id="producers" name="producers" value="" /><br />
                            <label>Order Number</label>
                            <input type="text" id="orderno" name="orderno" value="" /><br />
                            <label>Youtube Updated Date</label>
                            <input type="text" id="yudate" name="yudate" value="" /><br />
                            <label>CMS Updated Date</label>
                            <input type="text" id="cudate" name="cudate" value="" /><br />
                            <label class="checkbox">
                            <input type="checkbox" id="hidevideo"> Hide video in mobile app
                            </label>
                            <button class="btn btn-success" id="submit"><i class="icon-white icon-ok"></i> Submit</button>
                            <button class="btn btn-inverse"><i class="icon-white icon-circle-arrow-left"></i> Cancel</button>
                         </form>
                    </div>
                </div>

现在基于点击调用模态我使用下面的javascript代码，在这段代码中我只通过使用Jquery设置文本框中的文本框将数据传递给模态。

$(document).on("click", "#addvideo", function () {
 var videoid = $(this).data('id');
 var videotitle = $(this).data('title');
 var videodesc = $(this).data('desc');
 var channelname = $(this).data('channelname');
 var yudate = $(this).data('yudate');

 $(".modal-body #videoid").val( videoid );
 $(".modal-body #videotitle").val( videotitle );
 $(".modal-body #videodesc").val( videodesc );
 $(".modal-body #channelname").val( channelname );
 $(".modal-body #yudate").val( yudate );
});

现在我的模态加载正常，一旦加载了模式，点击href标签后，值就会显示在指定的文本框中。但是如果我在加载后点击模态，文本框中的值会自动重置为空白值。

Answer 1

您的form ID与a标记的ID相同。

<a id="addvideo" ...>
<form name="addvideo" action="#" id="addvideo">

因此事件$(document).on("click", "#addvideo", function () {... })将触发两个元素。当$(this)引用表单时，您的数据未定义/为空。

只需重命名您的表单ID即可。

如果我点击模态中的任何位置，传递到bootstrap模式中的文本框的数据将在加载模态后自动重置

1 个答案: