2016-07-30 2 views
0

Я хотел бы обновить значения в таблице непосредственно ниже формы, которую у меня есть. Количества в тележке увеличены и уменьшены, а значение в таблице ниже должно соответствовать. В тот момент, когда увеличение/уменьшение работает для поля ввода для формы, но я не могу получить никаких изменений в поле таблицы.Обновление значения таблицы 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> 

ответ

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(); 
 
\t 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); 
 
\t updatePerson(); 
 
}); 
 
function updatePerson() { \t 
 
\t var adultQuant = $("#adult").val(); 
 
\t if(adultQuant==""){adultQuant=0;} 
 
\t var childQuant = $("#child").val(); 
 
\t if(childQuant==""){childQuant=0;} 
 
\t 
 
\t $("#adultvalue").html(adultQuant); 
 
\t $("#childvalue").html(childQuant); 
 
\t $("#adultcalc").html(adultQuant); 
 
\t $("#childcalc").html(childQuant); 
 
\t var totalCost = (adultQuant*52) + (childQuant*26); 
 
\t $("#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"> 
 
\t <div class="col-md-6 col-sm-6"> 
 
\t \t <div class="form-group"> 
 
\t \t \t <label>Adults</label> 
 
\t \t \t <div class="numbers-row"> 
 
\t \t \t \t <input type="text" id="adult" onchange="updatePerson()" class="qty2 form-control" name="quantity"> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
\t <div class="col-md-6 col-sm-6"> 
 
\t \t <div class="form-group"> 
 
\t \t \t <label>Children</label> 
 
\t \t \t <div class="numbers-row"> 
 
\t \t \t \t <input type="text" id="child" onchange="updatePerson()" class="qty2 form-control" name="quantity"> 
 
\t \t \t </div> 
 
\t \t </div> 
 
\t </div> 
 
</div> 
 
<br> 
 
<table class="table table_summary"> 
 
\t <tbody> 
 
\t <tr> 
 
\t \t <td> 
 
\t \t \t Adults 
 
\t \t </td> 
 
\t \t <td class="text-right"> 
 
\t \t \t <p id="adultvalue">0</p> 
 
\t \t </td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td> 
 
\t \t \t Children 
 
\t \t </td> 
 
\t \t <td class="text-right"> 
 
\t \t \t <p id="childvalue">0</p> 
 
\t \t </td> 
 
\t </tr> 
 
\t <tr> 
 
\t \t <td> 
 
\t \t \t Total amount 
 
\t \t </td> 
 
\t \t <td class="text-right"> 
 
\t \t \t <p>Adults : <span id="adultcalc">0</span> x £52</p> 
 
\t \t \t <p>Child : <span id="childcalc">0</span> x £26</p> 
 
\t \t </td> 
 
\t </tr> 
 
\t <tr class="total"> 
 
\t \t <td> 
 
\t \t \t Total cost 
 
\t \t </td> 
 
\t \t <td class="text-right"> 
 
\t \t \t £<p id="totalcost">0</p> 
 
\t \t </td> 
 
\t </tr> 
 
</table>

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); 
}); 
}); 
0

Я переставить некоторые разделы и теперь результат:

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

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 так что вы видите это работает.

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