Question

我想在输入字段中显示一些值，在客户填写表单时立即在一个输入字段中汇总。现在将自动读出每个输入字段的值，但我找不到自动求和的解决方案....

代码

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

有人有解决方案吗？

Answer 1

试试这个。它有效。

＆＃13;

MDs

＆＃13;

Answer 2

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

注意：如果您在数字字段中输入文字

，则无法运行

Answer 3

我试图将值（当值存在时）自动输出到DIV或P标签......

我想从#total_price输入字段中输出值...

为此找到了一个解决方案？

立即显示输入字段的总和

3 个答案: