JS表值更新onchange

我想更新表格中的值，我立即下表中的值。購物車中的數量會增加和減少，下表中的數值將匹配。此時，表單的輸入字段的增加/減少適用，但我無法在表格字段中進行任何更改。JS表值更新onchange

JS的形式現場

/* Input incrementer*/ 
$(".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); 
}); 
});

HTML - 當控制模糊

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

來源

2016-07-30 Simon Turner

平變化被觸發。所以這是行不通的。

您可以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); 
}); 
});

來源

2016-07-30 17:13:09 Arcades

我重新安排一些章節現在的結果是：

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

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

來源

2016-07-30 17:17:47 gaetanoM

我加了幾件事情要你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>

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。

來源

2016-07-30 17:26:11

JS表值更新onchange

回答

相關問題