dynamische Formulare mehrere Eingabefelder berechnen

Ich muss Formularfelder dynamisch hinzufügen. Jede Gruppe von Eingabewerten enthält 3 Felder, quantity, price und total. Jedes Mal, wenn ich numerische Werte in quantity und price einfüge, muss das Feld total die Summe anzeigen oder multiplizieren.dynamische Formulare mehrere Eingabefelder berechnen

Ich habe dies realisiert, aber es funktioniert nur auf dem ersten Feld. Wenn ich eine weitere Reihe von Feldern hinzufüge, berechnet es andere nicht.

Hier ist mein Code.

$(document).ready(function() { 
 
    var i = 1; 
 
    $('#add').click(function() { 
 
\t  i++; 
 
\t  $('#articles').append('<tr id="row' + i + '"><td><input type="number" id="quantity" name="quantity[]" placeholder="quantity" class="form-control name_list" /></td> <td><input type="number" id="price" name="price[]" placeholder="price" class="form-control name_list" /></td> <td><input type="number" id="total" name="total[]" placeholder="total" class="form-control name_list" readonly /></td> <td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>'); 
 
    }); 
 

 
    $(document).on('click', '.btn_remove', function() { 
 
\t  var button_id = $(this).attr("id"); 
 
\t  $('#row' + button_id + '').remove(); 
 
    }); 
 

 
    $('#submit').click(function() { 
 
\t  //alert($('#add_name').serialize()); //alerts all values and works fine   
 
\t  $.ajax({ 
 
\t \t  url: "wwwdb.php", 
 
\t \t  method: "POST", 
 
\t \t  data: $('#add_name').serialize(), 
 
\t \t  success: function(data) { 
 
\t \t \t  $('#add_name')[0].reset(); 
 
\t \t  } 
 
\t  }); 
 
    }); 
 

 
    function upd_art() { 
 
\t  var qty = $('#quantity').val(); 
 
\t  var price = $('#price').val(); 
 
\t  var total = (qty * price).toFixed(2); 
 
\t  $('#total').val(total); 
 
    } 
 
    setInterval(upd_art, 1000); 
 
});

<html> 
 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 
<body> 
 
    <div class="container"> 
 
    <br /> 
 
    <br /> 
 
    <h2 align="center">title</h2> 
 
    <div class="form-group"> 
 
     <form name="add_name" id="add_name"> 
 
     <div class="table-responsive"> 
 
      <table class="table table-bordered" id="articles"> 
 
      <tr> 
 

 
       <td><input type="number" id="quantity" name="quantity[]" placeholder="quantity" class="form-control name_list" /></td> 
 
       <td><input type="number" id="price" name="price[]" placeholder="price" class="form-control name_list" /></td> 
 
       <td><input type="number" id="total" name="total[]" placeholder="total" class="form-control name_list" readonly /></td> 
 
       <td><button type="button" name="add" id="add" class="btn btn-success">Add new</button></td> 
 
      </tr> 
 
      </table> 
 
      <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" /> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</body> 
 
</html>

Quelle

2017-09-08 sigma

für Vorspeisen, ids haben um eindeutig zu sein – baao

Dieses Skript funktioniert einwandfrei, wenn ich Werte in die Datenbank einfüge. Das Ziel besteht darin, die Wertsumme nicht manuell einzufügen, sondern automatisch zu berechnen und dann in db zu speichern. Wenn möglich, ein Beispiel, wie Sie in diesem Fall mit eindeutigen IDs rechnen können. Danke – sigma

ist die Lösung:

FIRST: Hinzugefügt JQuery

ZWEITE: Korrigierte das Verfahren zu berechnen. Es sollte multiplizieren, anstatt die Summe zu bilden, wenn Sie Quantität * Preis wünschen. Meine Änderungen überprüfen

DRITT: Eine Nummer für jede ID und in der Append-Methode hinzugefügt.

VIERTE: kommentiert der Timer Sie erstellt, und nannte das Verfahren, das den endgültigen Wert innerhalb des JQUERY event "change" der Eingaben berechnet: Geänderte calculate Verfahren die ID

THIRD zu tragen. Auf diese Weise, Sie sind für immer nicht verarbeiten (auch wenn nichts geändert wird) und es ist nur dann berechnet, wenn der change Ereignis

abgefeuert wird, es hilft

$(document).ready(function() { 
 
    var i = 0; 
 
    $("#quantity-" + i).change(function() { 
 
    upd_art(i) 
 
    }); 
 
    $("#price-" + i).change(function() { 
 
    upd_art(i) 
 
    }); 
 

 

 
    $('#add').click(function() { 
 
    i++; 
 
    $('#articles').append('<tr id="row' + i + '"><td><input type="number" value=0 id="quantity-' + i + '" name="quantity[]" placeholder="quantity" class="form-control name_list" /></td> <td><input type="number" id="price-' + i + '" name="price[]" value=0 placeholder="price" class="form-control name_list" /></td> <td><input type="number" id="total-' + i + '" name="total[]" placeholder="total" class="form-control name_list" readonly /></td> <td><button type="button" name="remove" id="' + i + '" class="btn btn-danger btn_remove">X</button></td></tr>'); 
 

 
    $("#quantity-" + i).change(function() { 
 
     upd_art(i) 
 
    }); 
 
    $("#price-" + i).change(function() { 
 
     upd_art(i) 
 
    }); 
 

 

 
    }); 
 

 

 
    $(document).on('click', '.btn_remove', function() { 
 
    var button_id = $(this).attr("id"); 
 
    $('#row' + button_id + '').remove(); 
 
    }); 
 

 
    $('#submit').click(function() { 
 
    alert($('#add_name').serialize()); //alerts all values   
 
    $.ajax({ 
 
     url: "wwwdb.php", 
 
     method: "POST", 
 
     data: $('#add_name').serialize(), 
 
     success: function(data) { 
 
     $('#add_name')[0].reset(); 
 
     } 
 
    }); 
 
    }); 
 

 
    function upd_art(i) { 
 
    var qty = $('#quantity-' + i).val(); 
 
    var price = $('#price-' + i).val(); 
 
    var totNumber = (qty * price); 
 
    var tot = totNumber.toFixed(2); 
 
    $('#total-' + i).val(tot); 
 
    } 
 

 

 

 
    // setInterval(upd_art, 1000); 
 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<html> 
 

 
<head> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script> 
 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css" /> 
 
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script> 
 
</head> 
 

 
<body> 
 
    <div class="container"> 
 
    <br /> 
 
    <br /> 
 
    <h2 align="center">title</h2> 
 
    <div class="form-group"> 
 
     <form name="add_name" id="add_name"> 
 
     <div class="table-responsive"> 
 
      <table class="table table-bordered" id="articles"> 
 
      <tr class="rrjeshta"> 
 

 
       <td><input value=0 type="number" id="quantity-0" name="quantity[]" placeholder="quantity" class="form-control name_list" /></td> 
 
       <td><input value=0 type="number" id="price-0" name="price[]" placeholder="price" class="form-control name_list" /></td> 
 

 
       <td><input type="number" id="total-0" name="total[]" placeholder="total" class="form-control name_list" readonly /></td> 
 
       <td><button type="button" name="add" id="add" class="btn btn-success">Add new</button></td> 
 
      </tr> 
 
      </table> 
 
      <input type="button" name="submit" id="submit" class="btn btn-info" value="Submit" /> 
 
     </div> 
 
     </form> 
 
    </div> 
 
    </div> 
 
</body> 
 

 
</html>

Quelle

2017-09-08 10:52:27

Willkommen! ;). Sah, dass sich die erste Zeile nicht "nach" Sekunden oder Terzen ändert. Vielleicht braucht es weitere Überprüfung, aber die Idee, wie IDs auf jQuery verwendet werden, ist so. Wie auch immer, empfehlen Sie dringend angularJs für diese dünnen;) –

sollten Sie einzigartige id Attribute in einem DOM verwenden. Wenn dieselben ids in einem HTML vorhanden sind und Sie sie in jQuery verwenden, wird nur das erste Auftreten der ID berücksichtigt und es wird nicht wie erwartet funktionieren.

Verwenden Sie class statt id, wenn Sie neue dynamische Elemente erstellen. und verwenden Klassenselektor in jquery Funktion upd_art. Hier

Quelle

2017-09-08 10:26:35

dynamische Formulare mehrere Eingabefelder berechnen

Antwort

Verwandte Themen