Question

我正在使用动态表单添加或删除字段，Here you can find the fiddle 您找到的第一个按钮是Add Metric。从这里代码生成：

输入字段Metric
按钮Add Tag

在此字段中，用户可以添加带有按钮Add Tag的标记，单击“添加度量标准”时会生成该标记。单击Add Tag按钮时，会生成两个字段：

输入字段Id
输入字段Value

为了序列化整个表单，我需要生成的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

你可以写一些像TagId-0这样的字段的id和像tagfield这样的常见类，这样你就可以拆分值来获取索引然后使用类访问它

$(".tagfield").keypress(function() {
 var id=parseInt($(this).attr("id").split("-"));
      $(this).siblings().attr("name","metrics["+id+"][tags]["+$(this).val()+"][0]");
});

Answer 2

您可以使用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。我希望这有帮助！

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

2 个答案: