Question

我想通过jquery从modal1到另一个模态进行表单预览。我在modal2中构建了表单，并尝试将其数据传递到modal1。但它不适用于下一个模式。

无法从modal2传递数据 - 未定义formData
我需要 <div class="modal fade" id="xModal" tabindex="-1" role="dialog" aria-labelledby="xModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="submit" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="xModalLabel"><em class="fa fa-spinner fa-spin"></em> form1</h4> </div> <div class="modal-body"> <form id="form1"> <input type="text" class="form-control" id="fname" value="hello" /> <input type="text" class="form-control" id="lname" value="kitty" /> <button type="submit" data-dismiss="modal" data-target="#prvwModal" data-toggle="modal"> preview </button> </form> </div> <div class="modal-footer"></div> </div> </div> </div>  <div class="modal fade" id="prvwModal" tabindex="-1" role="dialog" aria-labelledby="prvwModalLabel"> <div class="modal-dialog" role="document"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button> <h4 class="modal-title" id="prvwModalLabel"><em class="fa fa-spinner fa-spin"></em>prvw loading...</h4> </div> <div class="modal-body"></div> <div class="modal-footer"></div> </div> </div> </div>从提交的

HTML

$('#xModal').modal('show');

$('#xModal').on('shown.bs.modal', function() {
  $('#form1').on('submit', function(e) {
    e.preventDefault();
    console.log('xModal sumitted');
    var formData = $(this).serialize();
    $('#prvwModal').find('.modal-body').text(formData);
    $('#prvwModal').find('.modal-title').text('#form1 Preview');
  });
  console.log('xModal loaded');
});

$('#prvwModal').on('shown.bs.modal', function() {
  console.log('prvwModal loaded'+formData);
})

JQUERY

<div class="tabs">
  <div class="blueTab">
    <div class="blueTab__container">

    </div>
  </div>

  <div class="brownTab">
    <div class="brownTab__container">

    </div>
  </div>
</div>

.tabs {
  position: relative;
  margin-left: 853px;
}

.brownTab {
  position: absolute;
  .brownTab__container {
    background-image: url(https://i.imgur.com/Fd49HkH.png) !important;
    background-repeat: no-repeat !important;
    width: 400px;
    height: 853px;
  }
}

.blueTab {
  position: absolute;
  .blueTab__container {
    background-image: url(https://i.imgur.com/F5qg6xo.png) !important;
    background-repeat: no-repeat !important;
    width: 400px;
    height: 873px;
  }
}

let brownTabElement = document.getElementsByClassName('brownTab')[0]
let blueTabElement = document.getElementsByClassName('blueTab')[0]


brownTabElement.addEventListener('click', brownTabHandler, false)

blueTabElement.addEventListener('click', blueTabHandler, false)

function brownTabHandler() {
    alert('brownTab')
}

function blueTabHandler() {
    alert('blueTab')
}

Jsfiddle：https://jsfiddle.net/yfpruygs/7/

Answer 1

您的输入需要一个名称字段才能获取表单数据：

<button type="button" data-dismiss="modal" data-target="#prvwModal" data-toggle="modal">

如果您不打算使用预览按钮来实际提交表单，则还需要将按钮类型更改为“按钮”。

  $('#form1').on('click', function(e) {
    console.log('xModal sumitted');
    var formData = $(this).serialize();
    $('#prvwModal').find('.modal-body').text(formData);
    $('#prvwModal').find('.modal-title').text('#form1 Preview');
  });

然后你可以使用点击事件......

{{1}}

https://jsfiddle.net/yfpruygs/9/

从另一个模态中的模态预览表单数据

1 个答案: