부트 스트랩 4에서 모달 데이터를 쉽게 얻을 수있는 방법이 있습니까?

지금까지 Vex-Modals을 사용해 왔지만 현재 부트 스트랩 4를 시도하고 싶습니다. 나는 전체 Modal-Page of bootstrap.com을 읽었지 만, 형식의 양식 데이터를 쉽게 얻을 수있는 방법을 찾지 못했습니다. 내가 지금까지 발견 무엇부트 스트랩 4에서 모달 데이터를 쉽게 얻을 수있는 방법이 있습니까?

이 가능하다 :

$('#myModal').on('hide.bs.modal', function (e) { 
    // ask value of $("#form-input1") 
    // ask value of $("#form-input2") 
    // ask value of $("#form-input3") 
})

벡스는 그 매개 변수 data (객체) 콜백와 함께 작동 내가 Ok를 클릭하면 그 안에 저장된 모든 값이 콜백이 호출됩니다 .

출처

2017-12-30 Alpha

가장 쉬운 방법은 모달의 마크 업을 <form>으로 만드는 것입니다. 이렇게하면 this과 같이 다양한 이벤트 (예 : hidden.bs.modal) 핸들러의 .modal() 및 <form> 오브젝트에 모두 액세스 할 수 있습니다.

양식 자체에 액세스 할 수있는 경우 .serializeArray() jQuery 방법을 사용하거나 아래 예처럼 기본 FormData 클래스를 사용할 수 있습니다.

$('#modal-form').on('hidden.bs.modal', function (event) { 
 
    // `this` is the modal window, which is also a `<form>` in our case 
 

 
    // Option 1: using `.serializeArray()` of jQuery 
 
    var fieldsAsArray = $(this).serializeArray(); 
 
    console.log('fieldsAsArray', fieldsAsArray); 
 

 
    // Option 2: using native `FormData` object 
 
    var fieldsAsFormData = new FormData(this); 
 
    console.log('fieldsAsFormData', fieldsAsFormData); 
 
});

<!-- Note the `<form>` tag --> 
 
<form class="modal fade" id="modal-form" tabindex="-1" role="dialog" aria-labelledby="modal-dialogLabel" aria-hidden="true"> 
 
    <div class="modal-dialog" role="document"> 
 
     <div class="modal-content"> 
 
      <div class="modal-header"> 
 
       <h5 class="modal-title" id="modal-dialogLabel">Modal title</h5> 
 
       <button type="button" class="close" data-dismiss="modal" aria-label="Close"> 
 
        <span aria-hidden="true">&times;</span> 
 
       </button> 
 
      </div> 
 
      <div class="modal-body"> 
 

 
       <!-- actual form markup --> 
 
       <div class="form-group"> 
 
        <label for="field1">Example label</label> 
 
        <input name="field1" type="text" class="form-control" id="field1" placeholder="Example input"> 
 
       </div> 
 
       <div class="form-group"> 
 
        <label for="field2">Another label</label> 
 
        <input name="field2" type="text" class="form-control" id="field2" placeholder="Another input"> 
 
       </div> 
 
       <!-- /actual form markup --> 
 

 
      </div> 
 

 
      <div class="modal-footer"> 
 
       <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button> 
 
       <button id="save" data-dismiss="modal" type="submit" class="btn btn-primary">Save changes</button> 
 
      </div> 
 
     </div> 
 
    </div> 
 
</form> 
 

 
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#modal-form"> 
 
    Open modal form 
 
</button> 
 

 

 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/css/bootstrap.min.css" rel="stylesheet"/> 
 
<script src="https://code.jquery.com/jquery-3.2.1.slim.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-beta.3/js/bootstrap.min.js"></script>

참고 : data-dismiss="modal"뿐만 아니라 속성이 있기 때문에 "변경 사항 저장"버튼 타입 의 비록를 제출 양식은 직접이 방법으로 제출되지 않습니다. 이 속성은 event.preventDefault(); 호출로 클릭 이벤트를 캡처합니다. 폼 데이터를 먼저 제출하지 않고 작업하기를 원할 때 시나리오에 맞다고 생각합니다.

출처

2017-12-30 12:43:20 dferenc

해당 양식의 모든 양식 데이터를 가져 오려면 serialize 기능을 사용할 수 있습니다. 그러나 폼 데이터 세트에서 js 객체를 생성하려면 다른 옵션이 있습니다. serializeArray 기능을 사용할 수 있습니다. 다음은 직렬화 된 배열을 js 객체로 변환하는 방법을 찾을 수있는 스택 오버 플로우 post입니다. 희망이 당신의 문제를 해결할 것입니다.

출처

2017-12-30 10:18:06

부트 스트랩 4에서 모달 데이터를 쉽게 얻을 수있는 방법이 있습니까?

답변

관련 문제