javascript - jQuery - 使用同时填充的另一个输入字段的值更改输入字段的名称

Question

我正在开发一个动态表单，您可以在其中添加或删除字段，Here you can find the fiddle您找到的第一个按钮是添加指标。由此代码生成:

• 输入字段指标
• 按钮添加标签

在此字段中，用户可以使用单击添加指标时生成的按钮添加标签添加标签。当您单击添加标签按钮时，会生成两个字段:

• 输入字段Id
• 输入字段值

为了序列化整个表单，我需要生成 Html 代码(但这不是问题点)，结果如下:

<input type="text" name="metrics[0][name]" value="Text 0"> // Metric
<input type="text" id="TagId0" name=" "> //Tag Id
<input type="text" id="TagValue" name="metrics[0][tags][][0]">

问题:我需要(当我用 id="TagId0" 填充字段时)我选择的值将立即转到带有 id="TagValue" 的字段名称。该字段的结果必须如下所示:

假设我在 TagId0 上写了单词“hello”，字段将变为:

<input type="text" id="TagValue" name="metrics[0][tags][hello][0]">

如果可以的话，如何做到？谢谢

Answer 1

您可以使用change方法来检测字段值的更改。然后使用 attr 方法更改名称。希望我理解正确。这里是修改后的JSFIDDLE .

$(document).on('change', '#InputsWrapper .inputID', function(){
    thisVal = $(this).val();
    thisName = $(this).siblings('.inputVal').attr('name');
    newName = thisName.replace('[tags][', '[tags][' + thisVal);
    $(this).siblings('.inputVal').attr('name', newName);
});

更改字段值后不要忘记按 Enter :)

编辑:我还在您要附加的字段中添加了两个类。 .inputID 和 .inputVal。我希望这有帮助!