将jquery变量连接到字符串，以便添加id's转换为动态生成的输入字段

concatenating a jquery variable to a string in order to add id's to dynamically generated input fields

本文关键字：转换 动态 字段 输入 连接 变量 jquery 字符串 id 添加      更新时间：2023-09-26

我正试图根据单独输入字段中指定的数量动态添加输入字段。我主要是通过使用SO上提出的类似问题中的jquery代码来实现这一点的。我无法做到的是将"id"var连接到输入字段的id。

很抱歉我含糊其辞，我将包括下面的所有代码，这样你就可以看到我正在尝试做什么。此外，一些html表单代码不是标准的，因为我使用的是Laravel框架。

HTML

{{ Form::open(['url' => 'add_columns/' . $page, 'class' => 'pure-form pure-form-stacked']) }}
                    <div class="pure-g">
                        <div class="pure-u-1-2">
                            <p><b>Amount of columns to add: </b></p>
                        </div>
                        <div class="pure-u-1-2">
                            {{ Form::text('qty', null, ['style' => 'width: 3em;', 'id' => 'qty']) }}
                        </div>
                    </div>
                    <div id="newFields"></div>
                    {{ Form::submit('add', ['class' => 'pure-button pure-button-primary']) }}
                {{ Form::close() }}

jquery

$(function() {
//var input = $('{{ Form::text("awe", null, ["placeholder" => "column"]) }}');
var newFields = $('');
var id = $(1);
$('#qty').bind('blur keyup change', function() {
    var n = this.value || 0;
    if (n+1) {
        if (n > newFields.length) {
            addFields(n);
        } else {
            removeFields(n);
        }
    }
});
function addFields(n) {
    for (i = newFields.length; i < n; i++) {
        var newInput = $('{{ Form::text("' + id + '", null, ["placeholder" => "column"]) }}');
        newFields = newFields.add(newInput);
        newInput.appendTo('#newFields');
        id++;
    }
}
function removeFields(n) {
    var removeField = newFields.slice(n).remove();
    newFields = newFields.not(removeField);
}

})；

这导致当我需要时

我们将不胜感激。

在essense Julien中，｛｛Form:text（）｝｝最终被呈现为如果你查看浏览器上呈现的HTML，你将看不到任何｛{Form:text（）}｝标签。你想要这样做有什么特殊的原因吗？还是只是为了保持它的统一？｛｛Form:text（）｝｝给您带来了什么优势？

function addFields(n) {
    for (i = newFields.length; i < n; i++) {
        var newInput = $('<input id="index' + i + '" type="text" placeholder="column">');
        newFields = newFields.add(newInput);
        newInput.appendTo('#newFields');
        i++;
    }
}
相关文章：