Summe der Eingabefelder sofort anzeigen

Ich möchte einige Werte aus Eingabefeldern anzeigen, die sofort in einem Eingabefeld aufsummiert werden, wenn ein Kunde das Formular ausfüllt. Die Werte der einzelnen Eingabefeld wird nun automatisch ausgelesen werden, aber ich kann nicht automatisch eine Lösung zum Summieren es oben ....Summe der Eingabefelder sofort anzeigen

Der Code

<!DOCTYPE HTML> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
</head> 
 

 
<body> 
 

 
<form id="ajax-contact-form" method="post"> 
 

 
<p>Büro m² Anzahl</p> 
 
<input type="text" name="leweb_value_1" id="leweb_value_1"> 
 
<input type="text" name="leweb_value_1_input" id="leweb_value_1_input"> 
 

 
<p>Sanitär m² Anzahl</p> 
 
<input type="text" name="leweb_value_2" id="leweb_value_2"> 
 
<input type="text" name="leweb_value_2_input" id="leweb_value_2_input"> 
 

 
<p> Wie oft </p> 
 
\t <select id="leweb_value_5" class="leweb_value_5" name="leweb_value_5" value=""> 
 
\t \t <option value="">Anzahl waehlen</option> 
 
\t \t <option value="2.50">1x</option> 
 
\t \t <option value="5.00">2x</option> 
 
\t </select> 
 
\t <input type="text" id="leweb_value_5_input" name="leweb_value_5_input" value=""/><br> \t 
 
\t 
 
<p>Preis<span id="preis"></span></p> 
 
<input name="type" value="senden" type="button" /><br /> 
 
<input id="total_price" name="" value="0" type="text" /> 
 
</form> 
 

 
    <!-- jQuery --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
    
 
\t 
 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
\t \t \t \t 
 
     $('#leweb_value_1').change(function() { // WENN SELECT CHANGED 
 
      $('#leweb_value_1_input').val(''); // TEXTFELD LEEREN 
 
      var selectValue = $(this).val() // VALUE AUS SELECT 
 
      $('#leweb_value_1_input').val(selectValue); // TEXTFELD FÜLLEN 
 
     }); \t \t 
 

 
     $('#leweb_value_2').change(function() { // WENN SELECT CHANGED 
 
      $('#leweb_value_2_input').val(''); // TEXTFELD LEEREN 
 
      var selectValue = $(this).val() // VALUE AUS SELECT 
 
      $('#leweb_value_2_input').val(selectValue); // TEXTFELD FÜLLEN 
 
     }); \t \t \t 
 

 
     $('#leweb_value_5').change(function() { // WENN SELECT CHANGED 
 
      $('#leweb_value_5_input').val(''); // TEXTFELD LEEREN 
 
      var selectValue = $(this).val() // VALUE AUS SELECT 
 
      $('#leweb_value_5_input').val(selectValue); // TEXTFELD FÜLLEN 
 
     }); \t 
 

 

 
function leweb_price_new() { 
 
    if ($('input[name=type]').val() = 0) { 
 
     var a = parseInt($('#leweb_value_1_input').val()); 
 
     var b = parseInt($('#leweb_value_2_input').val()); 
 
\t \t var c = parseInt($('#leweb_value_5_input').val()); 
 
     var total = (a+b)*c; 
 
     $('#total_price').val(total); 
 
    } 
 
} 
 

 
jQuery('form').delegate('input[name=type], #leweb_value_1_input, #leweb_value_2_input','change', leweb_price_new); 
 
\t \t 
 
    
 
\t }); 
 
\t 
 

 
</script> 
 

 

 
\t 
 
</body> 
 
</html>

Does finden jemand hat eine Lösung pls?

Quelle

2016-05-20 Jo Le

Versuchen Sie es. Es klappt.

<!DOCTYPE HTML> 
 
<html lang="en"> 
 
<head> 
 
\t <meta charset="utf-8"> 
 
</head> 
 

 
<body> 
 

 
<form id="ajax-contact-form" method="post"> 
 

 
<p>Büro m² Anzahl</p> 
 
<input type="text" name="leweb_value_1" id="leweb_value_1"> 
 
<input type="text" name="leweb_value_1_input" id="leweb_value_1_input"> 
 

 
<p>Sanitär m² Anzahl</p> 
 
<input type="text" name="leweb_value_2" id="leweb_value_2"> 
 
<input type="text" name="leweb_value_2_input" id="leweb_value_2_input"> 
 

 
<p> Wie oft </p> 
 
\t <select id="leweb_value_5" class="leweb_value_5" name="leweb_value_5" value=""> 
 
\t \t <option value="">Anzahl waehlen</option> 
 
\t \t <option value="2.50">1x</option> 
 
\t \t <option value="5.00">2x</option> 
 
\t </select> 
 
\t <input type="text" id="leweb_value_5_input" name="leweb_value_5_input" value=""/><br> \t 
 
\t 
 
<p>Preis<span id="preis"></span></p> 
 
<input name="type" value="senden" type="button" /><br /> 
 
<input id="total_price" name="" value="0" type="text" /> 
 
</form> 
 

 
    <!-- jQuery --> 
 
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js"></script> 
 
    
 
\t 
 
<script type="text/javascript"> 
 
    $(document).ready(function() { 
 
\t \t \t \t 
 
     $('#leweb_value_1').change(function() { // WENN SELECT CHANGED 
 
      $('#leweb_value_1_input').val(''); // TEXTFELD LEEREN 
 
      var selectValue = $(this).val() // VALUE AUS SELECT 
 
      $('#leweb_value_1_input').val(selectValue); // TEXTFELD FÜLLEN 
 
      leweb_price_new(); 
 
     }); \t \t 
 

 
     $('#leweb_value_2').change(function() { // WENN SELECT CHANGED 
 
      $('#leweb_value_2_input').val(''); // TEXTFELD LEEREN 
 
      var selectValue = $(this).val() // VALUE AUS SELECT 
 
      $('#leweb_value_2_input').val(selectValue); // TEXTFELD FÜLLEN 
 
      leweb_price_new(); 
 
     }); \t \t \t 
 

 
     $('#leweb_value_5').change(function() { // WENN SELECT CHANGED 
 
      $('#leweb_value_5_input').val(''); // TEXTFELD LEEREN 
 
      var selectValue = $(this).val() // VALUE AUS SELECT 
 
      $('#leweb_value_5_input').val(selectValue); // TEXTFELD FÜLLEN 
 
      leweb_price_new(); 
 
     }); \t 
 

 

 
function leweb_price_new() { 
 
    //if ($('input[name=type]').val() = 0) { 
 
     var a = parseInt($('#leweb_value_1_input').val()); 
 
     var b = parseInt($('#leweb_value_2_input').val()); 
 
\t \t var c = parseInt($('#leweb_value_5_input').val()); 
 
     var total = (a+b)*c; 
 
     if(!isNaN(total)){ 
 
      $('#total_price').val(total); 
 
     } 
 
} 
 

 
//jQuery('form').delegate('input[name=type], #leweb_value_1_input, #leweb_value_2_input','change', leweb_price_new); 
 
\t \t 
 
    
 
\t }); 
 
\t 
 

 
</script> 
 

 

 
\t 
 
</body> 
 
</html>

Quelle

2016-05-20 12:12:43 Chintan

funktioniert sehr gut, danke chintan –

Sie können die Antwort akzeptieren, wenn es hilft, so dass es auch für andere nützlich wäre – Chintan

getan, danke –

HTML

<table> 
    <tr> 
     <td width="40px">1</td> 
     <td>Number</td> 
     <td><input class="txt" type="text" name="txt" /></td> 
    </tr> 
    <tr> 
     <td>2</td> 
     <td>Number</td> 
     <td><input class="txt" type="text" name="txt" /></td> 
    </tr> 
    <tr> 
     <td>3</td> 
     <td>Number</td> 
     <td><input class="txt" type="text" name="txt" /></td> 
    </tr> 
    <tr id="summation"> 
     <td colspan ="2" align="right"> 
      Sum : 
     </td> 
     <td> 
      <input type="text" id='sum1' name="input" /> 
     </td> 
     </span> 
     </td> 
    </tr> 
</table>

jQuery

$(document).ready(function() { 
    //this calculates values automatically 
    calculateSum(); 

    $(".txt").on("keydown keyup", function() { 
     calculateSum(); 
    }); 
}); 

function calculateSum() { 
    var sum = 0; 
    //iterate through each textboxes and add the values 
    $(".txt").each(function() { 
     //add only if the value is number 
     if (!isNaN(this.value) && this.value.length != 0) { 
      sum += parseFloat(this.value); 
      $(this).css("background-color", "#FEFFB0"); 
     } 
     else if (this.value.length != 0){ 
      $(this).css("background-color", "red"); 
     } 
    }); 

    $("input#sum1").val(sum.toFixed(2)); 
}

Here is the DEMO

Hinweis: Es wird nicht ausgeführt, wenn Sie Text in Zahlenfeld eingeben

Quelle

2016-05-20 12:16:09 Nishant123

Iam versuchen, den Wert zu löschen (wenn ein Wert vorhanden ist) automatisch zu einem DIV oder einen P-Tag ...

Ich möchte den Wert aus #total_price Eingabefeld ausgeben ...

habe jemand eine Lösung dafür?

Quelle

2016-05-24 08:43:42

Summe der Eingabefelder sofort anzeigen

Antwort

Verwandte Themen