Javascript 将所选图像url应用于隐藏表单输入类型

我尝试使用javascript将图像url应用于CSS背景属性，并将该url放入隐藏表单输入

下面的javascript是这样工作的：弹出模式并显示一组图像。单击图像链接时，模式关闭，图像应用于容器的背景。所有这些都非常有效*注意，没有submit按钮，这个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>

$（'#exampleModal.modal body img'）。单击（函数（）{
const src=$（this.attr（“src”）；
$（'.my container>.middle'）.css（“背景图像”，url（${src}）`）；
jQuery.noConflict（）；
$（'exampleModal'）.modal（'hide'）；
$（'.modal background'）.remove（）；
});

我可以为数据库端插入所需的内容，但我缺少了这里的关键组件，那就是图像URL。我需要在单击图像并调用上面的javascript时，将图像URL传递到以下模式表单中显示的输入“页面内容”。完成后，我可以完成AJAX调用

这是一个带有表单的模式，其中包含面板类型的隐藏输入（8）和内容的隐藏输入（我想要的是所选的图像URL）

">

---

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

try$（“#bgContent'）.val（src）；在scripts click函数中。我认为这是可行的，但我正在使用控制台日志进行快速测试。我想我打印的是错误的，我会只执行console.log（“#bgContent”）？如果要登录到控制台，则执行console.log（$（“#bgContent”）.val（）

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