Q:

Show sum of input fields immediately

I want to show some values from input fields, to be summed up in one input field immediately when a customers fills out the form. The values of each input field will be read out automatically for now, but I can not find a solution for summing it up automatically....
The code

<!DOCTYPE HTML>
<html lang="en">
<head>
 <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>
 <select id="leweb_value_5" class="leweb_value_5" name="leweb_value_5" value="">
  <option value="">Anzahl waehlen</option>
  <option value="2.50">1x</option>
  <option value="5.00">2x</option>
   </select>
 <input type="text" id="leweb_value_5_input" name="leweb_value_5_input" value=""/><br> 
 
<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>
 
 
<script type="text/javascript">
    $(document).ready(function() {
    
        $('#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_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_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
        }); 


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());
  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);
  
    
 });
 

</script>


 
</body>
</html>

Does anyone got a solution pls?

A:

Try this. It works.

<!DOCTYPE HTML>
<html lang="en">
<head>
 <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>
 <select id="leweb_value_5" class="leweb_value_5" name="leweb_value_5" value="">
  <option value="">Anzahl waehlen</option>
  <option value="2.50">1x</option>
  <option value="5.00">2x</option>
   </select>
 <input type="text" id="leweb_value_5_input" name="leweb_value_5_input" value=""/><br> 
 
<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>
 
 
<script type="text/javascript">
    $(document).ready(function() {
    
        $('#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();
        });  

        $('#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();
        });   

        $('#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();
        }); 


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());
  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);
  
    
 });
 

</script>


 
</body>
</html>

