html - 如何更改自动添加的输入和文本区域的名称属性？

Question

我正在尝试创建一个 cv 创建者表单，并且需要让用户添加更多输入（自动）。

我创建了输入，它们工作得很好，但我需要为每个自动添加的块更改名称属性。

例如 ：

<input type="text" id="fname" name="fname">
<input type="text" id="fname" name="fname2">
<input type="text" id="fname" name="fname3">

我知道我可以使用name="value[]"数组，但是每个新块都会进入数据库中的不同列，所以我需要更改属性。

我的代码：

$(document).ready(function() {
    var max_fields = 10;
    var wrapper = $("#contant");
    var add_button = $("#add_form_field");

    var x = 1;
    $(add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(wrapper).append('<div id="input-social" class="input-container"><input type="text" id="social" class="col-11 form-control" name="fname" placeholder="fname"> <span id="deleteInput" class="AutoInput" title="Delete"><i class="fas fa-trash-alt"></i></span></div>');
        } else {
            alert('You Riched limit.')
        }
    });

    $(wrapper).on("click", "#deleteInput", function(e) {
        e.preventDefault();
        $(this).parent('#input-social').remove();
        x--;
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/e794a0f8b4.js" crossorigin="anonymous"></script>

<div class="form-group">
    <div class="row">
        <label class="col-3 inputFontSize" for="social">Others</label>
        <div id="contant" class="col-7">
        <button id="add_form_field" class="btn add_form_field">Add more &nbsp; <i class="fas fa-plus"></i></button>
     </div>
    <!-- col-9 -->
    
    </div>
    <!-- row --> 
</div>
<!-- form-group -->

感谢所有帮助

标签： htmljqueryajax

Answer 1

您可以使用x为每次添加而递增的变量input并将其附加到name属性中。我们将使用“模板字符串”。调整name="fname${x}"将替代${x}的值x。

$(wrapper).append(`
  <div id="input-social" class="input-container">
    <input type="text" id="social" class="col-11 form-control" name="fname${x}" placeholder="fname">
    <span id="deleteInput" class="AutoInput" title="Delete">
      <i class="fas fa-trash-alt"></i>
    </span>
  </div>`
);

$(document).ready(function() {
    var max_fields = 10;
    var wrapper = $("#contant");
    var add_button = $("#add_form_field");

    var x = 1;
    $(add_button).click(function(e) {
        e.preventDefault();
        if (x < max_fields) {
            x++;
            $(wrapper).append(`<div id="input-social" class="input-container"><input type="text" id="social" class="col-11 form-control" name="fname${x}" placeholder="fname"> <span id="deleteInput" class="AutoInput" title="Delete"><i class="fas fa-trash-alt"></i></span></div>`);
        } else {
            alert('You Riched limit.')
        }
    });

    $(wrapper).on("click", "#deleteInput", function(e) {
        e.preventDefault();
        $(this).parent('#input-social').remove();
        x--;
    })
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://kit.fontawesome.com/e794a0f8b4.js" crossorigin="anonymous"></script>

<div class="form-group">
    <div class="row">
        <label class="col-3 inputFontSize" for="social">Others</label>
        <div id="contant" class="col-7">
        <button id="add_form_field" class="btn add_form_field">Add more &nbsp; <i class="fas fa-plus"></i></button>
     </div>
    <!-- col-9 -->
    
    </div>
    <!-- row --> 
</div>
<!-- form-group -->