使用 JQuery 从模态（引导程序）传递输入数组答案

【问题标题】：Pass input array from modal (bootstrap) with JQuery使用 JQuery 从模态（引导程序）传递输入数组
【发布时间】：2020-04-19 08:42:07
【问题描述】：

我有一个表单，我想用一个模态对话框来填充它。它使用输入数组，但由于这些输入在

标记之外，因此不会发布。

这里是模态代码：

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
   <div class="modal-dialog modal-lg" role="document">
      <div class="modal-content">
         <div class="modal-body">
            <div class="form-row field" id="auteur1">
               <div class="form-group col-md-5" style="margin-bottom:0">
                  <input autocomplete="off" class="form-control auto_c" name="name_add[]" type="text" />
               </div>
               <div class="form-group col-md-4" style="margin-bottom:0">
                  <input type="text" class="form-control" name="firstname_add[]" />
               </div>
               <input type="hidden" name="id_add[]" value="">
            </div>
         </div>
         <div class="modal-footer">
            <button type="button" class="save btn btn-qvq">Submit</button>
         </div>
      </div>
   </div>
</div>

可以有很多行，这就是使用数组的原因。

我想填写

标签内的 name[]、firstname[] 和 id[] 数组：

<input type="hidden" id="name" name="name[]" value="">
<input type="hidden" id="firstname" name="firstname[]" value="">
<input type="hidden" id="id" name="id[]" value="">

我想它应该是类似的东西，但它不起作用。（仅限姓名示例）

$(function() {
   $('.save').on('click', function() {
      $.each($("input[name='name_add[]']"), function(idx, value) {
         $("input[name='name[]']").eq(idx).val(value);
      });
   }
}

任何帮助将不胜感激。谢谢。

编辑

根据我尝试过的 Steph74 回答：

$('.save').on('click', function(){
   $.each($('input[name="name_add[]"]'), function(idx, v) {
      $('input[name="name[]"]').eq(idx).val(v.value)
   })
})

name[] 现在已填充，但如果有多个 name_add[] 输入，则仅使用第一个值

【问题讨论】：

您可能需要考虑在 JS 中声明数组，而不是使用 HTML 元素来存储数据。你可能想看看这个documentation
您想使用自动完成设置多个 name_add[] 吗？

标签： javascript jquery arrays forms post

【解决方案1】：

测试这段代码：

$('.save').on('click', function(){
    $.each($('input[name="name_add[]"]'), function(idx, v) {
        $('input[name="name[]"]').eq(idx).val(v.value)
    })
})

【讨论】：

【解决方案2】：

您好，我不明白到底是什么问题，但如果您想使用模态字段添加多个字段，您可以使用类似的内容：

<div class="modal fade" id="Modal" tabindex="-1" role="dialog" aria-labelledby="ModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
        <div class="modal-body">
            <div class="form-row field" id="auteur1">
                <div class="form-group col-md-5" style="margin-bottom:0">
                    <input autocomplete="off" class="form-control auto_c" name="name_add[]" type="text"/>
                </div>
                <div class="form-group col-md-4" style="margin-bottom:0">
                    <input type="text" class="form-control" name="firstname_add[]"/>
                </div>
                <input type="hidden" name="id_add[]" value="">
            </div>
        </div>
        <div class="modal-footer">
            <button type="button" class="save btn btn-primary" onclick="addItem()">Submit</button>
        </div>
    </div>
</div>

<script>
function addItem() {
    var name = $('#Modal input[name="name_add[]"]').val()
    var firstname = $('#Modal input[name="firstname_add[]"]').val()
    $('form').append($('<input type="hidden" id="name" name="name[]" value="">').val(name))
    $('form').append($('<input type="hidden" id="firstname" name="firstname[]" value="">').val(firstname))
    $('form').append($('<input type="hidden" id="id" name="id[]" value="">'))
}

您必须从表单中删除隐藏字段，并且可以使用函数 javascript 附加它们。如果我们添加两个项目：

姓名：约翰，名：斯蒂夫
姓名：jhon2，名：steeve2

我们可以在提交表单后使用 php 获取它们

echo $_REQUEST[name][0].$_REQUEST[firstname][0] ==> jhon steeve
echo $_REQUEST[name][1].$_REQUEST[firstname][1] ==> jhon2 steeve2

如果问题解决了，请告诉我到底是什么问题

【讨论】：