Динамические текстовые поля с использованием значения jquery и вычисления значения

Question

Я работаю над кодом jquery, чтобы добавить динамические поля в список моих полей, у меня есть пара ссылок в Интернете, но большинство из них с использованием живой команды не работают должным образом, все i делаю это внутри Jquery UI Tabs

Я дал попробовать с этим кодом, так как он работает хорошо, но есть несколько вопросов:

function trimNums(stringToTrim) 
     { 
      return stringToTrim.replace(/\d+$/,""); 
     }   
     function dupForm(divId, divClass, btnAdd, btnRm) 
     { 
     //alert(divId+' '+divClass); 
      var num  = $(divClass).length; 
      var newNum = new Number(num + 1); 
      var i; 

      var newElem = $('#' + divId + num).clone().attr('id', divId + newNum); 

      for (i=0; i < newElem.children().length; i++) 
      { 
       var attrId = trimNums(newElem.children(':eq('+i+')').attr('id')); 
       var attrName = trimNums(newElem.children(':eq('+i+')').attr('name')); 

       newElem.children(':eq('+i+')').attr('id', attrId + newNum).attr('name', attrName + newNum); 
      } 
      $('#' + divId + num).after(newElem); 
      $('#' + btnRm).attr('disabled',false); 

      //if (newNum == 15) 
       //$('#' + btnAdd).attr('disabled','disabled'); 
     } 

     function rmForm(divId, divClass, btnAdd, btnRm) 
     { 
      var num = $(divClass).length; 

      $('#' + divId + num).remove(); 
      //$('#' + btnAdd).attr('disabled',''); 

      if (num-1 == 1) { 
       $('#' + btnRm).attr('disabled','disabled'); 
       $('#' + btnAdd).attr('disabled',false); 
      } 
     } 
<div> 
     <input type="button" id="btnAdd" class="btn" onclick="dupForm('input', '.clonedInput', 'btnAdd', 'btnDel');" value="Add" /> 
     <input type="button" id="btnDel" class="btn" onclick="rmForm('input', '.clonedInput', 'btnAdd', 'btnDel');" value="Remove" /><br /><br /> 
    </div> 
      <div id="input1" style="margin-bottom:4px;" class="clonedInput"> 
       <input type="text" class="input-block-level-inputfields" name="product1" id="product1" placeholder="Product Details" /> 
       <input type="text" class="input-block-level-inputfields" name="price1" id="price1" style="width:50px;" placeholder="Price" /> 
      </div> 

Проблемы, связанные с Кодексом:

1. это также клонирует значение i f i введите значение в одном поле и нажмите на добавление, которое я не хочу.
2. в поле Price, я хочу ввести значение цены, и оно должно быть рассчитано сразу в поле div, я буду определять позже. если я нажимаю удалить сумма должна быть вычтена немедленно

Благодарности

Answer 1

1) После клонирования, установите значение пустой строки:

var newElem = $('#' + divId + num).clone().attr('id', divId + newNum).val(''); 

или

var newElem = $('#' + divId + num).clone().attr('id', divId + newNum); 
newElem.val('').attr('value', ''); 

Однако клонирование должно НЕ копируйте значение, как указано в API jQuery:

динамическое состояние элементов формы (например, пользовательские данные, введенные во входные данные, а также текстовые поля или пользовательские выборки, сделанные для выбора) не копируются в клонированные элементы.

Что касается (2), вы не предоставили достаточной информации. Пожалуйста, разместите свой код, который суммирует поля цены, и поле «div» HTML.

Если у вас нет еще, во-первых, добавить поле DIV с идентификатором, как это:

<div id="answer">0</div> 

Затем добавьте этот JavaScript код:

function recalculateTotal() { 
    var total = 0; 
    $('input[placeholder=price]').each(function() { 
     total += parseFloat($(this).val()); 
    }; 
    $('#answer').text(total); 
} 
$(function() { 
    $('body').on('keyup', 'input[placeholder=price]', recalculateTotal); 
}); 

И добавьте к этому последняя строка вашей функции rmForm:

recalculateTotal();