Показать сумму полей ввода сразу

Я хочу показать некоторые значения из полей ввода, которые будут суммироваться в одном поле ввода сразу же, когда клиенты заполняют форму. Значения каждого поля ввода будут считываться автоматически, но я не могу найти решение для подведения его автоматически ....Показать сумму полей ввода сразу

Код

<!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>

ли кто-нибудь получил решение?

источник

2016-05-20 Jo Le

Попробуйте это. Оно работает.

<!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>

источник

2016-05-20 12:12:43 Chintan

работает очень хорошо, спасибо chintan –

Вы можете принять ответ, если он поможет, чтобы он был полезен и для других тоже – Chintan

сделано, спасибо –

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

Примечание: Это не будет работать, если вы вводите текст в поле Номер

источник

2016-05-20 12:16:09 Nishant123

Iam пытается потушить значение (если значение существует) автоматически к DIV или P тега ...

Я хочу потушить значение из поля ввода #total_price ...

получил какое-то решение для этого?

источник

2016-05-24 08:43:42

Показать сумму полей ввода сразу

ответ

Смежные вопросы