Jquery 将模态值以隐藏形式放入文本区域，并在编辑时加载

基本上，我有两个表格在第一个表格中，我有一个文本区域，而第二个表格在模态中打开

这是表1的代码

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

表格2以引导模式打开

<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>

$（“#单元内容”）。单击（函数（）{
new_val=$（'#label'）.val（）；
$（“#动态内容单元”）.val（新的#val）；
});

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

一个是复选框

双输入名称

三个文本区

现在我想，如果从模式中单击submit按钮，所有上述数据都应该进入表单1的文本区域

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

如果选中复选框，则应写入带有名称（标签）关键字的默认值

在文本区域中，如果单击“编辑”按钮，名称应带有编辑按钮，它应按原样在模式中重新加载此数据

若模式中给出的第二次数据应与第二行中的数据相同，依此类推，若模式2的复选框被选中，则默认值应为2，并应从1中删除

---

感谢更新后的帮助

，我建议将表单1更改为基于

类

的结构，而不是基于

id

的结构。像这样

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

首先创建一个自定义模板（

#隐藏模板

），每次单击提交时都需要添加该模板

<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>

然后使用JQuery手动打开模式，并将文本从相应的div复制到

#label

字段。像这样

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

由于我们将

.edit图标

动态添加到DOM中，

.click

将不起作用，请使用

.on（'click'

代替-事件委派

---

@NikhilNanjappa我试过在文本中输入值是为了名称，但不知道如何为editfine设置值，你能展示一下你的尝试吗？也许小提琴对我们来说会快得多both@NikhilNanjappa我在上面的问题中添加了jquery，它在textbox中的名称问题是什么？所以现在您想添加一个编辑按钮（我假设它现在不存在）并将值返回到

#label

输入字段？我在问题中问到，可以有多个标签，每行一个，每个标签都有自己的数据和自己的编辑按钮。您肯定不清楚您需要什么。首先，“可以有多个标签”您的问题中没有提到。第二，您所说的“每行一个，每个标签都有自己的数据”是什么意思？您的标签是一个

id

，这意味着不能有多个元素具有该id（

#label

）它的平均模式是多次提交，因此多次标签和数据。如果我的理解是正确的，您计划每次将

#label

的不同值“附加”到文本区域（form1）？嗯，那么您的方法可能会更好。让我更新代码