如何使用 JQuery/Javascript 更改输入“名称”的单个部分？答案

【问题标题】：How to change a single part of an input "name" using JQuery/Javascript?如何使用 JQuery/Javascript 更改输入“名称”的单个部分？
【发布时间】：2016-03-19 16:54:57
【问题描述】：

作为another question 的后续行动，考虑以下代码：

<body>
<script>

    function addAttendee() {
        $('.newAttendee').first().clone().appendTo('.attendees');
    }

</script>

<form action="test2.php" name="testform" method="post">
    <span class="attendees">
    <input type="text" name="attendee[0][city]" value="city 1">
    <input type="text" name="attendee[0][state]" value="state 1">
    <input type="text" name="attendee[0][zip]" value="zip 1">
    </span>
<a href="#" name="addAttendee" onclick="addAttendee()">Add Attendee</a>
<br>
<input type="submit" onclick="getOutput()">
</form>

<div class="hideThis" style="display: none;">
    <span class="newAttendee">
        <br>
    <input type="text" name="attendee[1][city]" value="city 2">
    <input type="text" name="attendee[1][state]" value="state 2">
    <input type="text" name="attendee[1][zip]" value="zip 2">
    </span>
</div>

</body>

当我点击“添加参与者”时，我想将添加部分的数组编号更改为下一个更高的值。

即：

name="attendee[1][xxxxx]

需要成为

name="attendee[2][xxxxx]

想知道是否有人对此有任何捷径？

再次感谢，提前。

【问题讨论】：

添加评论以说明您为什么投反对票会很有帮助。如果我“愚蠢”，我想知道这一点以及为什么。

标签： javascript jquery

【解决方案1】：

在数组名称中不分配索引值会更简单：

例如更改：

<input type="text" name="attendee[1][city]" value="city 2">

到

<input type="text" name="attendee[][city]" value="city 2">

此外，由于您正在克隆现有的，您应该重置克隆中的值

function addAttendee() {
    var $clone = $('.newAttendee').first().clone();
    $clone.find('input').val('');
    $('.attendees').append($clone);       
}

【讨论】：

是的..这些值实际上就在那里，所以我可以在测试时看到它们是不同的。最终我不会使用它们。我想我应该这么说。我很抱歉。
这只是创建了一个长数组，其中包含“城市”、“州”等重复索引。我正在寻找的是一个包含参与者的数组。
Correction.. 这将创建一个新的数字数组数组，每个字段都是它自己的数字数组..

【解决方案2】：

这是我想做的解决方案：

<body>
<script>

    $(document).ready( function() {
    });

    $attendeeValue = 1;

    function addAttendee() {
        var $newAttendee = $('.newAttendee').html();
        $newAttendee = $newAttendee.replace(/xxx/g,$attendeeValue++);
        console.log($newAttendee);
        $('.attendees').append($newAttendee);
        //$('.newAttendee').first().clone().appendTo('.attendees');

    }

</script>

<form action="test2.php" name="testform" method="post">
    <span class="attendees">
    <input type="text" name="attendee[0][city]" value="city 1">
    <input type="text" name="attendee[0][state]" value="state 1">
    <input type="text" name="attendee[0][zip]" value="zip 1">
    </span>
<a href="#" name="addAttendee" onclick="addAttendee()">Add Attendee</a>
<br>
<input type="submit" onclick="getOutput()">
</form>

<div class="hideThis" style="display: none;">
    <span class="newAttendee">
        <br>
    <input type="text" name="attendee[xxx][city]">
    <input type="text" name="attendee[xxx][state]">
    <input type="text" name="attendee[xxx][zip]">
    </span>
</div>

</body>

我希望这对其他人有用。

感谢大家的意见。

【讨论】：