How to add 2 new input from 1 button?

Question

Hi i have my code here where now i would like 1 button click to add a input box to contact Name and contact No

Example of image when user click on the add more field

Currently what i have is 2 different input fields where i have hidden the button for the contact No: Originally i am allow to press on the 2 button to display a newinput but now i would like that 1 button input appear for each new input for contact name and contact no how can i combine it?

Here my code snippet for the code

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

Since you're using jquery, it's easy to add new HTML elements on the fly. Check here: w3schools.com/jquery/jquery_dom_add.asp — Tim Roberts
– Tim Roberts, Commented Dec 27, 2021 at 4:13

barzin.A · Accepted Answer · 2021-12-27 06:16:03Z

I've just changed your code,I've added onclick event to add more field button

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>

Thanks how about remove it ? for the new input box as well ?

Collectives™ on Stack Overflow

How to add 2 new input from 1 button?

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related