Question

基本上我在第一种形式中有2种形式我有一个textarea而第二种形式在模态中打开

此处是表单1 的代码。

    <div>
      <textarea name="dynamic-content-unit" id="dynamic-content-unit"
         class="form-control" rows="8" readonly=""></textarea>
   </div>

表单2在bootstrap模式中打开

<div id="unit-of-content" class="modal" role="dialog" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<form action="" method="POST" id="content-unit-frm" class="form-horizontal" enctype="multipart/form-data">
<input type="hidden" name="_token" value="{{ csrf_token() }}">
    <div class="form-group">
        <div class="col-xs-12"><b>Unit Label</b>
        &nbsp;&nbsp;&nbsp;&nbsp;
        <input type="checkbox" name="is_default" value="1"> Make Default
        </div><br><br>
        <div class="col-md-12">
            <div class="input-icon right">
                <i class="fa"></i>
                <input type="text" name="label" id="label" value="" class="form-control" />
            </div>
        </div>
        <div class="col-md-12">
            <div class="input-icon right">
                <i class="fa"></i>
                <textarea name="content" id="content"></textarea>
            </div>
        </div>
    </div>

 <button type="submit" id="unit-submit" class="btn green">Submit</button>
</form>

JQuery的

<script>
  $('#unit-content').click(function() {
        new_val = $('#label').val();
        $('#dynamic-content-unit').val(new_val);
    });
   </script>

在上面的表格中我有3个输入字段

一个是复选框

两个输入名称

三textarea

现在我想如果从模态点击提交按钮，上述所有数据都应该以1的 textarea 进入

名称（标签）应该是可见的，而其他应该是隐藏的

如果选中复选框，则应使用名称（标签）关键字默认值

在 textarea 名称应该带有编辑按钮，如果编辑按钮单击它应该按模式重新加载此数据。

如果以模态给出的第二次数据，它应该在第二行中相同，依此类推，如果复选框选中了模态2，那么默认值应该是2并且应该从1中删除

感谢您的帮助

Answer 1

更新后，我建议您将form1更改为基于class的结构，而不是基于id。像这样

首先创建一个自定义模板（#hidden-template），每次单击提交时都需要添加该模板。

<script id="hidden-template" type="text/x-custom-template">
  <div class="dynamic-content-container">
    <span class="dynamic-content-unit"></span>
    <span class="edit-icon glyphicon glyphicon-edit"></span>
  </div>
</script>

<div class="dynamic-content-container">Just for first append</div>

我们的想法是在每次点击时将上述模板（#hidden-template）添加（附加）到最后 .dynamic-content-container div。像这样

var template = $('#hidden-template').html();

$('#unit-submit').click(function() {
  $(".dynamic-content-container").last().after(template);
  $('.dynamic-content-container').last().find(".dynamic-content-unit").text($('#label').val());
});

然后使用JQuery手动打开模式，并将文本从相应的div复制到#label字段。像这样

$(document).on('click','.edit-icon',function() {
  $('#unit-of-content').modal('show');
  $('#label').val($(this).siblings(".dynamic-content-unit").text());
});

由于我们动态地将.edit-icon添加到DOM，.click将不起作用，请改用.on('click' - 事件委派

将模态值以隐藏的形式放在textarea中，并在编辑时加载

1 个答案: