隐藏的名称属性<；输入>；不使用jQuery更新

我有一个动态构建的表单，用于在Drupal中使用预定义的输入构建旋转木马，当单击“添加幻灯片”按钮时，该表单应该得到更新。单击按钮时，表单确实会更新，但由于Drupal使用托管文件上载构建表单的方式，每个托管文件上载字段都需要更改两个元素。第一个元素得到更新，但第二个元素不会得到更新。需要更新的原因是，当表单提交时，它会获取所有幻灯片的值。不会更新的隐藏输入的名称属性为：image_file[fid]

页面上的Javascript：

var c = 0;
(function ($) {
  var nid;
  Drupal.carousel_npd_data_form = Drupal.carousel_npd_data_form || {};
  Drupal.behaviors.carousel_npd_data_form = {
    attach: function(context, settings) {
      var nid = Drupal.settings.carousel_npd_data_form.nid;
      var field_name = Drupal.settings.carousel_npd_data_form.field_name;
      var form_location = 'carousel/form';
      var node_carousel_form_location = 'carousel/form/' + nid + '/' + field_name;

      init();

      /**
       * Run some stuff before stuff happens.
       */
      function init() {
        var nodeResponse = retrieveNodeCarousel();
        var carousel_data = nodeResponse.response;
        if (carousel_data == '{carousel:[]}' || " " || "") {
          // carousel data for node is empty
        } else {
          // carousel data for node exists
        }
      }

      /**
       * Returns the carousel JSON data for a node.
       * @return {[JSON]} node carousel value
       */
      function retrieveNodeCarousel() {
        return $.ajax({
          async: false,
          type: "POST",
          url: Drupal.settings.basePath + node_carousel_form_location,
        });
      }

    }
  }
})(jQuery);

按钮点击的Javascript（它暂时存在于表单本身而不是js文件中）：

呈现的HTML：

<fieldset class="form-wrapper" id="carousel-editor"><legend><span class="fieldset-legend">Carousel</span></legend><div class="fieldset-wrapper"><div class="fieldset-description">Add information to the carousel here.</div><fieldset class="form-wrapper" id="carousel-editor-slide-0"><legend><span class="fieldset-legend">Slide</span></legend><div class="fieldset-wrapper"><div class="form-item form-type-textfield form-item-carousel-image-title">
  <label for="edit-image-title">Image Title </label>
 <input type="text" id="edit-image-title" name="carousel_image_title" value="" size="60" maxlength="128" class="form-text">
</div>
<div id="edit-image-file-ajax-wrapper"><div class="form-item form-type-managed-file form-item-carousel-image-file">
  <label for="edit-image-file">Upload an Image </label>
 <div id="edit-image-file" class="form-managed-file"><input type="file" id="edit-image-file-upload" name="files[image_file]" size="22" class="form-file"><input type="hidden" name="image_file[fid]" value="0">
</div>
</div>
</div><div class="form-item form-type-textarea form-item-carousel-video-embed">
  <label for="edit-video-embed">Video Embed </label>
 <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea"><textarea id="edit-video-embed" name="carousel_video_embed" cols="60" rows="5" class="form-textarea"></textarea><div class="grippie"></div></div>
</div>
<div class="form-item form-type-textarea form-item-carousel-text">
  <label for="edit-text">Text </label>
 <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea"><textarea id="edit-text" name="carousel_text" cols="60" rows="5" class="form-textarea"></textarea><div class="grippie"></div></div>
</div>
</div></fieldset>
</div></fieldset>

将信息传送到此处的传送带。幻灯片
图像标题
上传图像
视频嵌入
正文

单击按钮后，HTML如下所示：

<fieldset class="form-wrapper" id="carousel-editor"><legend><span class="fieldset-legend">Carousel</span></legend><div class="fieldset-wrapper"><div class="fieldset-description">Add information to the carousel here.</div><fieldset class="form-wrapper" id="carousel-editor-slide-0"><legend><span class="fieldset-legend">Slide</span></legend><div class="fieldset-wrapper"><div class="form-item form-type-textfield form-item-carousel-image-title">
  <label for="edit-image-title">Image Title </label>
 <input type="text" id="edit-image-title" name="carousel_image_title" value="" size="60" maxlength="128" class="form-text">
</div>
<div id="edit-image-file-ajax-wrapper"><div class="form-item form-type-managed-file form-item-carousel-image-file">
  <label for="edit-image-file">Upload an Image </label>
 <div id="edit-image-file" class="form-managed-file"><input type="file" id="edit-image-file-upload" name="files[image_file]" size="22" class="form-file"><input type="hidden" name="image_file[fid]" value="0">
</div>
</div>
</div><div class="form-item form-type-textarea form-item-carousel-video-embed">
  <label for="edit-video-embed">Video Embed </label>
 <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea"><textarea id="edit-video-embed" name="carousel_video_embed" cols="60" rows="5" class="form-textarea"></textarea><div class="grippie"></div></div>
</div>
<div class="form-item form-type-textarea form-item-carousel-text">
  <label for="edit-text">Text </label>
 <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea"><textarea id="edit-text" name="carousel_text" cols="60" rows="5" class="form-textarea"></textarea><div class="grippie"></div></div>
</div>
</div></fieldset><fieldset class="form-wrapper" id="carousel-editor-slide-1"><legend><span class="fieldset-legend">Slide</span></legend><div class="fieldset-wrapper"><div class="form-item form-type-textfield form-item-carousel-image-title">
  <label for="edit-image-title">Image Title </label>
 <input type="text" id="edit-image-title-1" name="carousel_image_title_1" value="" size="60" maxlength="128" class="form-text">
</div>
<div id="edit-image-file-ajax-wrapper"><div class="form-item form-type-managed-file form-item-carousel-image-file">
  <label for="edit-image-file">Upload an Image </label>
 <div id="edit-image-file" class="form-managed-file"><input type="file" id="edit-image-file-upload-1" name="files[image_file]" size="22" class="form-file"><input type="hidden" name="image_file[fid]" value="0">
</div>
</div>
</div><div class="form-item form-type-textarea form-item-carousel-video-embed">
  <label for="edit-video-embed">Video Embed </label>
 <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea"><textarea id="edit-video-embed-1" name="carousel_video_embed_1" cols="60" rows="5" class="form-textarea"></textarea><div class="grippie"></div></div>
</div>
<div class="form-item form-type-textarea form-item-carousel-text">
  <label for="edit-text">Text </label>
 <div class="form-textarea-wrapper resizable textarea-processed resizable-textarea"><textarea id="edit-text-1" name="carousel_text_1" cols="60" rows="5" class="form-textarea"></textarea><div class="grippie"></div></div>
</div>
</div></fieldset>
</div></fieldset>

将信息传送到此处的传送带。幻灯片
图像标题
上传图像
视频嵌入
正文
滑动
图像标题
上传图像
视频嵌入
正文

所有其他输入都会更新它们的名称和/或ID，因此我不确定为什么隐藏元素没有得到更新

---

编辑：我刚刚意识到还有另一个ID为的标签也在复制，但并没有告诉ID更新。虽然我不认为这是导致hidden属性无法更新的原因，但我将解决这一问题。

这不起作用的原因是因为JS中的这一行：

(jQuery)(\'#carousel-editor-slide-\'+c+\' :input[name^=\'+field_name+\']\').attr(\'name\', new_name);

由于这是内联JS并嵌入到PHP中，因此很难解决该问题。我最后都是在家里做的。从那以后，我找到了一种方法，可以将我的代码全部移出PHP，这本身就是一种方法

代码的工作行如下所示：

$('#carousel-editor-slide-'+c).find('input[name^=\''+field_name+'\']').attr('name', new_name);

---

这里的主要修正是field_name变量现在被包装在它自己的转义引号中。

typo

onclick=“avascript:

@MichaelLaffargue这仍然有效；）@MichaelLaffargue-在提出问题时键入，而不是在代码中键入，感谢您指出这一点。这是一堆不可读的代码。您应该真正避免内联scripting@A.Wolff-我会尽量改进格式。

$('#carousel-editor-slide-'+c).find('input[name^=\''+field_name+'\']').attr('name', new_name);