すぐに入力フィールドの合計を表示する

顧客がフォームに記入するとすぐに1つの入力フィールドにまとめられるように、入力フィールドからいくつかの値を表示したい。各入力フィールドの値は、今のところ、自動的に読み出されますが、私はそれを自動的に合算ための解決策を見つけることができません....すぐに入力フィールドの合計を表示する

コード

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

い誰もがソリューションplsを得た？

出典

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

、ありがとう –

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

すぐに入力フィールドの合計を表示する

答えて

関連する問題