JS表值更新onchange

时间：2016-07-30 16:23:17

标签： javascript php jquery

我想更新表格中紧接着我的表格中的值。购物车中的数量是增加和减少的，下表中的数值是匹配的。当时表格的输入字段的增加/减少是有效的，但我无法对表格字段进行任何更改。

JS for Form字段 - 

        <div class="row">
            <div class="col-md-6 col-sm-6">
                <div class="form-group">
                    <label>Adults</label>
                    <div class="numbers-row">
                        <input type="text" value="1" id="adult" onchange="myFunction()" class="qty2 form-control" name="quantity">
                    </div>
                </div>
            </div>
            <div class="col-md-6 col-sm-6">
                <div class="form-group">
                    <label>Children</label>
                    <div class="numbers-row">
                        <input type="text" value="0" id="child" class="qty2 form-control" name="quantity">
                    </div>
                </div>
            </div>
        </div>
        <br>
        <table class="table table_summary">
        <tbody>
        <tr>
            <td>
                Adults
            </td>
            <script>
                function myFunction() {
                    var x = document.getElementById("adult").value;
                    document.getElementById("adultvalue").innerHTML = "&pound;" + x;
                }
            </script>
            <td class="text-right">
                <p id="adultvalue">2</p>
            </td>
        </tr>
        <tr>
            <td>
                Children
            </td>
            <td class="text-right">
                0
            </td>
        </tr>
        <tr>
            <td>
                Total amount
            </td>
            <td class="text-right">
                3x £52
            </td>
        </tr>
        <tr class="total">
            <td>
                Total cost
            </td>
            <td class="text-right">
                £154
            </td>
        </tr>

HTML - 

#include <SFML\Graphics.hpp>

std::map<std::string, sf::Sprite> sprites;

void addSprite(std::string sprite_name, sf::Texture sprite_texture) {

    sf::Sprite sprite;

    sprite.setTexture(sprite_texture);

    sprites[sprite_name] = sprite;

}

sf::Sprite getSprite(std::string sprite_name) {

    return sprites[sprite_name];
}

std::vector<sf::Sprite> getSprites() {

    std::vector<sf::Sprite> sprites_c2;

    for each (sf::Sprite sprite in sprites.value_comp) {

        sprites_c2.emplace_back(sprite);

    }

    return sprites_c2;
}

4 个答案:

答案 0 :(得分：1)

请查看下面的代码段。我试图涵盖你所有的解决方案。对于孩子，我在演示中设置了26磅，成人为52磅。您可以根据需要进行更改。如果您发现任何疑问，请告诉我。

$(".numbers-row").append('<div class="inc button_inc">+</div><div class="dec button_inc">-</div>');

//Here for example took £52 for adult and £26 for child. you can change as per your need.
$(".button_inc").on("click", function () {
    var $button = $(this);
    var oldValue = $button.parent().find("input").val();
	if(oldValue==''){oldValue = 0;}
    if ($button.text() == "+") {
        var newVal = parseFloat(oldValue) + 1;
    } else {
        // Don't allow decrementing below zero
        if (oldValue > 1) {
            var newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 0;
        }
    }
    $button.parent().find("input").val(newVal);
    //This line under
    $('#adultvalue').html('&pound;' + newVal);
	updatePerson();
});
function updatePerson() {	
	var adultQuant = $("#adult").val();
	if(adultQuant==""){adultQuant=0;}
	var childQuant = $("#child").val();
	if(childQuant==""){childQuant=0;}
	
	$("#adultvalue").html(adultQuant);
	$("#childvalue").html(childQuant);
	$("#adultcalc").html(adultQuant);
	$("#childcalc").html(childQuant);
	var totalCost = (adultQuant*52) + (childQuant*26);
	$("#totalcost").html(totalCost);
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<div class="row">
	<div class="col-md-6 col-sm-6">
		<div class="form-group">
			<label>Adults</label>
			<div class="numbers-row">
				<input type="text" id="adult" onchange="updatePerson()" class="qty2 form-control" name="quantity">
			</div>
		</div>
	</div>
	<div class="col-md-6 col-sm-6">
		<div class="form-group">
			<label>Children</label>
			<div class="numbers-row">
				<input type="text" id="child" onchange="updatePerson()" class="qty2 form-control" name="quantity">
			</div>
		</div>
	</div>
</div>
<br>
<table class="table table_summary">
	<tbody>
	<tr>
		<td>
			Adults
		</td>
		<td class="text-right">
			<p id="adultvalue">0</p>
		</td>
	</tr>
	<tr>
		<td>
			Children
		</td>
		<td class="text-right">
			<p id="childvalue">0</p>
		</td>
	</tr>
	<tr>
		<td>
			Total amount
		</td>
		<td class="text-right">
			<p>Adults : <span id="adultcalc">0</span> x £52</p>
			<p>Child : <span id="childcalc">0</span> x £26</p>
		</td>
	</tr>
	<tr class="total">
		<td>
			Total cost
		</td>
		<td class="text-right">
			£<p id="totalcost">0</p>
		</td>
	</tr>
</table>

答案 1 :(得分：0)

当控件模糊时，会触发

onchange。所以这不会奏效。

您可以将此添加到jquery：

$(".numbers-row").append('<div class="inc button_inc">+</div><div class="dec button_inc">-</div>');
$(".button_inc").on("click", function () {

    var $button = $(this);
    var oldValue = $button.parent().find("input").val();

    if ($button.text() == "+") {
        var newVal = parseFloat(oldValue) + 1;
    } else {
        // Don't allow decrementing below zero
        if (oldValue > 1) {
            var newVal = parseFloat(oldValue) - 1;
        } else {
            newVal = 0;
        }
    }
    $button.parent().find("input").val(newVal);
    //This line under
    $('#adultvalue').html('&pound;' + newVal);
});
});

答案 2 :(得分：0)

我重新安排了一些部分，现在的结果是：

＆＃13;
＆＃13; 
$(function () {
  $(".numbers-row").append('<div class="inc button_inc">+</div><div class="dec button_inc">-</div>');
  $(".button_inc").on("click", function () {
    var $button = $(this);
    var oldValue = $button.parent().find("input").val();
    if ($button.text() == "+") {
      var newVal = parseFloat(oldValue) + 1;
    } else {
      // Don't allow decrementing below zero
      if (oldValue > 1) {
        var newVal = parseFloat(oldValue) - 1;
      } else {
        newVal = 0;
      }
    }
    $button.parent().find("input").val(newVal).trigger('input');
  });

  $('#adult, #child').on('input', function(e) {
    if (this.id == 'adult') {
      $('#adultvalue').text($(this).val());
    } else {
      $('#childrenvalue').text($(this).val());
    }
    $('#totalammountvalue').text(+$('#adult').val() + +$('#child').val());
    $('#totalcostvalue').text((+$('#adult').val() + +$('#child').val()) * 52);
  });

  $('#adult').trigger('input');
});
＆＃13; 
    <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
    <script src="https://code.jquery.com/jquery-1.12.1.min.js"></script>
    <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>


<div class="row">
    <div class="col-md-6 col-sm-6">
        <div class="form-group">
            <label>Adults</label>

            <div class="numbers-row">
                <input type="text" value="1" id="adult" onchange="myFunction()" class="qty2 form-control"
                       name="quantity">
            </div>
        </div>
    </div>
    <div class="col-md-6 col-sm-6">
        <div class="form-group">
            <label>Children</label>

            <div class="numbers-row">
                <input type="text" value="0" id="child" class="qty2 form-control" name="quantity">
            </div>
        </div>
    </div>
</div>
<br>
<table class="table table_summary">
    <tbody>
    <tr>
        <td>
            Adults
        </td>
        <script>
            function myFunction() {
                var x = document.getElementById("adult").value;
                document.getElementById("adultvalue").innerHTML = "&pound;" + x;
            }
        </script>
        <td class="text-right">
            <p id="adultvalue">2</p>
        </td>
    </tr>
    <tr>
        <td>
            Children
        </td>
        <td class="text-right">
            <p id="childrenvalue">0</p>
        </td>
    </tr>
    <tr>
        <td>
            Total amount
        </td>
        <td class="text-right">
            <span id="totalammountvalue">0</span>x £52
        </td>
    </tr>
    <tr class="total">
        <td>
            Total cost
        </td>
        <td class="text-right">
            £<span id="totalcostvalue">0</span>
        </td>
    </tr>
    </tbody>
</table>
＆＃13;
＆＃13;
＆＃13;

答案 3 :(得分：0)

我在HTML标记中添加了一些内容以使其正常工作并将所有内容包装在函数中以便正确添加事件。

HTML 

   <div class="row">
        <div class="col-md-6 col-sm-6">
            <div class="form-group adults">
                <label>Adults</label>
                <div class="numbers-row">
                    <input type="text" value="1" id="adult" onchange="myFunction()" class="qty2 form-control" name="quantity">
                   <div class="inc button_inc">+</div><div class="dec button_inc">-</div>
                </div>
            </div>
        </div>
        <div class="col-md-6 col-sm-6">
            <div class="form-group children">
                <label>Children</label>
                <div class="numbers-row">
                    <input type="text" value="0" id="child" class="qty2 form-control" name="quantity">
                    <div class="inc button_inc">+</div><div class="dec button_inc">-</div>
                </div>
            </div>
        </div>
    </div>
    <br>
    <table class="table table_summary">
    <tbody>
    <tr>
        <td>
            Adults
        </td>
        <script>
            function myFunction() {
                var x = document.getElementById("adult").value;
                document.getElementById("adultvalue").innerHTML = "&pound;" + x;
            }
        </script>
        <td class="text-right">
            <p id="adultvalue">1</p>
        </td>
    </tr>
    <tr>
        <td>
            Children
        </td>
        <td class="text-right">
            <p id="childrenvalue">
            0
            </p>
        </td>
    </tr>
    <tr>
        <td>
            Total amount
        </td>
        <td class="text-right">
            3x £52
        </td>
    </tr>
    <tr class="total">
        <td>
            Total cost
        </td>
        <td class="text-right">
            £154
        </td>
    </tr>

JS 

function addIncrementDecrementHandlers(formContainerSelector, cellToUpdateSelector) {
  $(formContainerSelector + ' .button_inc').on("click", function () {

      var $button = $(this);
      var oldValue = $button.parent().find("input").val();

      if ($button.text() == "+") {
          var newVal = parseFloat(oldValue) + 1;
      } else {
          // Don't allow decrementing below zero
          if (oldValue > 1) {
              var newVal = parseFloat(oldValue) - 1;
          } else {
              newVal = 0;
          }
      }
      $button.parent().find("input").val(newVal);
      //Here you set the new value in the table cell
        $(cellToUpdateSelector).html(newVal);
  });
}

addIncrementDecrementHandlers('.adults', '#adultvalue');
addIncrementDecrementHandlers('.children', '#childrenvalue');

This是jsfiddle所以你看它正在运作。

相关问题
最新问题