Вставить Модальное входное значение в форму/таблицу перед отправкой

Question

Здравствуйте, ребята. Мне нужна помощь, чтобы вставить входные значения, которые находятся внутри модала (который извлекается из базы данных с использованием автозаполнения), в таблицы для предварительного просмотра перед отправкой формы.

Вот модальный изображение -> и вставки данных должно происходить после нажатия на кнопку «Добавить Владелец»,

здесь изображение стола -> который будет добавлен каждый раз добавляется новый владелец строки.

Ниже мой 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() метод. Вышеперечисленное только сброс значения кода в качестве рабочего кода. Мне нужна помощь с последних 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", ""); 
       }); 

      }; 
     });