在提交前将Modal输入值插入表单/表格

Question

大家好，我需要帮助插入的输入值，内模态(这是从数据库中使用自动完成)到表格预览，然后再提交表单。

这是模式图像->，数据插入应该在单击"Add Owner“按钮后发生。

​

这是表格图像->，它将在每次添加新所有者时添加行。

​

​

下面是我的JS代码，

large.on('click', '.add-modal-owner', function (e){
            e.preventDefault();

            //clear all data upon close/save
            $(".modal").on("hidden.bs.modal", function(){
                $("input").val("");
                $('[name=optionsRadios4]',form).each(function(){
                    $(this).prop('checked',false).uniform('refresh');
                });
                $('#student_photo').attr('src', '');
                $("[name=matrik_number]").select2("val", "");

                $("tbody").data( $("[name=student_name]").data() );

                var student_data = {"id":matrik_number.val(),"name":$("[name=student_name]").val(),"ic":$("[name=student_ic]").val(),
                                    "birthplace":$("[name=student_birthplace]").val(),"faculty":$("[name=faculty_name]").val(),
                                    "phone":$("[name=student_phoneno]").val(),"email":$("[name=student_emailadd]").val()};
                var row = $("<tr></tr>").data(student_data);

(在尝试使用.data()方法插入数据时，我在对表进行循环时迷失了方向。上面的THe只有复位值代码作为工作代码。不过，最后6行我需要帮助。

下面是我的HTML代码(用于Modal)

<div class="modal-content">
                                    <div class="modal-header">
                                        <button type="button" class="close" data-dismiss="modal"
                                            aria-hidden="true"></button>
                                        <h4 class="modal-title">Add New Owner</h4>
                                    </div>
                                    <div class="modal-body" id="form">
                                        <div class="row">
                                            <div class="col-md-10 center-block">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">Matrik No. <span
                                                        class="required"> * </span></label>
                                                    <div class="col-md-9">
                                                        <input name="matrik_number" class="form-control select2" />
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                        <div class="row">
                                            <div class="col-md-4">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3"></label>
                                                    <div class="col-md-8">
                                                        <img name="student_photo" id="student_photo" alt=""
                                                            class="img-circle img-responsive center-block" />
                                                    </div>
                                                </div>
                                            </div>
                                            <div class="col-md-8">
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">Name</label>
                                                    <div class="col-md-7">
                                                        <input name="student_name" id="student_name" type="text" class="form-control"
                                                            readonly>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">IC Number</label>
                                                    <div class="col-md-7">
                                                        <input name="student_ic" id="student_ic" type="text" class="form-control"
                                                            readonly>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">Birth Place</label>
                                                    <div class="col-md-7">
                                                        <input name="student_birthplace" id="student_birthplace" type="text"
                                                            class="form-control" readonly>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">Faculty</label>
                                                    <div class="col-md-7">
                                                        <input name="faculty_name" id="faculty_name" type="text"
                                                            class="form-control" readonly>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">Study Year</label>
                                                    <div class="col-md-7">
                                                        <input name="student_studyyear" id="student_studyyear" type="text"
                                                            class="form-control" readonly>
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">Phone No.</label>
                                                    <div class="col-md-7">
                                                        <input name="student_phoneno" id="student_phone" maxlength="11" onkeypress="return event.charCode >= 48 && event.charCode <= 57" type="text"
                                                            class="form-control">
                                                    </div>
                                                </div>
                                                <div class="form-group">
                                                    <label class="control-label col-md-3">E-Mail</label>
                                                    <div class="col-md-7">
                                                        <input name="student_emailadd" id="student_email" type="text" maxlength="50"
                                                            class="form-control">
                                                    </div>
                                                </div>

                                                <div class="form-group">
                                                    <label class="control-label col-md-3">Year Start
                                                        Business</label>
                                                    <div class="col-md-7">
                                                        <div class="radio-list">
                                                            <label class="radio-inline"> <input type="radio"
                                                                name="optionsRadios4" value="option1" /> 1
                                                            </label> <label class="radio-inline"> <input
                                                                type="radio" name="optionsRadios4" value="option2" />
                                                                2
                                                            </label> </label> <label class="radio-inline"> <input
                                                                type="radio" name="optionsRadios4" value="option3" />
                                                                3
                                                            </label> <label class="radio-inline"> <input
                                                                type="radio" name="optionsRadios4" value="option4" />
                                                                4
                                                            </label>
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="modal-footer">
                                        <button type="button" class="btn dark btn-outline"
                                            data-dismiss="modal">Close</button>
                                        <a class="btn green add-modal-owner" data-dismiss="modal">Add Owner</a>
                                    </div>
                                </div>

Answer 1

我把它修好了。基于此示例-> http://jsfiddle.net/Qw2VY/2/

下面是我的代码，希望能对大家有所帮助。

large.on('click', '.add-modal-owner', function (e){
            e.preventDefault();

            if(matrik_number != ''){
            //insert modal data to tables/forms
                $('tbody',tab_owner).append(                
                        $("<tr>\n" +
                        "<td>" + $('[name=matrik_number]').val() + "</td>\n" +
                        "<td>" + $('#student_name').val()+ "</td>\n" +
                        "<td>" + $('#student_ic').val() + "</td>\n" +
                        "<td>" + $('#student_birthplace').val() + "</td>\n" +
                        "<td>" + $('#faculty_name').val() + "</td>\n" +
                        "<td>" + $('#student_phone').val() + "</td>\n" +
                        "<td>" + $('#student_email').val() + "</td>\n" +
                        "<td width='3%'><a class='btn btn-outline btn-circle btn-sm purple edit-workers pull-right'><i class='fa fa-edit'></i>Edit</a></td>" +
                        "<td width='3%'><a class='btn btn-outline btn-circle btn-sm red del-owner pull-right'><i class='fa fa-remove'></i>Remove</a></td>" +
                        "</tr>\n")
                        );

                //clear all data upon close/save
                $(".modal").on("hidden.bs.modal", function(){
                    $("input").val("");
                    $('[name=optionsRadios4]',form).each(function(){
                        $(this).prop('checked',false).uniform('refresh');
                    });
                    $('#student_photo').attr('src', '');
                    $("[name=matrik_number]").select2("val", "");
                });

            };
        });