Блог

Главная - Вопросы по программированию - добавление данных в div через jQuery [не Woking]

добавление данных в div через jQuery [не Woking]

#javascript #html #jquery #append

#javascript #HTML #jquery #добавить

Вопрос:

Я хочу добавить поле выбора и текстовое поле в div, но мой код не работает. Я попробовал свою цель и изучил код других потоков, но то же самое я не смог достичь цели. здесь я показываю единственный основной div, в который я добавляю данные, но в моем реальном случае у меня динамический <div class="note" id="23203"> , поэтому я упоминаю div id , какой из них уникален.

Я хочу добавить текстовое поле и поле выбора appendApp_body , когда я нажимаю кнопку, и то же самое удалить div, если я нажму, чтобы выбрать - кнопку div

Пожалуйста, помогите мне, как сделать это правильно.

Я хочу, когда я нажимаю кнопку

 var xMachine = 1;

$('.add_MoreMachine__button').click(function() {
  var qty = $(this).attr("data-qty");
  var maxMachineField = qty;
  if (xMachine < maxMachineField) {
    newrowMachine = '<div class="appendApp_body"><select class="custom-select font-size-sm shadow-none" name="product_name[]"><option>--</option><option>6 AMP (RF)</option></select ><input type="text" class="form-control" maxlength="50" name="productnumber[]" /></div><button type="button" class = "btn btn-danger btn-circle float-right remove_Machinebutton" ><i class="fa fa-minus"></i></button ></div>';
    $('.appendApp_body:last').after(newrowMachine);
  } else {
    alert("Ops...! You have total "   maxMachineField   " allowed fields to fill and now you don't have extra permission to proceed this action. [error: limit-reached]");
    return false;
  }
});


$(".complaint_MachineFor4").on("click", ".remove_Machinebutton", function(e) {
                    e.preventDefault();
                    $(this).closest('<div>').remove();
                    xMachine--;
                }); 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="note" id="23203">
  <div class="note-body">
    <div class="note-added-on">
      <select style="margin-bottom: 5px;" class="custom-select font-size-sm shadow-none" name="product_id[]">
        <option value="Issue1">Issue1</option>
      </select>
      <div class="appendApp_body">
        <select class="custom-select font-size-sm shadow-none" name="product_name[]">
          <option selected="" value="0">--</option>
          <option>6 AMP (RF)</option>
        </select>
        <input type="text" class="form-control" maxlength="50" name="productnumber[]" />
      </div>

      <button style="width: 100%; margin-top: 10px;" type="button" class="btn btn-success add_MoreMachine__button" data-qty="2"><i class="fa fa-plus"></i></button>
    </div>
  </div>
</div>

Ответ №1:

Если есть notes несколько divs, которые вы можете использовать $(this).closest(".note-added-on").. для добавления сгенерированных divs только там, где была нажата кнопка. Затем, чтобы удалить то же самое, вы можете использовать $(this).prev('.appendApp_body').remove() для удаления appendApp_body div $(this).remove() , а также для удаления кнопки.

Демонстрационный код :

 $('.add_MoreMachine__button').click(function() {
  var xMachine = $(this).closest('.note-added-on').find('.appendApp_body').length; //get length of cloned div
  var maxMachineField = $(this).attr("data-qty");
  //compare
  if (xMachine < maxMachineField) {
    //just add one extra class..`cloned..`
    newrowMachine = '<div class="appendApp_body cloned"><select class="custom-select font-size-sm shadow-none" name="product_name[]"><option>--</option><option>6 AMP (RF)</option></select ><input type="text" class="form-control" maxlength="50" name="productnumber[]" /></div><button type="button" class = "btn btn-danger btn-circle float-right remove_Machinebutton" ><i class="fa fa-minus"></i></button></div>';
    //append inside `note-added-on` div 
    $(this).closest(".note-added-on").append(newrowMachine);
  } else {
    alert("Ops...! You have total "   maxMachineField   " allowed fields to fill and now you don't have extra permission to proceed this action. [error: limit-reached]");
    return false;
  }
});


$(document).on("click", ".remove_Machinebutton", function(e) {
  e.preventDefault();
  $(this).prev('.appendApp_body').remove(); //get prev div
  $(this).remove(); //remove button as well
}); 
 .note {
  border: 1px solid blue;
} 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<div class="note" id="23203">
  <div class="note-body">
    <div class="note-added-on">
      <select style="margin-bottom: 5px;" class="custom-select font-size-sm shadow-none" name="product_id[]">
        <option value="Issue1">Issue1</option>
      </select>
      <div class="appendApp_body">
        <select class="custom-select font-size-sm shadow-none" name="product_name[]">
          <option selected="" value="0">--</option>
          <option>6 AMP (RF)</option>
        </select>
        <input type="text" class="form-control" maxlength="50" name="productnumber[]" />
      </div>

      <button style="margin-top: 10px;" type="button" class="btn btn-success add_MoreMachine__button" data-qty="2"><i class="fa fa-plus"></i></button>
    </div>
  </div>
</div>
<div class="note" id="232031">
  <div class="note-body">
    <div class="note-added-on">
      <select style="margin-bottom: 5px;" class="custom-select font-size-sm shadow-none" name="product_id[]">
        <option value="Issue1">Issue1</option>
      </select>
      <div class="appendApp_body">
        <select class="custom-select font-size-sm shadow-none" name="product_name[]">
          <option selected="" value="0">--</option>
          <option>6 AMP (RF)</option>
        </select>
        <input type="text" class="form-control" maxlength="50" name="productnumber[]" />
      </div>

      <button style="margin-top: 10px;" type="button" class="btn btn-success add_MoreMachine__button" data-qty="1"><i class="fa fa-plus"></i></button>
    </div>
  </div>
</div>

Комментарии:

1. как сделать xMachine по умолчанию 1 … если data-qty="1" затем не добавить следующее текстовое поле.. Пожалуйста, помогите и поймите меня

2. Просто измените cloned , чтобы appendApp_body добавить это также в обновленный код. Дайте мне знать, если это то, что вам нужно.

3. Я хочу добавить, если data-qty указано выше 1 .. потому 1 что область div уже существует ….. на самом деле я отправляю все данные с помощью ajax … если возможно, добавьте также форму, где, если мы нажмем одну кнопку, все входные данные daa будут отправляться через ajax…

4. Сколько div вам нужно добавить в зависимости от количества данных? Если да, приведенный выше ответ будет работать нормально. Кроме того, об ajax вы можете задать другой вопрос, и если приведенный выше ответ полезен, вы можете проголосовать и принять его.

5. могу ли я задать еще один вопрос для ajax для этой формы, вы мне поможете? ваш текущий ответ был действительно полезен

Метки: