динамически добавлять поля и вычислять сумму - PullRequest
Новая
       11

динамически добавлять поля и вычислять сумму

0 голосов
/ 24 января 2020

Я хотел знать, как вычислить сумму всех полей, которые динамически добавляются, и отобразить результат на странице, но я заблудился.

Вот код, который я пытаюсь просмотреть, и выучите:

заранее спасибо ^ __ ^

мне нужно знать, что делать дальше, чтобы я мог добавить его к этому. 

<html lang="en">

<head>

  <title></title>

  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>

  </head>

<body>

<div class="field_wrapper">
    <div class="form-group">
        <input type="text" class="prc" name="field_name[]" value=""/>
        <a href="javascript:void(0);" class="add_button" title="Add field">add field</a>
    </div>
    
</div>
<div class="form-group">
      <output id="result"></output>
    </div>

<script type="text/javascript">
$(document).ready(function(){
    var maxField = 10; //Input fields increment limitation
    var addButton = $('.add_button'); //Add button selector
    var wrapper = $('.field_wrapper'); //Input field wrapper
    var fieldHTML = '<div><input type="text" name="field_name[]" value=""/><a href="javascript:void(0);" class="remove_button">remove field</a></div>'; //New input field html 
    var x = 1; //Initial field counter is 1
    
    
    //Once add button is clicked
    $(addButton).click(function(){
        //Check maximum number of input fields
        if(x < maxField){ 
            x++; //Increment field counter
            $(wrapper).append(fieldHTML); //Add field html
        }
    });
    
    //Once remove button is clicked
    $(wrapper).on('click', '.remove_button', function(e){
        e.preventDefault();
        $(this).parent('div').remove(); //Remove field html
        x--; //Decrement field counter
    });


});
</script>

</body>

</html>

любая помощь очень ценится. Большое спасибо!

1 Ответ

0 голосов
/ 24 января 2020

Предполагая, что входной номер является целым числом: 

//Once add button is clicked
$(addButton).click(function(){
    //Check maximum number of input fields
    if(x < maxField){ 
        x++; //Increment field counter
        $(wrapper).append(fieldHTML); //Add field html
        calculate_sum();
    }
});

//Once remove button is clicked
$(wrapper).on('click', '.remove_button', function(e){
    e.preventDefault();
    $(this).parent('div').remove(); //Remove field html
    x--; //Decrement field counter
    calculate_sum();
});

function calculate_sum() {
     let sum = 0;
     $('.field_wrapper').find('input.prc').each((index, element) => {
         sum += parseInt(element.value);
     });
     $('#result').text(sum);
}

Не забудьте добавить класс prc для ввода в переменную fieldHTML. Я также предложил бы вам изменить input type="text" на input type="number"

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...