将选定的图像URL应用于隐藏的表单输入类型

Question

我正在尝试使用可工作的JavaScript，该图像将图像网址应用于CSS背景属性，并将该网址放入隐藏的表单输入中。

以下javascript的工作方式如下：弹出模式对话框，并显示图像数组。单击图像链接后，将关闭模态并将图像应用于容器的背景。所有这些完美地工作。 *注意，没有提交按钮，通过单击数组中的图像可以调用此JS

<script type="text/javascript">
$('#exampleModal .modal-body img').click(function() {
  const src = $(this).attr("src");
  $('.my-container > .middle').css("background-image", `url(${src})`);
  jQuery.noConflict();
  $('#exampleModal').modal('hide');
  $('.modal-backdrop').remove();

});
</script>

我可以执行数据库端所需的插入操作，但是我在这里缺少关键组件，那就是图像URL。单击图像并调用上述javascript时，我需要某种方式来将图片网址传递到下面的模式形式所示的输入“ page_content”中。完成后，我就可以结束AJAX调用了。

这里是模态，其形式为面板类型（8）的隐藏输入和内容（我要成为所选图像的URL）的隐藏输入

<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog" role="document">
    <div class="modal-content">

      <div class="modal-body">

        <?php foreach($imageResult as $im): ?>
          <?php if($im['type'] == 'background' ) {?>
        <img style="width: 200px; height: 200px;" src="<?php echo $im['url'] ?>">
      <?php } ?>
      <?php endforeach ?>
      </div>

      <form  id="bgForm" method="post">
          <input type="hidden" name="page_content" id="bgContent" value="">
          <input type="hidden" name="panel_type" value="8">
      </form>

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

将URL应用于CSS时，如何同时将其传递给隐藏的表单类型？