부트 스트랩 모달 양식에서 미리 채워진 내용을 제거하십시오.

Question

'myData'배열에서 각 객체의 div를 만듭니다. 또한 외부 객체를 추가 할 수있는 폼이있는 부트 스트랩 모달을 사용했습니다. 그러면이 외부 객체가 내 배열 'myData'에 추가되고 위에서 언급 한 것과 같은 형식으로 표시됩니다.

내 문제는, 외부 객체의 생성에 성공하면, 내가 할 수 있어야한다 - '저장'버튼을 외부 개체의 성공적인 창조의 클릭에 모달 닫기

1. .

2. '외부 개체 추가'버튼을 클릭 할 때마다 모달의 양식에 사전 오염 된 콘텐츠가 없어야합니다.

재설정 방법을 사용하여이 작업을 시도했지만 작동하지 않는 것 같습니다. 고칠 수 있도록 도와 주시겠습니까?

$('#extData').modal('hide'); 

Read more here

: 데이터가 생성되었을 때 모달을 닫으려면 createData 기능이 코드를 추가

var myData = [{ 
 
    company: "ABC", 
 
    url: "www.abc.com", 
 
    type: "internal" 
 
}, { 
 
    company: "CDE", 
 
    url: "www.cde.com", 
 
    type: "internal" 
 
}, { 
 
    company: "DEF", 
 
    url: "www.def.com", 
 
    toolName: "reportTool", 
 
    toolURL: "http://www.toolURL.com", 
 
    type: "internal" 
 
}, { 
 
    company: "EFG", 
 
    url: "www.efg.com", 
 
    type: "internal" 
 
}, { 
 
    company: "FGH", 
 
    url: "www.fgh.com", 
 
    type: "internal" 
 
}]; 
 

 
$('#createData').click(function() { 
 
    createDisplay(); 
 
}); 
 

 
function createDisplay() { 
 
    $('.container').empty(); 
 
    myData.forEach(function(obj) { 
 
    $('.container').append(
 
    $('<div>').addClass('box').append(
 
    $('<label>').text('Company Website: '), 
 
     $('<a>').addClass('compUrl').attr('href', obj.url).text(obj.company), 
 
    ) 
 
) 
 
    }); 
 
} 
 

 
var objIndex; 
 
$(document).ready(function(){ 
 

 

 

 
var $toolName = $('#newToolName'); 
 
var $toolURL = $('#newToolUrl'); 
 
var $toolInputs = $($toolName).add($toolURL); 
 

 
    $toolInputs.on('change', function(e) { 
 

 
    var toolName = $toolName.val(); 
 
    var toolURL = $toolURL.val(); 
 

 
    $toolInputs.prop('required', toolName || toolURL); 
 

 
    }); 
 

 

 
    $('#createForm').submit(function(e){ 
 
    var toolName = $toolName.val() 
 
    var toolURL = $toolURL.val() 
 

 
    var toolFilled = !!toolName && !!toolURL; 
 
    var toolUnfilled = !toolName && !toolURL; 
 

 
    if (toolFilled || toolUnfilled) { 
 
    createData(objIndex); 
 
    return false; 
 
    } 
 
    return false; 
 
    }); 
 
}); 
 

 
function createData() { 
 
    companyName = $('#companyName').val(); 
 
    companyUrl = $('#companyUrl').val(); 
 
    toolName = $('#newToolName').val(); 
 
    toolURL = $('#newToolUrl').val(); 
 
    var extObj = { 
 
    company: companyName, 
 
    url: companyUrl, 
 
    toolName: toolName, 
 
    toolURL: toolURL, 
 
    type: 'external' 
 
    } 
 
    myData.push(extObj); 
 
    createDisplay(); 
 
    alert('Data created successfully!'); 
 
    //$('#createForm').reset(); 
 
}

.box { 
 
    height: 100px; 
 
    background-color: skyblue; 
 
    border: 1px solid black; 
 
    border-radius: 4px; 
 
    margin-top: 5px; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.0/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/> 
 
<div class="container"> 
 

 
</div> 
 

 
<button id="createData" class="btn btn-info">Create divs</button> 
 
<button type="button" class="btn btn-info" data-toggle="modal" data-target="#extData">Add external object</button> 
 
<!-- Modal --> 
 

 
<div class="modal fade" id="extData" tabindex="-1" role="dialog" aria-labelledby="update-data" aria-hidden="true"> 
 
    <div class="modal-dialog"> 
 
    <div class="modal-content"> 
 
    <!-- Modal Header --> 
 
    <div class="modal-header"> 
 
     <button type="button" class="close" data-dismiss="modal"> 
 
     <span aria-hidden="true">&times;</span> 
 
     <span class="sr-only">Close</span> 
 
     </button> 
 
    <h4 class="modal-title" id="myModalLabel">Update Data</h4> 
 
    </div> 
 
    <form id="createForm"> 
 
    <!-- Modal Body --> 
 
     <div class="modal-body"> 
 
     <div class="form-group"> 
 
     <label class="col-sm-4 control-label" for="companyName">Company Name</label> 
 
     <div class="col-sm-8"> 
 
     <input type="text" class="form-control" id="companyName" placeholder="Company Name" required /> 
 
     </div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label class="col-sm-4 control-label" for="companyUrl">Website</label> 
 
     <div class="col-sm-8"> 
 
     <input type="url" class="form-control" id="companyUrl" placeholder="Company URL" required /> 
 
     </div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label class="col-sm-4 control-label" for="newToolName">Tool Name</label> 
 
     <div class="col-sm-8"> 
 
     <input type="text" class="form-control" id="newToolName" /> 
 
     </div> 
 
     </div> 
 
     <div class="form-group"> 
 
     <label class="col-sm-4 control-label" for="newToolUrl">Tool URL</label> 
 
     <div class="col-sm-8"> 
 
     <input type="url" class="form-control" id="newToolUrl" /> 
 
     </div> 
 
     </div> 
 
    </div> 
 
    <!-- Modal Footer --> 
 
    <div class="modal-footer"> 
 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
     <button class="btn btn-primary">Save</button> 
 
    </div> 
 
    </form> 
 
    </div> 
 
    </div> 
 
</div>

Answer 1

- 여기 내 전체 코드입니다 그 후 다음과 같이 양식을 다시 설정하십시오 :

$('#createForm')[0].reset(); 

w3schools documentation에 따르면이 작업은 formObject에서 수행해야하며 jQuery 객체에서 시도한 것입니다.