隐藏 <input> 上的名称属性未更新为 jQuery

Question

我有一个动态构建的表单，用于在 Drupal 中构建带有预定义输入的轮播，单击 "Add Slide" 按钮时应该更新这些输入。单击按钮时，表单会更新，但由于 Drupal 使用托管文件上传构建表单的方式，每个托管文件上传字段需要更改两个元素。第一个元素得到更新，但第二个元素不会得到更新。这需要更新的原因是当表单提交时，它会获取所有幻灯片的值。不会更新的隐藏input的name属性为：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 文件中）：

        event.preventDefault();
        var sheep = (jQuery)(\'#carousel-editor-slide-\'+c);
        c++
        var klone = (jQuery)(sheep).clone().attr(\'id\', \'carousel-editor-slide-\'+c);
        console.log(klone);
        (jQuery)(klone).insertAfter(sheep);
        (jQuery)(\'#carousel-editor-slide-\'+c+\' :input\').each(function(i, obj){
          console.log(obj);
          var field_id = (jQuery)(obj).attr(\'id\');
          if (field_id.length > 0) {
            var new_id = field_id+\'-\'+c;
            (jQuery)(\'#carousel-editor-slide-\'+c).find(\'#\'+field_id).attr(\'id\', new_id);
          }
          var field_name = (jQuery)(obj).attr(\'name\');
          var new_name = field_name+\'_\'+c;
          console.log(new_name);
          (jQuery)(\'#carousel-editor-slide-\'+c+\' :input[name^=\'+field_name+\']\').attr(\'name\', new_name);
          console.log((jQuery)(\'#carousel-editor-slide-\'+c+\' :input[name^=\'+new_name+\']\'));
        });

已渲染 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>

所有其他输入都更新了它们的名称 and/or ID，所以我不确定为什么隐藏元素没有更新。

编辑：我刚刚意识到还有另一个带有 ID 的标签也被复制了，但是没有通知 ID 更新。虽然我认为这不是导致 hidden 的属性未更新的原因，但我将解决这个问题。

Answer 1

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

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

由于这既是内联 JS 又是嵌入 PHP 的，因此很难解决这个问题。我最终在 JS Fiddle. From there I found a way to move my code out of PHP all together, which was in it of itself a difficult problem.

完成了这一切

代码的工作行是这样的：

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

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

隐藏 <input> 上的名称属性未更新为 jQuery

Name attribute on hidden <input> not updating with jQuery

html

forms

jquery

drupal-7