如何从 1 个按钮添加 2 个新输入？

Question

您好，我在这里有我的代码，现在我想点击 1 个按钮来添加一个输入框以添加联系人姓名和联系人编号

用户单击添加更多字段时的图像示例

目前我拥有的是 2 个不同的输入字段，其中我隐藏了联系人编号的按钮： 最初我可以按 2 按钮显示一个新输入，但现在我希望为每个新输入的联系人姓名和联系人显示 1 个按钮输入，我该如何组合它？

这里是我的代码 sn-p 代码

// Script on create a new input box 1 for Contact: Name
const $container1 = $('#contactContainername')
$(".remove1").eq(0).hide()
$container1.on('click', ".no", function(e) {
  const add1 = $(this).is(".add1")

  const $input1 = $container1.find(".contactname");
  const len1 = $input1.length;
  if (add1) {
    const $newInput1 = $input1.eq(0).clone(true)
    $newInput1.find("[name=contactname]")
      .attr("id", `new_${$input1.length}`)
      .val("");
    $container1.append($newInput1);
    $newInput1.find(".add1").remove()
    $newInput1.find(".remove1").show()

    // $newPhone.find(".add").hide(len>0)
  } else {
    $(this).closest(".contactname").remove()
  }

})


// Script on create a new input box 2 for Contact: No
const $container = $('#contactContainer')
$(".remove").eq(0).hide()
$container.on('click', ".ar", function(e) {
  const add = $(this).is(".add");
  const $input = $container.find(".contact");
  const len = $input.length;
  if (add) {
    const $newInput = $input.eq(0).clone(true)
    $newInput.find("[name=contact]")
      .attr("id", `new_${$input.length}`)
      .val("");
    $container.append($newInput);
    $newInput.find(".add").remove()
    $newInput.find(".remove").show()
    // $newPhone.find(".add").hide(len>0)
  } else {
    $(this).closest(".contact").remove()
  }

})

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="form-group row">
  <label for="contact" class="col-2 col-form-label">Contact Name:</label>

  <div class="col-4" id="contactContainername">
    <div class="flex contactname" style="margin-bottom:10px;">
      <input style="margin-right: 10px; width: 200px;" id="validationcontactname" name="contactname" type="text" class="form-control" placeholder="Name" required>
      <input type="button" class="no add1" value="Add More Field" style="cursor: pointer;">
      <span class="no remove1"><label style="cursor: pointer; padding-top: 5px;"><i style="width: 20px; height: 20px; color: lightseagreen;"data-feather="x"></i></label></span>

    </div>
  </div>
</div>
&nbsp;

<div class="form-group row">
  <label for="contact" class="col-2 col-form-label">Contact No:</label>

  <div class="col-4" id="contactContainer">
    <div class="flex contact" style="margin-bottom:10px;">
      <input style="margin-right: 10px; width: 200px;" id="validationcontact" name="contact" type="text" class="form-control" placeholder="9343****" pattern="\b\d{8}\b" required>
      <input type="button" class="ar add" value="Add More Field" style="cursor: pointer;" hidden>
      <!-- <span class="ar add"><label style="cursor: pointer; padding-top: 5px;"><i data-feather="plus" ></i></label></span> -->
      <span class="ar remove"><label style="cursor: pointer; padding-top: 5px;"><i style="width: 20px; height: 20px; color: lightseagreen;"data-feather="x"></i></label></span>


    </div>
  </div>
</div>

Answer 1

我刚刚更改了您的代码，我添加了 onclick 事件以添加更多字段按钮

function addMoreField() {
  const $contactContainername = $('#contactContainername');
  const $contactContainerNo = $('#contactContainer');
  const $contactNameinput = $contactContainername.find(".contactname");
  const $contactNoInput = $contactContainerNo.find(".contact");

  const $newContactNameinput = $contactNameinput.eq(0).clone(true);
  $newContactNameinput.find("[name=contactname]")
    .attr("id", `contactNameInput_${$contactNameinput.length}`)
    .val("");
  $newContactNameinput.attr("id", `contactName_${$contactNameinput.length}`);
  const removeButton = $newContactNameinput.find(".removeButton");
  removeButton.attr("onclick", `removeField(${$contactNameinput.length})`);
  removeButton.show();

  const $newContactNoinput = $contactNoInput.eq(0).clone(true);
  $newContactNoinput.attr("id", `contactNo_${$contactNameinput.length}`);
  $newContactNoinput.find("[name=contact]")
    .attr("id", `contactNoInput_${$contactNoInput.length}`)
    .val("");


  $contactContainername.append($newContactNameinput);
  $contactContainerNo.append($newContactNoinput);
}

function removeField(id) {
  if (id === 0) return;
  const $contactContainername = $('#contactContainername');
  const $contactContainerNo = $('#contactContainer');

  const $contactNameinput = $contactContainername.find(`#contactName_${id}`);

  const $contactNoinput = $contactContainerNo.find(`#contactNo_${id}`);

  $contactNameinput.remove();
  $contactNoinput.remove();
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<input type="button" onclick='addMoreField()' class="no add1" value="Add More Field" style="cursor: pointer;">
<div class="form-group row">
  <label for="contact" class="col-2 col-form-label">Contact Name:</label>

  <div class="col-4" id="contactContainername">
    <div id="contactName_0" class="flex contactname" style="margin-bottom:10px;">
      <input style="margin-right: 10px; width: 200px;" id="validationcontactname" name="contactname" type="text" class="form-control" placeholder="Name" required>
      <input class="removeButton" type="button" onclick='removeField(0)' value="Remove" style="cursor: pointer;display:none">

    </div>
  </div>
</div>
&nbsp;

<div class="form-group row">
  <label for="contact" class="col-2 col-form-label">Contact No:</label>

  <div class="col-4" id="contactContainer">
    <div id="contactNo_0" class="flex contact" style="margin-bottom:10px;">
      <input style="margin-right: 10px; width: 200px;" id="validationcontact" name="contact" type="text" class="form-control" placeholder="9343****" pattern="\b\d{8}\b" required>
      <input type="button" class="ar add" value="Add More Field" style="cursor: pointer;" hidden>
      <!-- <span class="ar add"><label style="cursor: pointer; padding-top: 5px;"><i data-feather="plus" ></i></label></span> -->
      <span class="ar remove"><label style="cursor: pointer; padding-top: 5px;"><i style="width: 20px; height: 20px; color: lightseagreen;"data-feather="x"></i></label></span>


    </div>
  </div>
</div>