从 bootstrap 模态表单中删除预填充的内容

Question

我正在为 'myData' 数组中的每个对象创建 div。另外，我有一个 bootstrap 模式，它有一个可以添加外部对象的表单。这个外部对象将依次添加到我的数组 'myData' 并以与上述相同的格式显示它。

我的问题是，在成功创建外部对象后，我应该能够 -

单击 'save' 按钮并成功创建外部对象后关闭模式。
每当我单击 'Add external object' 按钮时，模态中的表单不应包含任何预填充内容。

我试过使用重置方法来做到这一点，但它似乎不起作用。你能帮我修一下吗？这是我的完整代码 -

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

将此代码添加到 createData 函数，以在创建数据后关闭模式：

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

从 bootstrap 模态表单中删除预填充的内容

Remove pre-populated content from bootstrap modal form

jquery

arrays

object

bootstrap-modal

reset