如何從1個按鈕添加2個新輸入？

嗨，我在這里有我的代碼，現在我想點擊 1 個按鈕來添加一個輸入框來聯系姓名和聯系號碼

用戶單擊添加更多欄位時的影像示例

目前我擁有的是 2 個不同的輸入欄位，其中我隱藏了聯系人的按鈕 否：最初我允許按下 2 按鈕以顯示新輸入，但現在我希望為每個新的聯系人輸入顯示 1 個按鈕輸入姓名和聯系方式沒有我如何合并？

這是我的代碼片段

// 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 ><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>

uj5u.com熱心網友回復：

我剛剛更改了您的代碼，我添加了 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 ><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>

標籤：javascript html 查询

上一篇：Django查詢作為復選框形式的字串陣列

下一篇：未呼叫jquery函式，但呼叫了父函式，不知道為什么